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