Employer Style Base Pattern Library

Animations: Transition Toggle Button 

<img src='../../documentation/images/animation/transition--radio-toggle.gif' alt='toggle button transition example - radio buttons'>
<img src='../../documentation/images/animation/transition--checkbox-toggle.gif' alt='toggle button transition example - checkbox'>
 
<img src='{{ path '/documentation/images/animation/transition--radio-toggle.gif' }}' alt='toggle button transition example - radio buttons'>
<img src='{{ path '/documentation/images/animation/transition--checkbox-toggle.gif' }}' alt='toggle button transition example - checkbox'>
 
/* No context defined for this component. */
  • Content: 
    $base-transition: all 0.2s ease;

$toggle-button-transistion--radio: all 0.05s ease;
$toggle-button-transistion--checkbox--color: background-color 0.4s ease;
$toggle-button-transistion--checkbox--switch: transform 0.2s ease;

$video-play-button-ripple--transition: 1500ms ease;
$video-play-button-ripple--opacity: 0.10;
$video-play-button-ripple--duration: 5s;
$video-play-button-ripple--count: 3;

$popup-animation-transition: all 0.8s ease-in-out;

$popup-background-transition: all 0.3s ease-out;

$element-spin-base-transition: all 300ms 0s ease-in-out;

$element-spin-rotation-full: rotate(360deg);

$element-spin-rotation-half: rotate(540deg);

$element-slow-fade-in: 0.4s;
  • URL: /components/raw/animations/_animations.scss
  • Filesystem Path: sass/directives/00_variables/animations/_animations.scss
  • Size: 680 Bytes

Review ‘Assets’ to see which variable produces the animation’