Custom Code to Start Animation on Scroll

At a glance

The community member has a GSAP animation that starts when the page loads, and they need to add something to make the animation start only when the element scrolls into view. The comments suggest using the GSAP ScrollTrigger library to achieve this. One community member provides a link to the ScrollTrigger documentation, and another recommends a resource for using GSAP with Webflow sites. The community members discuss the difference between animations controlled by scroll versus animations that start when an element scrolls into the viewport, and one community member clarifies that ScrollTrigger can do both.

Useful resources

SSara Margolies

Can someone help me with custom code?
I have this code as a GSAP animation but the animation starts when the page loads, so I need to add something that the animation only starts when the element scrolls into view. Thanks

<script>https://unpkg.com/split-type</a>"></script>
<script>https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js</a>"></script>

<script><br />let typeSplit = new SplitType('[animate]', {<br /> types: 'lines, words, chars',<br /> tagName: 'span'<br />})<br /><br />gsap.from('[animate] .word', {<br /> opacity: 0.3,<br /> duration: 1.05,<br /> ease: 'power1.out',<br /> stagger: 0.2,<br /><br />})<br /></script>

5 comments

MMike

You'll need to include GSAP's ScrollTrigger library if you want to animate on scroll.
Docs here: https://gsap.com/docs/v3/Plugins/ScrollTrigger/

MMike

Here's a great resource I use daily to help with GSAP for Webflow sites:
https://chatgpt.com/g/g-LuhKTeMx5-flowscripts
From the 🐐 himself, Timothy Ricks.

SSara Margolies

Thank you @U06EW9DJ6KT. I thought there scroll trigger was that the animation is controlled by the scroll, meaning it develops more as you scroll, vs just starting when the element scrolls into the viewport. Am I wrong?

MMike

it can do both 🙂

SSara Margolies

Thanks for the clarification.

Add a reply

Community forum for knowledge and support

Custom Code to Start Animation on Scroll