Search the Community

Hi, I am working on this idea of scrolling through sections with SVG's. Those SVG's have layers that I animate with ScrollTrigger. There are 3 sections 'Hero scene', 'City scene' and 'New section' (in the future there might be more sections). At the moment I am a bit stuck on how to continue, specifically how to transtition from the 'City scene' to the 'New section'. Preferably I have the City pinned/snapped so that those layers will go down where then the layers from the 'New section' will animate from underneath. Basically how the hero transitions into the city. Also I am not sure if this is the right way of doing this. It could be that I need to change the way I have setup those sections and that there is a better way and more scalable way when adding more sections that flow into one another. If there's someone who can help me get into the right direction it would be much appreciated! PS If needed, I can transfer my example codepen to stackblitz (https://stackblitz.com/@gsap-dev/collections). Because those SVG's are pretty large and I can imagine for readability it would be easier. Greetings, Mark For a better view I recommend viewing the 'Full Page View' as it is not optimized for smaller screen sizes ----

Hey, I'm trying to apply a zoom masking effect where, as I scroll down, the text scales up. But when I scroll back up quickly, the masking doesn't align properly with the scroll speed.

There's this extra space below the section even though i have given the section 680px of height.. and also at the end of this sectiona massive space is coming even though i never added it?.. heres the code "use client" import React, { useEffect, useRef } from 'react' import gsap from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' const steps = [ { id: 1, number: '1', title: 'Initial Discovery & Research', desc: 'We begin by aligning your goals with market research to validate and shape ideas.' }, { id: 2, number: '2', title: 'Brainstorming & Idea Generation', desc: 'We collaborate through brainstorming to spark innovation and explore diverse ideas.' }, { id: 3, number: '3', title: 'Idea Screening & Selection', desc: 'We filter ideas by feasibility, goals, and market fit to focus on those with the highest potential.' }, { id: 4, number: '4', title: 'User Persona Development', desc: 'We craft user personas to tailor concepts around real needs, behaviours, and pain points for user-centric solutions.' }, { id: 5, number: '5', title: 'Feasibility Study & Risk Assessment', desc: 'We assess feasibility and risks to build a strong, strategic foundation for product development.' }, { id: 6, number: '6', title: 'Prototyping & Concept Visualization', desc: 'We create prototypes and wireframes to visualize ideas, refine concepts, and gather stakeholder feedback.' }, { id: 7, number: '7', title: 'Feedback & Iteration', desc: 'We gather feedback to refine prototypes, ensuring concepts meet user needs and market expectations.' }, { id: 8, number: '8', title: 'Defining the Product Roadmap', desc: 'We design a product roadmap that defines timelines, milestones, and goals to guide development.' }, { id: 9, number: '9', title: 'Final Concept Approval', desc: 'The process ends with final concept approval, aligning all stakeholders for development.' } ] function ProductSuccess() { const sectionRef = useRef<HTMLDivElement | null>(null) const cardsContainerRef = useRef<HTMLDivElement | null>(null) const cardRefs = useRef<Array<HTMLDivElement | null>>([]) useEffect(() => { gsap.registerPlugin(ScrollTrigger) // Offset to leave space for fixed navbar (adjust if navbar height changes) const NAV_OFFSET_PX = -45 const section = sectionRef.current const cardsContainer = cardsContainerRef.current const cards = cardRefs.current if (!section || !cardsContainer || cards.length === 0) return // Calculate card height + gap const cardHeight = cards[0]?.offsetHeight || 0 const gap = 16 // mb-4 = 16px const totalCardHeight = cardHeight + gap // Set initial positions - all cards stacked below the viewport cards.forEach((card, index) => { if (index === 0) { gsap.set(card, { y: 0 }) } else { // Position each card below the previous one gsap.set(card, { y: totalCardHeight * index }) } }) // Create timeline for the animation const tl = gsap.timeline({ scrollTrigger: { trigger: section, // start when section hits just below navbar start: `top+=${NAV_OFFSET_PX} top`, end: () => `+=${totalCardHeight * (cards.length - 1) + window.innerHeight}`, scrub: 0.5, pin: true, anticipatePin: 1, } }) // Animate each card group cards.forEach((card, index) => { if (index > 0) { // Move all cards from current index onwards up by one card height const cardsToMove = cards.slice(index) tl.to(cardsToMove, { y: (cardIndex) => { const originalIndex = index + cardIndex const newPosition = totalCardHeight * (originalIndex - index) return newPosition }, duration: 1, ease: "none", stagger: 0 }, index === 1 ? 0 : ">") } }) return () => { ScrollTrigger.getAll().forEach(trigger => trigger.kill()) } }, []) return ( <section ref={sectionRef} className="w-full bg-white py-12 md:py-16 lg:py-20 h-[680px] overflow-hidden"> <div className="max-w-7xl mx-auto px-4 lg:px-0"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start"> {/* Left: Heading + paragraph (pinned) */} <div className="flex flex-col justify-start lg:sticky lg:top-0"> <h2 className="font-['Inter'] font-semibold text-[28px] md:text-[32px] lg:text-[36px] leading-[120%] text-[#000000] max-w-[550px]"> From Vision to Reality: Our Proven Path to Product Success </h2> <p className="mt-4 md:mt-8 font-['Inter'] font-normal text-[16px] leading-[24px] text-[#00000066] max-w-xl"> Our product ideation and conceptualization is a step-by-step journey from brainstorming and research to prototyping and refinement. We then craft a strategic roadmap to guide your concept into development, ensuring every decision aligns with your vision. </p> </div> {/* Right: Steps list with animation */} <div className="w-full relative"> <div ref={cardsContainerRef} className="relative h-[200px]"> <div className="absolute top-0 left-0 w-full"> {steps.map((s, index) => ( <div key={s.id} ref={el => { cardRefs.current[index] = el }} className="absolute top-0 left-0 w-full" > <div className="flex items-stretch gap-[36px]"> {/* Strip */} <div className="w-[66px] flex flex-col items-center flex-shrink-0 bg-white"> <div className="text-left whitespace-nowrap bg-white font-['Inter'] font-semibold text-[15px] leading-[20px] text-[#000000]"> {`STEP - 0${s.number}`} </div> <div className="flex-1 w-full flex items-start min-h-[120px]"> <div className="mx-auto w-0.5 h-full" style={{ background: 'repeating-linear-gradient(to bottom, #00000033 0px, #00000033 4px, transparent 4px, transparent 6px)' }} /> </div> </div> {/* Card */} <div className="flex-1 mb-4"> <div className="bg-[#FAFAFA] rounded-[12px] p-6"> <div className="flex flex-col items-start"> <div className="w-[48px] h-[48px] rounded-[8px] bg-[#3C82F6] flex items-center justify-center mb-3"> <span className="font-['Inter'] font-bold text-[24px] leading-[24px] text-white">{s.number}</span> </div> <div className="font-['Inter'] font-medium text-[18px] leading-[27px] text-[#0C0C0C]"> {s.title} </div> <div className="mt-1 font-['Inter'] font-normal text-[12px] leading-[20px] text-[#00000066]"> {s.desc} </div> </div> </div> </div> </div> </div> ))} </div> </div> </div> </div> </div> </section> ) } export default ProductSuccess

Sorry for not (yet) having a minimal demo, I hope that someone can point me in the right direction without, but I'm willing to build one if needs be. Also as the my problem ist related to iOS (and iPad OS) I might have to make a video if my explanation doesn't suffice. The situation: I have 6 Sections that fill the Body (minus fixed footer and header) the first is an group picture with transparent divs overlayed that scrollto (gsap.plugin) the related section of the person. Each section has a Timeline with a scrollTrigger with a label dead center. All of that works without a hitch on all desktop-browsers I tested it on. (Including Safari on the Mac.) I also have a onSnapComplete callback that fires an independent animation with a minimal delay. Also working as expected. On the i-devices however the sections tremble for quite a while regardless from of method i reach them. (Normal scrollling or scrollTo.) I have a delay and a duration for snapping, but playing with those didn't help. I tried force3D with false and true to no avail worked autoKill: false into the scrollTo - no dice... (I testet on an iPad Pro 12,9 " 4th gen and a iPhone 12proMax, so hardware speed isn't the likely reason) Here is the temporary linke to the page https://bit.ly/3jSenqy so you can see and compare if you would want to. I do hope that the issue is something that came up before and you can point me in the right direction. Thanks!

I made this animation using Scroll-Trigger. The concept is to scroll normally through the main page until reaching a specific section. This section is pinned, and its subsections are stacked and animated one over the other on scroll. Once the last subsection is reached, the main page continues with normal scrolling. However, when I try to add Scroll-Smoother to the page, the animation doesn't work. I would be grateful if you could help me. Thank you in advance!

Hi, I have a problem with the correct scroll trigger after a section with a horizontal scroll. Text animations load correctly before the horizontal scroll. But the horizontal scroll breaks the start of the text animation under that section. How can I fix this?

Hi, I'm working on creating an event site where clicking on "Register Now" should scroll to the last section (Register Form) and skip intermediate sections. 3rd and 4th boxes (and any other intermediate boxes) should be skipped. The animation should only work on screen sizes above 800px and mobile experience will be default scrolling. Attached CodePen has minimal code that shows what I'm trying to do. I looked at multiple CodePen examples but couldn't find something similar. Can you please help? Also, is this the best/smoothest method to accomplish what I'm trying to do or is using Observer instead of ScrollTrigger better? Thank you!

I dug into old topics and found some solutions but none of them worked or maybe I couldn't correctly try them so forgive me if I'm repeating an old question. I just want to implement a simple sticky inside its parent and though the element sticks to the correct position, the start seems wrong. The main problem is the end because the sticky element stops before it reaches the bottom of its parent.

if (window.innerWidth >= 1280) { gsap.registerPlugin(ScrollTrigger) initGSAPAnimations() window.addEventListener('resize', () => { ScrollTrigger.getAll().forEach(trigger => trigger.kill()) initGSAPAnimations() ScrollTrigger.refresh() }) function initGSAPAnimations() { gsap.to('.hero', { scale: 0.7, scrollTrigger: { trigger: '.two-block', start: 'top-=100 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.box-two-block:nth-child(odd)', { x: 1800, scrollTrigger: { trigger: '.hero', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.from('.box-two-block:nth-child(even)', { x: -1800, scrollTrigger: { trigger: '.hero', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.to('.two-block', { scale: 0.7, scrollTrigger: { trigger: '.about', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__video-holder', { scale: 0.5, scrollTrigger: { trigger: '.about', start: 'top-=380 50%', end: 'bottom-=180 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__title-box .title-box__title', { scale: 0.5, scrollTrigger: { trigger: '.about', start: 'top-=380 50%', end: 'bottom-=180 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__title-box .title-box__text-holder', { scale: 0.5, scrollTrigger: { trigger: '.about', start: 'top-=380 50%', end: 'bottom-=180 100%', scrub: 2, // markers: true, }, }) gsap.from('.about__item', { x: 2200, duration: 1.2, stagger: 0.3, ease: 'power3.out', scrollTrigger: { trigger: '.about', start: 'top 20%', end: 'bottom 20%', toggleActions: 'play reverse play reverse', // markers: true, }, }) gsap.to('.about', { scale: 0.7, scrollTrigger: { trigger: '.fixtures', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.fixtures__title-box .title-box__title', { opacity: 0, scrollTrigger: { trigger: '.fixtures', start: 'top-=100 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.fixtures-slider', { x: 1800, scrollTrigger: { trigger: '.fixtures', start: 'top-=150 50%', end: 'bottom-=50 100%', scrub: 2, // markers: true, }, }) gsap.to('.fixtures', { scale: 0.7, scrollTrigger: { trigger: '.services', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.services__title-box .title-box__title', { opacity: 0, scrollTrigger: { trigger: '.services', start: 'top-=250 50%', end: 'bottom-=150 100%', scrub: 2, // markers: true, }, }) gsap.from('.item-services:nth-child(odd)', { x: 1800, opacity: 0, scrollTrigger: { trigger: '.fixtures', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.from('.item-services:nth-child(even)', { x: -1800, opacity: 0, scrollTrigger: { trigger: '.fixtures', start: 'top start', end: 'bottom-=100 end', scrub: 2, // markers: true, }, }) gsap.to('.services', { scale: 0.7, scrollTrigger: { trigger: '.projects', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects__title-box .title-box__title', { opacity: 0, scrollTrigger: { trigger: '.projects', start: 'top-=200 50%', end: 'bottom-=850 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects__title-box .title-box__text-holder', { opacity: 0, scrollTrigger: { trigger: '.projects', start: 'top-=200 50%', end: 'bottom-=850 100%', scrub: 2, // markers: true, }, }) gsap.to('.projects', { scale: 0.7, scrollTrigger: { trigger: '.logos', start: 'top 50%', end: 'bottom 100%', scrub: 2, // markers: true, }, }) if (window.innerHeight < 800) { gsap.from('.projects-slide__right-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=850 50%', end: 'bottom-=880 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects-slide__left-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=850 50%', end: 'bottom-=880 100%', scrub: 2, // markers: true, }, }) gsap.from('.pagination-projects-slide', { x: 2200, duration: 1.2, stagger: 0.3, ease: 'power3.out', scrollTrigger: { trigger: '.projects-slider', start: 'top+=750 50%', end: 'bottom+=220 100%', toggleActions: 'play none none none', // markers: true, }, }) } else { gsap.from('.projects-slide__right-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=250 50%', end: 'bottom-=450 100%', scrub: 2, // markers: true, }, }) gsap.from('.projects-slide__left-col', { scale: 0.5, scrollTrigger: { trigger: '.projects', start: 'top-=250 50%', end: 'bottom-=450 100%', scrub: 2, // markers: true, }, }) gsap.from('.pagination-projects-slide', { x: 2200, duration: 1.2, stagger: 0.3, ease: 'power3.out', scrollTrigger: { trigger: '.projects-slider', start: 'top+=250 50%', end: 'bottom+=230 0%', toggleActions: 'play none none none', // markers: true, }, }) } } } Hello, the animation works great, but everything goes wrong when I reduce the zoom of the page or I reduce or increase the width of the browser window and then the animation stops working. I am attaching the code, as well as a demo site where you can see the animation itself and its behavior when changing the width of the browser window. When scrolling down, my section should shrink using scale. But after changing the screen width, something strange happens. Please help solve this issue. Project download — https://github.com/denys-khrapov/babolar Demo link — https://denys-khrapov.github.io/babolar/

hello, I have a problem with a scroll trigger with a pin for two sections, the goal is to pin the first one, scroll to pin the second, and scroll to the bottom of the page. I tried a lot of different things, with anticipate pin, trigger, and change the start and end of the trigger, but nothing looks ok, a little 'jump' appears between the different pin. Actually, the trigger is on the parent of the 2 sections , and in the same timeline, but i don't know how to fix it.. I attached a video and the code i used. Thanks for the response :) Enregistrement de l’écran 2025-01-03 à 14.mp4

Hi Guys, Iam getting issue while scrolling the timeline to particular section or progress over button click while using scroll trigger in timeline. I have tried with scroll progress but its not working any help or suggestion will be very helpful.

I’m trying to set up an animation for a pinned container. Everything seems to work, but I can’t figure out why I need to set the section height to 100vh more than the height of all the scrollable elements combined. Am I doing something wrong? https://codepen.io/mikhail21990/pen/LEPyrjO

I have a problem with the z-index of the footer in animations created with pinned sections. What I want to do is to make the footer clickable. I couldn't find a solution for this. Could you please help me?

I’m trying to replicate the scroll animation in the Services section of Webisoft's website, using Lenis and ScrollTrigger. However, I can’t achieve the effect where the top part of each section remains partially stacked as you scroll. Here’s my CodePen link: https://codepen.io/Miffy402/pen/mdNLBBq. Any advice or tips would be greatly appreciated!

Hi Team, 1. When I come to the fact and figure section in the viewport at the top of the page, only the body should be hidden, and the animation should complete and move to the next. The problem I'm facing is that when the fact and figure section comes to the viewport even 10% , the body is hidden, and also scrolling up and down is not proper. 2. I need animation from bottom to top as I attached the video for refers Thanks in advance. sr (1).mov

hey guys, im trying to recreate this text moving effect from https://clingr.me/ (on third section), there is also a fixed background image scaling effect , i thing im almost done, but its is not smooth at all everything happens so quick, i tried to increasing the end value but not working? https://codepen.io/Rare4pple/pen/eYqREqr?editors=0100

Hi Team Greensock Forums, Great to be back on these forums. Always someone willing to take time out of their day to help you with something you've been banging your head against a wall about for hours haha. I've been having some issues with a fixed element using SmoothScroller and ScrollTrigger. The element itself is an Apply button that is always fixed to the bottom right of the screen. I've put it outside of the main smoothScroller content wrapper to ensure it stays fixed all of the time and is relative to the body. What I'm trying to achieve is the following: Apply button fixed and outside of the main scrollSmoother When the user is, let's say, 150px from the bottom of the scrollable viewport, I want to get it to change to absolute positioning and then it locks to that position and is no longer fixed When the user scrolls back up, it changes back to position fixed and continues to stay fixed as the user scrolls up. Please find a link to a little CodePen I created for anyone who wants to have a crack (https://codepen.io/dayneh88/pen/jOgBmXj) Any help would be greatly appreciated. Thanks again, Dayne

Hi, I'm new to GSAP and having trouble with a specific animation, I made a quick simplified (and ugly) pen to demonstrate the problem. I have two DIV's with separate animation that change on every section, I'm sure there is a cleaner way to do it. Thank in advance.

Hiii, I am trying create a reel like web application. In which I am trying to create a reel component in which I will use Observer for listening user's swipe up and swipe down action and scrollTo to animate slide to next page. But, the issue is when user swipes, onUp/onDown is being called even after user stops swiping. Here paginated api response will come also so we have to update slides as user scrolls the reels. Here is a code for that component: import gsap from 'gsap' import { ScrollToPlugin, Observer, ScrollTrigger } from 'gsap/all' import { useGSAP } from '@gsap/react' import { type VideoSizeBoxType } from '@/lib/stores/genuin-options' import { useEffect, useRef } from 'react' gsap.registerPlugin(ScrollToPlugin, Observer, ScrollTrigger) const customColors = [ '#E74C3C', '#1ABC9C', '#8E44AD', '#3498DB', '#F1C40F', '#2ECC71', '#D35400', '#9B59B6', '#27AE60', '#34495E', ] export function CustomSwiper({ sizeBox }: { sizeBox: VideoSizeBoxType }) { const scopeRef = useRef<HTMLDivElement | null>(null) useGSAP( () => { let isAnimating = false let currentIndex = 0 const obs = Observer.create({ debounce: true, type: 'wheel,touch,pointer,scroll', wheelSpeed: 0, target: '#swiper-test', lockAxis: true, tolerance: 0, preventDefault: true, onDown: (self) => { console.log('self::', isAnimating) if (!isAnimating) { swipeNext(currentIndex + 1) } }, onUp: () => { if (!isAnimating) { swipePrev(currentIndex - 1) } }, }) function swipeNext(newIndex: number) { isAnimating = true gsap.to('#swiper-test', { duration: 0.5, ease: 'power3.inOut', scrollTo: { y: `+=${document.getElementById('swiper-test')!.clientHeight}px` }, onComplete: () => { isAnimating = false currentIndex = newIndex }, }) } function swipePrev(newIndex: number) { isAnimating = true gsap.to('#swiper-test', { duration: 1, scrollTo: { y: `-=${document.getElementById('swiper-test')!.clientHeight}px` }, onComplete: () => { isAnimating = false currentIndex = newIndex }, }) } }, { scope: scopeRef } ) return ( <div ref={scopeRef}> <div id="swiper-test" className="overflow-hidden" style={{ ...sizeBox }}> {customColors.map((item, index) => { return ( <div key={index} className="flex h-full w-full" style={{ backgroundColor: item }}> {index} </div> ) })} </div> </div> ) }

how to create this pinning effect the same as this website https://www.airvoir.com/

i have pin section where underneath of this section slide one by one visible on scroll , issue is when i true pinspacing lots of extra space occur and when i false pinspacing black div section overlap when i scroll on last slide , please help me with this. thanks https://codepen.io/adllikqv-the-typescripter/pen/XWvKjEK

When I scroll the page on Safari iOS I can see a jitter on the page. Not in the animation but the overall page -- the text, etc. I understand that Safari handles scroll differently, but I'm not sure if there's something else I can do to stop it. When I comment out the JavaScript and scroll the page the jitter goes away.

I work on ADHS-Gutachten.de I use scroll triggers to control the ThreeJS scene and the divs and their contents. Everything works very well at first. But: If I use the scroll bar and quickly scroll from top to bottom, various elements stop. I suspect that since the animations are not finished but the user scrolls past the trigger, the information to continue the animation is missing. I use the following code that repeats itself for all elements: With different classes, of course. const tlBackA2 = gsap.timeline({ scrollTrigger: { trigger: ".B", start: "100% 50%", end: "100% 50%", toggleActions: "restart none reverse none", } }); tlBackA2.fromTo(".A2", { y: "0vh" }, { y: "-75vh", duration: 0.5, ease: "power4.inout" } ).delay(0.4); const tlBackA2o = gsap.timeline({ scrollTrigger: { trigger: ".C", start: "100% 50%", end: "100% 50%", toggleActions: "restart none reverse none", } }); tlBackA2o.fromTo(".A2", { y: "-75vh" }, { y: "-150vh", duration: 0.5, ease: "power4.inout" } ).delay(0.4); I need information on how to set the positions of the classes at the beginning or end of each timeline, even if the animation of the timeline and the associated trigger have not yet been completed. The trigger has already run through. Maybe I think too complicated and it is a total beginner problem Can anyone give me a reference to a tutorial or tell me what I have forgotten in this code and what I need to pay attention to? Thanks for your time and help Thom

Hello, I'm encountering an issue with my GSAP/ScrollTrigger animation on Webflow. The glitch seems to be related to DOM changes, likely due to external resources loading after ScrollTrigger has already initialized. I assume ST then wrongly calculates the triggers (start and end) causing the glitch. I've tried using scrollRefresh() and wrapping the entire script in an eventListener for DOMContentLoaded, but the issue persists. 1. Video with the issue: https://youtu.be/_M-Q6dcT9S0 - Funnily the animation works correctly the first time, but on subsequent attempts, a glitch appears. 2. Triggers shift video: https://youtube.com/shorts/fCR3IKiSsQI - With markers turned on, I can see the trigger points shifting while the site is still loading probably causing the glitch 3. Temporary Workaround: As a temporary fix, I set the section meant to be animated to display: hidden until the DOM is fully loaded and then script changes it to the "block". This resolves the glitch, but I believe there should be a better solution how to handles this without a need to hide the entire section. Live URL: Link to one of the talent pages (The issue can be replicated on other talent pages as well). Current Code Snippet: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); // Wait for the entire window, including images, to be fully loaded window.onload = function () { // Temporary workaround: Make the projectpage-image visible by setting display to block //document.querySelectorAll('.projecttalent').forEach(function(element) { //element.style.display = 'block'; //}); // Create your ScrollTriggers and animations here gsap.from(".projectpage-image", { scale: 0, duration: 3, ease: "power2", scrollTrigger: { trigger: ".talent-work", scrub: 2, start: "bottom +=400", invalidateOnRefresh: true, onEnter: () => { // Attach the scroll event listener when the ScrollTrigger enters the viewport window.addEventListener('scroll', redirectHome); }, // markers: true, }, }); // Call ScrollTrigger.refresh() at the end ScrollTrigger.refresh(); }; let redirectTimeout; const redirectHome = () => { if (window.scrollY + window.innerHeight >= document.body.offsetHeight) { clearTimeout(redirectTimeout); redirectTimeout = setTimeout(() => { window.location.href = '/'; }, 800); } } </script> Webflow Build URL (FF-TALENTs TEMPLATE within CMS collections, code shown above inserted within this page) I would greatly appreciate any advice or solutions, as this is my first experience working with GSAP. Thank you in advance!

Hey there, I have been trying to make something like this codepen, I have managed to do the wipe effects but I wanted it to have that smooth scrolling effect. Issues: changing the srub from true to a certain value e.g (1.2) ruins the effect. also, pinning seems to be not working. I am kinda new to gsap, want some expert eyes to critic the code and maybe help me achieve the effect and optimize the code a bit. thanks.