Search the Community

It doesn't work with a regular anchor, and if you use scrollTo, it doesn't scroll all the way to the end. Is there a way to make the scroll perfect to the desired element? Or at least within a couple dozen pixels?

I’m using the new Timeline feature in Webflow to create a GSAP animation on a specific element. The animation is set to trigger on scroll into view. This element is reused as a component inside a multi-tab WF component. When switching tabs, I’d like the animation to reset and play again once the element is visible. What’s the best way to restart or re-initialize the GSAP timeline on tab switch? The layout is something like this: WF settings as follows: Thanks in advance!

I want the overlay timeline to start animating from the text2 label. That is, when the text-2 animation starts, the overlay timeline will start running. gsap.registerPlugin(ScrollTrigger) const tl = gsap.timeline({ scrollTrigger: { trigger: '.section', markers: true, pin: true, // pin the trigger element while active start: 'top top', // when the top of the trigger hits the top of the viewport end: 'bottom top', // end after scrolling 500px beyond the start scrub: true } }) tl.to('.text-1', { x: -400 }); tl.to('.text-2', { opacity: 1 }, "<"); tl.to('.text-2', { opacity: 0 }, "text2"); tl.to('.text-3', { opacity: 1 }, "<"); tl.to('.text-3', { opacity: 0 }); tl.to('.text-4', { opacity: 1 }, "<"); const tl2 = gsap.timeline({ scrollTrigger: { trigger: '.section', start: 'top top', // when the top of the trigger hits the top of the viewport end: 'bottom top', // end after scrolling 500px beyond the start scrub: true } }) tl2.to('.overlay', { opacity: 0.2 }) gsap.timeline() .add(tl) .add(tl2)

Just finished building an interactive sneaker timeline featuring sequential animations, parallax effects, and smooth scroll navigation! Here's how I implemented key GSAP features: ScrollTrigger for Timeline Progression ScrollTrigger.create({ trigger: '.timeline-container', start: "top center", end: "bottom bottom", onUpdate: (self) => { const progress = self.progress; timelineLine.style.height = `${progress * 100}%`; } }); Sequential Content Reveals gsap.to(shoeDate, { opacity: 1, y: 0, duration: 0.6, ease: "power2.out", onComplete: () => { // Chain next animation gsap.to(shoeName, { x: 0, opacity: 1, duration: 1, ease: "power2.out" }); } }); ScrollToPlugin Navigation document.addEventListener('keydown', (e) => { if (e.code === 'Space') { gsap.to(window, { duration: 1.2, scrollTo: { y: targetShoe, offsetY: 100 }, ease: "power2.inOut" }); } }); Smooth Parallax Effects gsap.to(".parallax-bg", { scrollTrigger: { scrub: true }, y: 100, scale: 1.1, ease: "none" }); Interactive Letter Animations letters.forEach((letter, index) => { tl.to(letter, { color: '#e10600', duration: 0.3, ease: "power2.inOut" }, index * 0.15); }); Other Features: Spacebar navigation between shoes SoundCloud audio integration Fully responsive design Dynamic image loading with loading state

Hello, I am learning to use gsap and struggle to resolve this issue. I create these for testing: - a wrapper with original height on load is 1440px, that will change height to 0 when scrolling from .cover to .about - a scale-box which will scale from 100vh to 0 base on wrapper height / 1440 - an item of 100px * 100px on bottom of scale-box If I refresh the page on mid-scrolling between .cover and .about, or resize the browser window, the height which is controlled by gsap timeline is bugged and change and when I scroll up to top it won't return to original size (1440px) Somehow [Sign Up and Log In to CodePen is unavailable] so I post the code in here. <header> <nav class="navbar"> <div class="hero-name-wrapper"> <div class="hero-name-scale-box"> <div class="hero-name"></div> </div> </div> </nav> </header> <main id="smooth-content"> <div class="header-background"></div> <!-- Cover Section --> <section class="section cover"> <div class="cover-content"> </div> </section> <!-- About Section --> <section class="section about"> <div class="about-content"> </div> </section> </main> /* ================= INITIALIZE ================= */ :root { /* ----- COLORS -----*/ --debug-red: #f005; --debug-yellow: #ff05; --debug-green: #0f05; --debug-cyan: #0ff5; --debug-blue: #00f5; --debug-magenta: #f0f5; } *, *:before, *:after { padding: 0; margin: 0; box-sizing: border-box; list-style: none none; text-decoration: none; } html { box-sizing: inherit; scroll-behavior: smooth; height: -webkit-fill-available; } body { font-family: "Roboto", sans-serif; font-size: 26px; font-weight: 300; height: -webkit-fill-available; background-color: var(--background); color: var(--primary); } h1{ font-weight: 800; text-transform: uppercase; font-size: clamp(92px, 10vw, 300px); font-weight: bold; margin: 0; } /* =================== HEADER =================== */ header { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: auto; margin: 0 auto; transition: all 0.35s ease; /*background-color: var(--debug-blue);*/ } .navbar { width: 100%; transition: all 0.4s ease-in-out; position: relative; } /* ==================== NAME ==================== */ .hero-name-wrapper{ position: fixed; background-color: var(--debug-green); width: 2560px; height: 1440px; border-radius: 100px; z-index: 100; pointer-events: none; } .hero-name-scale-box{ background-color: var(--debug-red); min-height: 100px; width: 100vw; display: flex; justify-content: center; align-items: flex-end; border-radius: 200px; } .hero-name{ background-color: yellow; width: 200px; height: calc(285 * (100vh/1440) ); min-height: 64px; margin: 0 auto; filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.15)); transform: rotate(0deg); } /* ==================== COVER =================== */ .cover{ position: relative; display: flex; justify-content: center; /* Horizontally */ align-items: flex-start; /* Vertically */ overflow: hidden; z-index: 1; } .cover-content{ position: relative; width: 100vw; height: 100vh; } /* ==================== ABOUT =================== */ .about { position: relative; } .expander{ height: 100vh; background-color: #1b6d85; } let vh = window.innerHeight; window.addEventListener("resize", () => { vh = window.innerHeight; }); window.addEventListener('DOMContentLoaded', () => { // ======================================== // // ============== INITIALIZE ============== // // Register ScrollTrigger plugin from GSAP gsap.registerPlugin(ScrollTrigger); const header = document.querySelector("header"); const heroWrapper = document.querySelector(".hero-name-wrapper"); const heroBox = document.querySelector(".hero-name-scale-box"); const heroName = document.querySelector(".hero-name"); let resizeObserverInitialized = false; function resizeHeroBox() { if (!heroBox || !heroBox.parentElement) return; const parent = heroBox.parentElement; const parentHeight = parent.offsetHeight; const vh = window.innerHeight; const boxHeight = parentHeight * (vh / 1440); heroBox.style.height = `${boxHeight}px`; // Initialize observer only once if (!resizeObserverInitialized) { // Observe parent height changes const observer = new ResizeObserver(() => resizeHeroBox()); observer.observe(parent); // Update on viewport resize window.addEventListener('resize', resizeHeroBox); resizeObserverInitialized = true; } } function setupHeroNameAnimations() { if (!heroWrapper) return; let tl = gsap.timeline({ scrollTrigger: { trigger: ".cover", start: `top top`, endTrigger: ".about", end: `top top`, pin: "none", pinSpacing: false, markers: false, scrub: true, invalidateOnRefresh: true, } }) tl .to(heroWrapper, {height: 0, ease: "none"}, 0) .to(heroName, {height: 84, ease: "none"}, 0); } // function calling resizeHeroBox(); setupHeroNameAnimations(); ScrollTrigger.refresh(); window.addEventListener("resize", () => { // resizeTestBox(); ScrollTrigger.refresh(); }); })

Dubai Scrapbook, a  GSAP powered interactive story. This demo turns a long list of tourist highlights into a playful “scrapbook” you can scroll through. What GSAP does here: 1. Hero ScrambleText – TextPlugin fakes a hacker-style scramble before landing on each lyric line. 2. Intro pop – the main title animates in with a simple fromTo on scale/rotation using back.out ease. 3. Scroll-driven page reveals – Every .photo-page card slides, rotates and scales into place via ScrollTrigger. 3. Stickers, washi-tape strips and photo frames each get their own staggered timelines inside the same trigger. 4. Per-word fade for descriptions – A helper splits the paragraph into <span> words and lets a small timeline (stagger: 0.08) fade them in as you reach the card. 5. Confetti explosion on button click – GSAP throws emoji with random x, y, rotation and opacity fades. 6. Micro-interactions – mouseenter / mouseleave handlers give buttons and photo frames a quick scale-tilt effect (power2.out). 7. Parallax extras – Floating emojis in the background scrub vertically with the page (scrub: 1) for extra depth. It’s basically a cookbook of little GSAP tricks. Feel free to copy-and-paste the parts you need. Enjoy!

Hi, I’ve set up a GSAP animation flow that works like this: On pointerenter, Animation A plays once. When A completes, Animation B starts with repeat: -1. On pointerleave, I: Set repeat(0) on Animation B, so it finishes its current loop once. After B ends, I call reverse() on Animation A. This mostly works — but the timing isn’t consistent. If the user hovers quickly in and out, or leaves after a while, sometimes: B cuts off early A reverses too soon Or the transitions feel jumpy How can I make sure that: B finishes its last loop smoothly after setting repeat(0), and only after that, A reliably reverses? Any best practices for syncing these kinds of chained animations? Thanks in advance!

Hi GSAP fam, I'm finalizing a project with an animation in the masthead that has some text slide in, then animate in with stagger. Everything is working great on the major browsers on desktop and even on an old android phone I have laying around. BUT, on iPhone, both with chrome and safari, i'm getting this strange jump in y position when the text is about to move. Would anyone have suggestions on how to fix this? thanks in advance Link to the webflow: https://preview.webflow.com/preview/metierlabs?utm_medium=preview_link&utm_source=designer&utm_content=metierlabs&preview=356b33229e283954363ce60817727eb0&locale=en&workflow=preview Link to a code pen that has the GSAP code: https://codepen.io/Grant-Boufford/pen/LEVPrjK ScreenRecording_05-23-2025 14-09-12_1 (1).mp4

Hi everyone, I’m encountering an issue with GSAP’s ScrollTrigger where a section jumps when unpinning, and I’m looking for some guidance or a solution. Problem: I have a section that is pinned using ScrollTrigger while scrolling, but when the pinning ends (unpins), the section seems to "jump" or shift unexpectedly. The behavior happens when the scroll reaches the end point defined in the ScrollTrigger. I am also using scrub for smooth scrolling, and pinSpacing: false to prevent extra space for the pinned element. May refer to the section via https://cantal.bluecube.com.sg/sectors/ Here attached the CSS that I used: .scrolling-cards { overflow: hidden !important; position: relative !important; } .scrolling-cards-header-wrapper { height: 100vh !important; left: 0; position: relative !important; top: 0; width: 100% !important; } .scrolling-cards-header { height: 100vh; left: 0; position: absolute; top: 0; width: 100%; } .scrolling-cards-image { height: 100vh !important; left: 0; position: absolute !important; top: 0; width: 100% !important; } .scrolling-cards-image:after { background: #000; content: ""; height: 100%; left: 0; opacity: .3; position: absolute; top: 0; width: 100%; } .scrolling-cards-image img { height: 100vh !important; object-fit: cover !important; } .scrolling-cards-title { position: fixed !important; top: 0; left: 0; width: 50% !important; height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 50px !important; z-index: 10 !important; } .scrolling-cards-item { height: 100vh !important; position: relative !important; width: 100% !important; } .scrolling-cards-card { background-color: #FFF; padding: 50px !important; position: absolute !important; right: 50% !important;; top: 50% !important; transform: translateX(50%); width: 580px !important; z-index: 2 !important; } .scrolling-cards-card p:last-child { margin-bottom: 0; } @media screen and (min-width: 1024px) { .scrolling-cards-title { justify-content: center !important; padding: 0 0 0 calc((100vw - 1180px) / 2 + 20px) !important; width: 48vw !important; } .scrolling-cards-card { max-width: calc(50% - 20px); right: calc((100vw - 1180px) / 2 - 20px) !important; /* top: 250px !important; */ transform: translateY(-50%); } } @media screen and (max-width: 1024px) { .scrolling-cards-title { width: 100% !important; justify-content: unset !important; padding-left: 23px !important; padding-right: 23px !important; } .scrolling-cards-card { left: 50% !important; right: auto !important; transform: translate(-50%, -50%) !important; width: calc(100vw - 46px) !important; padding: 30px 25px !important; } } And here is the gsap script that I used: document.addEventListener("DOMContentLoaded", function () { gsap.registerPlugin(ScrollTrigger); const cards = gsap.utils.toArray(".scrolling-cards-item"); const images = gsap.utils.toArray(".scrolling-cards-image"); if (cards.length > 1 && !document.body.classList.contains("wp-admin")) { const tl = gsap.timeline({ scrollTrigger: { trigger: ".scrolling-cards", pin: ".scrolling-cards-header", start: "top top", end: "bottom bottom", scrub: 1, anticipatePin: 1, pinSpacing: false, markers: true } }); cards.forEach((cardWrapper, i) => { const card = cardWrapper.querySelector(".scrolling-cards-card"); const image = images[i]; const prevCard = i > 0 ? cards[i - 1].querySelector(".scrolling-cards-card") : null; const baseTime = i * 1.5 ; // Fade in background image (if not the first) if (i!==0) { tl.from(image, { autoAlpha: 0, duration: 1 }, baseTime); } // Fade in card // if (i !== 0) { tl.from(card, { autoAlpha: 0, y: 60, duration: 0.5 }, baseTime + 0.5); // } // Fade out previous card (if not the first) if (i > 0 && prevCard) { tl.to(prevCard, { autoAlpha: 0, y: -60, duration: 0.5 }, baseTime); } }); } }); The Issue: When the scroll reaches the end of the ScrollTrigger, the section "jumps" or shifts suddenly as the pin is released. I suspect this might be related to the CSS positioning (position: fixed on .scrolling-cards-title) and overflow: hidden on the parent .scrolling-cards. What I’ve Tried: I’ve tried adjusting the pinSpacing setting (true and false), but the jump still happens. Removing the overflow: hidden style from .scrolling-cards does not resolve the issue either. The jump seems to occur at the end of the ScrollTrigger, right before the element unpins.

Hi GreenSock team 👋 I'm working with Next.js 15 and trying to orchestrate animations across multiple components using a shared masterTimelinethrough context. Each component defines its own gsap.timeline() and then adds it to the global timeline via masterTimeline.add(). For example: I have two components: Boxand Nav. - Box has its tl with 4 tweens and inserts a label after the second tween (addLabel('afterSecondTween')). - Nav defines its own timeline and tries to insert it at that label inside the master timeline using masterTimeline.add(navTL, 'afterSecondTween'). 🎯 My goal is to synchronize timelines between different components, so that they run in sequence or in specific positions. 💣 The result: Nav always animates at the start of the timeline. ✅ I’ve confirmed that: - The Nav timeline is added with the same label name. - But it still plays immediately (as if the label had time = 0). 💬 My question is: Is it correct to insert timelines at labels from other components in GSAP + React? Is this synchronization possible? What is the correct or recommended way to synchronize animations between different components in GSAP and React? Is this pattern okay: 1. Each component creates its own timeline 2. One of them defines a label at a specific point 3. Another component inserts its timeline at that label Or... is there a better / more robust way to orchestrate animations across components in React using GSAP? Thanks in advance for your insights 🙏 Here’s a minimal CodePen that replicates the problem: 📎 CodePen

I'm working on an assignment for school. When the page loads in, it'll reveal the "hero image" (main screen) bit by bit automatically without requiring user assistance. Now I'm trying to integrate my dotLottie animation into the timeline but I'm having a really hard time doing so. I've scanned this forum for any possible answer, asked generative AI bots as well as classmates but nobody's solution seems to work. Here's my current "animations.js" file. I'm building a Vite site and have GSAP & dotLottie-web imported through NPM. import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { DotLottie } from '@lottiefiles/dotlottie-web'; gsap.registerPlugin(ScrollTrigger); const heroImgLottie = new DotLottie({ autoplay: false, loop: false, canvas: document.querySelector('#heroIMG'), src: "src/assets/lottie/heroimg.lottie" }); let hero_tl = gsap.timeline({ onComplete: heroImgLottie.play(), }); // Loader hero_tl.to('.loader_content', { duration: 0.25, delay: 3.5, opacity: 0, }) hero_tl.to('.loader_bar', { duration: 1.5, height: 0, stagger: { amount: 0.5, }, ease: "power4.inOut", }) hero_tl.to('.loader', { duration: 0, display:"none"}) hero_tl.from('.hero_title', { duration: .5, y: 100, opacity: 0, ease: "power4.out", }) hero_tl.to('.nav_options', { duration: .5, opacity: 1, ease: "power4.inOut", })

After reading react-advanced for several times, having chatgpt, deepseek and claude helping me to debug and trying my best I decide to create minimal demo to ask for help. I also did search forums but I didn't find clear solution for my problem that is not some kind of overengineering that I dont even understand. I created parent component (App.jsx) which creates the timeline. I created two child components, Heading.jsx and Loader.jsx and I pass them timeline with prop drilling (like gsap react-advanced article suggest). In each child, with useGSAP hook and timeline.add I add proper animations to timeline. I want Loader.jsx animation to run first and only then Heading.jsx. How do I do it? Obviously if I swap component order in DOM (in app.jsx) I can make Loader.jsx run first, but this will get messy in real project where I have more components and animations to add in timeline, and I also dont want to change my DOM order. I tried with labels but it didnt help me at all. I obviously dont want to use fixed seconds to decide what will run when, because real timeline is much more complex than these two components. I just want a way to control order of these animations, and let timeline handle when animation is finished and when next one will run. How do I control sequence of animations inside timeline that is created in parent component, and where child component add animations to parent timeline? Demo: https://stackblitz.com/edit/gsap-react-basic-f48716-kbuaghjm?file=src%2FApp.js,src%2Fcomponents%2FLoader%2FLoader.jsx,src%2Fcomponents%2FHeading%2FHeading.jsx Thank you

Hi there!! 👋🏻 I am using GSAP for the first time and I am loving it!! But I would do with some help on a slider like animation I am creating for a client. This is done in Webflow using Saddle Framework. I will share Read Only link at the bottom of the message, but first some context. The client wants a slider with 2 sets of cards that animates on scroll. We use a switch to go from one slider to the other and here is where I am having a problem... When I click on the switch a new timeline gets set creating a timeline hell situation that scales the more you switch between the 2 sliders... I've tried to kill the tweens with ".killTweenOf()", to use the timeline object and kill it to reset it, and nothing seams to work... Here is my JavaScript: // wait for DOM and scripts to load window.addEventListener('load', ()=> { // GSAP Services Slider Switch Animation const section = document.querySelector('[bs-servicesSlider-element="section"]') const switchButton = section.querySelector('[bs-switchButton-element="switch"]') const toggle = switchButton.querySelector('[bs-switchButton-element="toggle"]') const leftText = switchButton.querySelector('[bs-switchButton-element="leftText"]') const rightText = switchButton.querySelector('[bs-switchButton-element="rightText"]') const retailerTrack = document.querySelector('[bs-servicesSlider-element="retailerTrack"]') const brandTrack = document.querySelector('[bs-servicesSlider-element="brandTrack"]') const items = [...document.querySelector('[bs-servicesSlider-element="list"]').children] const retailerItems = items.filter(item => item.children[1].innerHTML === 'Retailer') retailerItems[retailerItems.length - 1].style.borderRight = "none" retailerTrack.append(...retailerItems) const brandItems = items.filter(item => item.children[1].innerHTML === 'Brand') brandItems[brandItems.length - 1].style.borderRight = "none" brandTrack.append(...brandItems) const retailerProgressBar = section.querySelector('[bs-servicesSlider-element="retailerProgressBar"]') const brandProgressBar = section.querySelector('[bs-servicesSlider-element="brandProgressBar"]') let click = 0 // GSAP Service Slider Scroll Animation const commons = { duration: .4, ease: "circ.inOut" } const scrollTriggerCommons = { start: 'top 25%', end: '200% 25%', scrub: true, markers: true, toggleActions: 'play pause reverse pause' } const retailerStrollTrigger = { trigger: retailerTrack, ...scrollTriggerCommons } const brandScrollTrigger = { trigger: brandTrack, ...scrollTriggerCommons } const setSliderAnimation = () => { const track = click === 0 ? retailerTrack : brandTrack const progressBar = click === 0 ? retailerProgressBar : brandProgressBar const scrollTrigger = click === 0 ? retailerStrollTrigger : brandScrollTrigger const trackPosition = window.innerWidth - track.offsetWidth gsap.to(track, { x: trackPosition, ease: commons.ease, scrollTrigger: scrollTrigger }) trackPosition === 0 ? progressBar.parentElement.classList.add('u-hide') : progressBar.parentElement.classList.remove('u-hide') gsap.to(progressBar, { width: progressBar.parentElement.offsetWidth, ease: commons.ease, scrollTrigger: scrollTrigger }) } // GSAP Toggle Animation const toggleAnimation = () => { gsap.to(toggle, { xPercent: click === 0 ? 0 : 100, }) setTimeout(() => { if(click === 0) { rightText.classList.add('u-hide') leftText.classList.remove('u-hide') } if(click === 1) { leftText.classList.add('u-hide') rightText.classList.remove('u-hide') } }, 200) } // GSAP Theme Animation const theme = { lightGrey: '#f0f0f0', darkGrey: '#232323', yellow: '#e8f83d' } const themeAnimation = () => { gsap.to(section, { backgroundColor: click === 0 ? theme.yellow : theme.darkGrey, color: click === 0 ? theme.darkGrey : theme.lightGrey, ...commons }) gsap.to(section.querySelector('.subheading_line'), { backgroundColor: click === 0 ? theme.darkGrey : theme.lightGrey, ...commons }) gsap.to(switchButton, { backgroundColor: click === 0 ? theme.darkGrey : theme.yellow, color: click === 0 ? theme.lightGrey : theme.darkGrey, ...commons }) gsap.to(toggle, { backgroundColor: click === 0 ? theme.lightGrey : theme.darkGrey, color: click === 0 ? theme.darkGrey : theme.lightGrey, ...commons }) gsap.to([...retailerTrack.children, ...brandTrack.children], { borderColor: click === 0 ? theme.darkGrey : theme.lightGrey, ...commons }) } // GSAP Switch Click Animations const changeTrack = () => { gsap.to(click === 0 ? brandTrack : retailerTrack, { opacity: 0, ...commons }) if(click === 0) { brandTrack.classList.add('u-hide') retailerTrack.classList.remove('u-hide') retailerProgressBar.classList.remove('u-hide') brandProgressBar.classList.add('u-hide') } else { retailerTrack.classList.add('u-hide') brandTrack.classList.remove('u-hide') retailerProgressBar.classList.add('u-hide') brandProgressBar.classList.remove('u-hide') } gsap.to(click === 0 ? retailerTrack : brandTrack, { opacity: 1, ...commons }) } switchButton.onclick = (event) => { event.preventDefault() click = click === 0 ? 1 : 0 toggleAnimation() themeAnimation() changeTrack() gsap.to(window, { ...commons, scrollTo: { y: "#service-slider_outer", offsetY: 80, autoKill: true }, }) gsap.killTweensOf([retailerTrack, brandTrack], "x") setSliderAnimation() } // Resizing function const displayedCards = { desktop: 3, tablet: 2, mobile: 1 } const resizeTrack = (screenWidth, track) => { let cardsDisplayed = displayedCards.desktop if(screenWidth <= 991) { cardsDisplayed = displayedCards.tablet } if(screenWidth <= 568) { cardsDisplayed = displayedCards.mobile } track.style.width = `${(screenWidth / cardsDisplayed) * track.children.length}px` } // Init Animation resizeTrack(window.innerWidth, retailerTrack) resizeTrack(window.innerWidth, brandTrack) changeTrack() themeAnimation() setSliderAnimation() window.onresize = () => { resizeTrack(window.innerWidth, retailerTrack) resizeTrack(window.innerWidth, brandTrack) themeAnimation() changeTrack() setSliderAnimation() } }) You can find the elements in the Webflow project under "services-slider_outer", and the first section inside the inner wrapper has the JS object with the current code. Please, I need help as this is a key element of the project and I cannot create this animation with Webflow's animations since I need to dynamically change the width of the scroll animation. Thanks in advance!!! Link: https://preview.webflow.com/preview/buzket-space-v2?utm_medium=preview_link&utm_source=designer&utm_content=buzket-space-v2&preview=ff7a7c3ed6298bc1e243bd83225520d8&workflow=preview

Hi guys hope you are doing good. Iam facing issue while working with my project iam trying to add dynamic section to existing one which already have scroll trigger and animation executed new section too have animation. when i add this new section its break animation of below section and add blank spacing as well in my production project it stop the below animation too. i have some sort of builder customizer so that when i changed content too it first removed the section and then append it the same position. e.g.. if section is placed over 3rd position then after content change it again added on same position when its added it give blank space for below section which have scroll trigger initialized as well stop the animation performed on it. I can't kill all trigger and the reinitialize all section again as it will compromise the performance by removing and adding animation for all section again and again. Please note - animation only break section below the newly added section. Tried with refresh each scrolltrigger again but its not worked. using forcefully refresh [ScrollTrigger.refresh(true);] Thanks in advance for any help or suggestion

Hello everyone, I have the problem you can see on the video. When i pause the game the snake segments are correctly positioned, but when its running and a movement is made the segments are washing and not synced correctly. If i remove the duration the snake movement starts to be laggy and it is not smooth. At codepen i uploaded render.js as a HTML, main.js where we use ticker to init the game start as CSS and snake.js as JS where we care about the snake animations. Untitled22.mov

I have attached a simple recreation of the bug that I'm facing, there is a much more complicated timeline so cannot shift to CSS only animation. As you can see in the demo, rotation works perfectly fine with gsap, but css transforms it, without considering the transform, is there any way I can "apply" the gsap transforms as CSS at the end of the timeline and just remove all the previous gsap effects? Anyways, would separate infinite gsap timeline be less efficient than an infinite CSS animation? cuz that would be a lot simpler to apply.

Hey all! This feels like it should be simple enough to do and yet I can't figure it out or find an answer in the forums. When you scroll down, the bars scale up until they reach their full height at the end of the 'body'. What I want to simply do is have them 'stagger' on scrub, or if you will, each bar, starting from the left one, begins to scale up only when the previous bar has finished. I can imagine doing this with a scrubbed timeline, but is there an easier way?

I don't have a working example, as I just NPMd 3.0 and grabbed the 149/year club a couple hours ago. I'm used to framer / motion.react. I'm looking for... A rubber duck. Attached is a simple Google searched SVG pitch fork. The best way I can describe my drawing is: flip this 180 and attach another fork on each end. Ok, so. I'm a developer, and i would rather start off the right way vs trial and error. Abstraction is my thing. I wish there was a visual editor, but I can f5 my way to success in NextJS. For the project: think 100 lines, 8k pixels height easy. I'm only using lines, and here are my immediate questions-- Where should I break the lines on the fork? (Handle, edge, 4 prongs? 1 center line and start the prongs when they hit?). Do you need to mask? How would I start the animations of each prong at the same time when the handle is finished? How do I get a consistent draw speed/flow in varying length lines? I'm not drawing a maze, but that's another way to think about it. I'm interested in the approach more than a codepen, but I wouldn't say no to one. Like.. fromTo vs to and all this new stuff.

Hi everyone, I'm facing an issue occasionally, and it's a bit challenging to reproduce reliably in a CodePen due to the complexity of my setup. The issue occurs with dynamic content. Sometimes a part of a GSAP timeline is skipped. Specifically, I notice that the fromTo animations are occasionally stuck in the "to" state, while the rest of the timeline continues as expected. There’s no warning in the console from GSAP, and there are no errors about missing elements. The strange thing is that this mostly happens with WordPress menu items that come in dynamically, which leads me to suspect a timing issue with when the elements are loaded. I tried logging the elements to the console before creating the timeline, and they were all present as a NodeList. Yet, the issue persists. As I mentioned, sometimes it works perfectly fine. I managed to solve this with a slight artificial delay using setTimeout, which seems to allow the timeline to work every time. Interestingly, using GSAP's delay property didn't make a difference. However, using setTimeout feels hacky and unreliable, and I'm hoping there’s a better, more elegant solution. Setup: WordPress website JavaScript: ES6 Modules (using imports/exports) Build Tool: Webpack Has anyone faced similar issues with dynamic content in timelines, especially with WordPress or other dynamically generated content? Are there any best practices in GSAP for handling timing issues with dynamic elements, especially without resorting to setTimeout hacks? I believe this is a broader topic, as I've noticed the same problem in other projects as well. Any advice or insights are greatly appreciated. Thanks in advance!

https://codepen.io/leandrobarbosafr/pen/XWvvbWY Timeline animated with GSAP, HTML, CSS and JS

Good day! I was testing some gsap features, and tried to create infinite text swapping animation. But when sometimes I need to smoothly force change text. I am getting bugs. So: I have such method: protected createAnimationTimeline(): void { this._animationTimeline?.kill(); this._animationTimeline = new TimelineMax({ repeat: -1, repeatDelay: this._animationParams.delayBetweenTextsSwap }) .to(this.placeholderText, this._animationParams.duration, { alpha: 0 }) .add(() => this.swapText(), "swapTextLabel") .to(this.placeholderText, this._animationParams.duration, { alpha: 1 }) .play(); } and protected forceSwapText(): void { this._animationTimeline.tweenTo("swapTextLabel"); } _____________________CASE_ONE____________________________ when _animationTimeline moves from this part: .to(this.placeholderText, this._animationParams.duration, { alpha: 0 }) to .add(() => this.swapText(), "swapTextLabel") ___________________________________________________________ - >>>>>>>>>> forceSwapText calls -> everything is ok -> this.swapText() will be inited. But for case ____________________CASE_TWO____________________________ when _animationTimeline moves from this part: .add(() => this.swapText(), "swapTextLabel") to .to(this.placeholderText, this._animationParams.duration, { alpha: 1 }) ___________________________________________________________ - >>>>>>>>>> forceSwapText calls -> moving animations play backwards -> this.swapText() will be not inited. QUESTION: How to make tweenTo("swapTextLabel") always use callback (regardless movement is normal or backwards) ? Thanks a lot, if someone could help me even iwth hint.

Hi, I have two GSAP timeline animations on the website https://4elements.t-k.dev/. One on the video of featured project section, and one on the panels for the white papers section. It works fine on other browser, but on Safari there is some glitch, flickering, and other issues (The issue in the video: https://drive.google.com/file/d/1b5sgH4aBfAlS6hxYrfc_pMBS9hI1hjM2/view?usp=sharing). Thank you in advance! video-animation.js stack-animation.js

Hello Guys, I was searching for a draggable marquee effect when I stumbled upon this code pen. This is exactly what I need but I want a marquee effect applied to it which runs in a seamless loop. I tried adding it from my end but it does not work. Please help me Thank You

Hi Guys, Hope you are doing good. I am facing issue while using scroll trigger when section is 100Vh or any height section as soon as timeline reach 100 percent or animation completed it start scrolling to next section so in my case if i have to show the slider when animation completed over the box element then its already scroll. If there is any way where can add 2-3 free scroll which will do nothing but stay the section there after timeline complete so any slider or other which will be shown on complete of animation is visible. Any help or suggestion will be very helpful.

Hi all! I know about fromTo, but it`s not working as i expect. I have a code let coinTimeline = gsap.timeline(); coinTimeline.to(movableCoin, { duration: 3, motionPath: { path: bezierToMove, autoRotate: true, align: movableCoin, alignOrigin: [0.5, 0.5] }, repeat: -1, ease: "power1.inOut" }); coinTimeline.fromTo(movableCoin, {opacity: 0}, { duration: 1, opacity: 1 }, 0); And the opacity changing is only in first repeat of animation. Each next time the coin starts from opacity 1. How can I fix that and start it from 0 every time?