{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/gsap-scrolltrigger-notes/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n

ScrollTrigger is a powerful tool for creating scroll-based animations.

\n

Using ScrollTrigger with React

\n

Installation

\n
npm i gsap
\n
import { gsap } from "gsap"\nimport { ScrollTrigger } from "gsap/ScrollTrigger"\n\ngsap.registerPlugin(ScrollTrigger)
\n

We can control animations when they enter and leave the viewport by adding a scrollTrigger property to the vars object (the second argument passed to the gsap.from() method ).

\n

Below, we start the animation when the box enters the viewport.

\n
gsap.from(".box", {\n  x: 300,\n  duration: 1,\n  ease: "linear",\n  scrollTrigger: ".box",\n})
\n

Note that the trigger can be any element; it doesn’t have to be the target element of the animation.

\n

Customizing start & end properties

\n

By default, ScrollTrigger activates the animation when the top of the trigger element enters the viewport.

\n
gsap.from(".box", {\n  x: 300,\n  duration: 1,\n  ease: "linear",\n  scrollTrigger: {\n    trigger: ".box",\n    markers: true,\n    // start the animation when the top of the box reaches 75% of the viewport height.\n    start: "top 75%",\n    // end the animation when the top of the box reaches 25% of the viewport height.\n    end: "bottom 25%",\n  },\n})
\n

Toggle actions

\n

We can use the toggleActions property to configure what the animation does as it enters and leaves the viewport.

\n
gsap.from(".box", {\n  x: 300,\n  duration: 1,\n  ease: "linear",\n  scrollTrigger: {\n    trigger: ".box",\n    // adds markers that are helpful during development/troubleshooting\n    markers: true,\n    // start the animation when the top of the box reaches 75% of the viewport height.\n    start: "top 75%",\n    end: "bottom 25%",\n    //events: onEnter, onLeave, OnEnterBack, OnLeaveBack\n    toggleActions: "restart pause reverse reset",\n    // options: play, pause, resume, reset, restart, complete, reverse, none\n  },\n})
\n

Controlling a timeline with ScrollTrigger

\n

We can add ScrollTrigger to an entire timeline by passing in a scrollTrigger object.

\n
const tl = gsap.timeline({\n  scrollTrigger: {\n    trigger: ".container",\n    start: "top 50%",\n    snd: "bottom top",\n    markers: true,\n    scrub: 1,\n  },\n})\n\ntl.to(".box", { rotation: 360 }).from(".box", { scale: 0.3 })
\n","frontmatter":{"title":"GSAP ScrollTrigger Notes","date":"2021-05-25"}}},"pageContext":{"slug":"/gsap-scrolltrigger-notes/","prev":{"fields":{"slug":"/understanding-execution-stack-in-javascript/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/gsap-notes/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}