Custom Animations

The advanced way to create animations on your site.

Familiar with CSS and HTML, start creating custom animations on a global scale.

Activating a CSS selector

  1. Activate by any CSS selector (class, id, or any HTML tag)
  2. Activation will simply integrate the element with your STA settings
  3. A new class will be added when the element is due to animate 'scroll-triggered' which can be targetted with CSS. See example below.
h1{opacity:0;transition:.5s;}
h1.scroll-triggered{opacity:1;}
Activate Element

Activated Elements

Click an element to deactivate

No Elements currently activated
value="">

Apply your CSS

Apply your CSS in the text box below or anywhere within your theme.