Tag: GSAP

Code for GSAP SplitText plugin

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...

ScrollTrigger – Timeline – GSAP

GSAP

Checkout the following demo for timeline that executes animation one after the another seamlessly. DEMO – open in a new tab HTML <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta...