Animations on scroll

Animate.css library is used for basic animations and are triggered by GSAP ScrollTrigger. Available animations – https://animate.style/ Usage Add the class animate and the class of the animation to the element you want to animate.  You will need to uncomment any animation you want to use in /assets/scss/_vendor/animate-css/animate.scss. Note: Animate.css documentation references a prefix animate__ .  Tidal’s library does not currently use that.  Examples

<div class="animate fadeInLeft" data-animate-delay="0.5s">Fade in from left with 0.5 second delay.</div>

<div class="animate fadeInLeft" data-animate-start="bottom 100%">Fade in from left when the bottom of the viewport hits the bottom of the element.</div>

Options data-animate-start – Describes a place on the trigger and a place on the scroller that must meet in order to start the ScrollTrigger. So, for example, “top center” means “when the top of the trigger hits the center of the scroller” (and the scroller is the viewport by default). Default: ‘Top 80%’ Reference https://greensock.com/docs/v3/Plugins/ScrollTrigger/start data-animate-delay – Delay before the animation starts. Default: 0

paragraph

quote

cite