Category: GSAP

GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

Fade-in animation using scrollTrigger – GSAP

GSAP

Here is a function that you can initiate to fade in up elements with class “fade-in” on viewport. const initFadeInAnimation = () => { const fadeElements = document.querySelectorAll(“.fade-in”); fadeElements.forEach((element) => {...

GSAP – Play SplitText Animation on Viewport

GSAP

Here is a code to play split text animation on a text with the class “.split-text” whenever it is visible in the viewport. // Play SplitText Animation on Viewport function playAnimation() { var tl = gsap.timeline(), mySplitText = new...

Code for GSAP SplitText plugin

Code Snippets, GSAP

This is just a code snippet. I will add a demo when I get time. gsap.registerPlugin(ScrollTrigger, SplitText); // Register plugin first // Timeline for split text var tl = gsap.timeline(), mySplitText = new SplitText(“.splitText”, { type:...

Toggle class on Viewport using GSAP scrollTrigger plugin

GSAP

This is just a code. Will add a demo soon… // Add active class to all element on viewport const toggleActiveOnViewport = () => { let elements = $(“.toggleActiveOnViewport”); elements.each(function() { let element = this; ScrollTrigger.create({...

The script that will jump to pages and sections with the id on anchor click with #

GSAP

If you want to make the browser go to a particular section with the id within the page or some different page if the id is not found, then you can do it with the following script. I used it in one of my projects and it is working fine. I am also using it with the...

GSAP ScrollTrigger – Pin

GSAP

In this demo the block gets pinned to viewport on page scroll to bottom. Have a look at the code also. DEMO – open in a new tab HTML <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta...