Transition patterns

Transition patterns are animations that happen when a user interacts with an element on the page. They are CSS transition styles that are controlled via JavaScript.

Types

Move transition

A transition that moves from one position to another.

Click me!

HTML code snippet

<div class="u-move-transition example-box">Click me!</div>
<script>
  const moveTransitionExample = document.querySelector( '.example-box.u-move-transition' );
  const moveTransition = new MoveTransition( moveTransitionExample ).init();
  moveTransitionExample.addEventListener( 'click', () => {
      moveTransition.moveRight();
      setTimeout( () => {
        moveTransition.moveToOrigin();
      }, 1000 );
  } );
</script>

Implementation details

The move transition is added to an element by creating a new MoveTransition instance in JavaScript and calling its methods:

// Create reference to an element in the DOM.
const element = document.querySelector( '.example-box' );

// Create a new transition instance and pass in the element reference.
const transition = new MoveTransition( element );

// Initialize the transition.
transition.init();

// Call methods on the transition.
transition.moveRight();

Alpha transition

A transition that fades from one opacity to another.

Click me!

HTML code snippet

<div class="u-alpha-transition example-box">Click me!</div>
<script>
  const alphaTransitionExample = document.querySelector( '.example-box.u-alpha-transition' );
  const alphaTransition = new AlphaTransition( alphaTransitionExample ).init();
  alphaTransitionExample.addEventListener( 'click', () => {
    alphaTransition.fadeOut();
    setTimeout( () => {
      alphaTransition.fadeIn();
    }, 1000 );
  } );
</script>

Implementation details

The alpha (opacity) transition is added to an element by creating a new AlphaTransition instance in JavaScript and calling its methods:

// Create reference to an element in the DOM.
const element = document.querySelector( '.example-box' );

// Create a new transition instance and pass in the element reference.
const transition = new AlphaTransition( element );

// Initialize the transition.
transition.init();

// Call methods on the transition.
transition.fadeOut();

MaxHeight transition

A transition that changes the height of an element.

Click me! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML code snippet

<div class="u-max-height-summary example-box">
  Click me!

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
  in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<script>
  const maxHeightTransitionExample = document.querySelector( '.example-box.u-max-height-summary' );
  const maxHeightTransition = new MaxHeightTransition( maxHeightTransitionExample ).init();
  maxHeightTransitionExample.addEventListener( 'click', () => {
    maxHeightTransition.maxHeightDefault();
    setTimeout( () => {
      maxHeightTransition.maxHeightSummary();
    }, 1000 );
  } );
</script>

Implementation details

The max-height transition is added to an element by creating a new MaxHeightTransition instance in JavaScript and calling its methods:

// Create reference to an element in the DOM.
const element = document.querySelector( '.example-box' );

// Create a new transition instance and pass in the element reference.
const transition = new MaxHeightTransition( element );

// Initialize the transition.
transition.init();

// Call methods on the transition.
transition.maxHeightSummary();
Edit page