You can load your HTML conent with awesome animations enabled on scroll.
To animate your HTML element, use the markup below:
1 2 3 4 |
<header class="ct-pageSectionHeader text-center ct-js-animationDynamic"> <h2 class="ct-js-animation--item" data-when="span" data-from="0.5" data-to="0" data-opacity="0" data-translatey="-50">Let's</h2> <h3 class="ct-u-text--white ct-js-animation--item ct-u-hdr3" data-when="span" data-from="0.5" data-to="0" data-opacity="0" data-translatey="50">GET IN TOUCH</h3> </header> |
You can adjust animations with the following data-attributes:
- data-when
- data-from
- data-to
- data-easing
- data-crop
- data-opacity
- data-scale
- data-scalex
- data-scaley
- data-scalez
- data-rotatex
- data-rotatey
- data-rotatez
- data-translatex
- data-translatey
- data-translatez
And CSS classes:
- .ct-js-animationDynamic,
- .ct-js-animation–item
Here you will find full plugin documentation.