\n\n\n","url":"/x/issues/wm4l6r6xa7u7/trigger-gsap-animation-on-scroll-into-view-with-cu","author":{"@type":"Person","name":"Sara M.","url":"/user/75da9456-e3d4-41ee-be2c-ff70634446a6"},"datePublished":"2025-06-12T11:35:36.438649+00:00","dateModified":"2025-06-13T17:02:22.387974+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},"comment":[{"@type":"Comment","text":"You'll need to include GSAP's ScrollTrigger library if you want to animate on scroll.\nDocs here: https://gsap.com/docs/v3/Plugins/ScrollTrigger/","author":{"@type":"Person","name":"Mike","url":"/user/9eaab553-a9cc-4606-940c-3c88e303e7cf"},"datePublished":"2025-06-13T17:00:11.240884+00:00","dateModified":"2025-06-13T17:00:12.718222+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}},{"@type":"Comment","text":"Here's a great resource I use daily to help with GSAP for Webflow sites:\nhttps://chatgpt.com/g/g-LuhKTeMx5-flowscripts\nFrom the 馃悙 himself, Timothy Ricks.","author":{"@type":"Person","name":"Mike","url":"/user/9eaab553-a9cc-4606-940c-3c88e303e7cf"},"datePublished":"2025-06-13T17:00:15.081893+00:00","dateModified":"2025-06-13T17:00:17.271463+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Thank you Mike. 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?","author":{"@type":"Person","name":"Sara M.","url":"/user/75da9456-e3d4-41ee-be2c-ff70634446a6"},"datePublished":"2025-06-13T17:01:00.09684+00:00","dateModified":"2025-06-13T17:01:01.478818+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}},{"@type":"Comment","text":"it can do both 馃檪","author":{"@type":"Person","name":"Mike","url":"/user/9eaab553-a9cc-4606-940c-3c88e303e7cf"},"datePublished":"2025-06-13T17:02:16.316742+00:00","dateModified":"2025-06-13T17:02:17.700341+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}},{"@type":"Comment","text":"Thanks for the clarification.","author":{"@type":"Person","name":"Sara M.","url":"/user/75da9456-e3d4-41ee-be2c-ff70634446a6"},"datePublished":"2025-06-13T17:02:22.387974+00:00","dateModified":"2025-06-13T17:02:24.200096+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]}
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 src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script>
let typeSplit = new SplitType('[animate]', {
types: 'lines, words, chars',
tagName: 'span'
})
gsap.from('[animate] .word', {
opacity: 0.3,
duration: 1.05,
ease: 'power1.out',
stagger: 0.2,
})
</script>
Thank you Mike. 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?
Thanks for the clarification.
