Search the Community

Hi team In the attached code-pen link, div with class 'container' has a div with class 'wrapper' (bad name for a slider) with 6 sections (section tags). I've defined a GSAP timeline and stored it in a variable. I am referencing this timeline using useRef to use it. This timeline has a tween on sections and it animates them on the Xpercent All of this is scroll based using a Scroll-trigger with a scrub. The timeline is set to paused The things that I don't understand are 1. why is the progress of timeline always equal to 0? Is it because scrub is true? 2. How do I control timeline, like start, pause, reset, reverse, if the tweens are scroll based? 3. How do I control timeline in react? 4. What is the optimal way of updating react components that are based on a timeline's/tween's progress (eg. the progress bar) Currently, i am updating the progress bar based on the progress of scroll trigger, when I add a state variable and use it as a dependency in the useEffect and try to update it to comply with react, it doesn't work. What is the underlying issue? NOTE: I am animating the xPercent because I was further animating the scale of sections based on their position with respect to the viewport using container animations but that is too far fetched. Please help me understand

Hello, I have this timeline, I can't start the last tween from text3 instead of textone, what am I doing wrong?

The animation plays while I'm on the page for the first time, after I exit and come back - the animation stops playing I tried: timeline put in useRef gsap.context and subsequently revert Manually clear timeline using kill A simple example that also doesn’t work for me: Here is a link to a site where the text with the same problem is https://next-resume-hazel.vercel.app/ Wait for the full animation and intensity approximately, then go back by clicking on the RESUME title and the text will not animate again. (This post was completely translated using google translator, sorry if anything is not clear) import gsap from 'gsap' import { useEffect } from 'react' export function Component() { useEffect(() => { const obj = { n: 0 } // This will only work while I'm on the page for the first time // If I go to /about, or any other page, and go back, // code block below - will stop working and output the object to the console // Although if you look in _gsap the id of the animation is different from the previous one // Also, not only to but also from, timeline and other things stop working // with which you can smoothly change values gsap.to(obj, { n: 1000, duration: 1, onUpdate() { console.log(obj.n) // 0 - 1000 } }) }, []) return <></> }

Hi, when we click on the button it opens a modal. Inside this modal, it's possible to scroll down to read all the content. It has on the left a "scroll indicator" and some bullet points related to text content on the right. I'd like to anim the scroll indicator (increase the height when we scroll down) and add a class to the bullet points when the scroll indicator hits them. I have two issues right now: - about the scroll indicator, scrolltrigger creates a huuuge blank space after my content so the the scroll indicator is biased and I don't know why (is it related to the end parameter) ? - I created another function to toggle class my bullet points, it's "working" but it's not perfect because classes aren't toggle exactly when the scroll indicator meet the bullet point. Is it possible to achieve what I want with only one function/scrolltrigger ? How to fix the end section bug ? Thanks in advance.

Hi GSAP team, I often use GSAP for a long time but just "copy pasting" the codes.... And now, I really want to expert it (going to buy your license in near time!) I have a couple question, actually a lot... Hope you can bear with me 1. Is there any wrong / bad syntax on my approach? Would you "correct" or tell me what's bad/wrong in my GSAP codes. 2. How to make the .draw-line class slower to bottom when I scroll it? I mean the duration. I do research and implement it, but it didn't work (I already take it out) 3. I want to add ".active" on ".timeline-li" when .draw-line start triggering. I already did it, but the "active" class removed automatically when it's outside the trigger area 4. I also want to change the image on the left, when the second .draw-line triggered. (We can talk later once these three are resolved) I'm so sorry if my question is too da*n much, hope any of you can help me out. Thank you, so so much!

Hi there, I'm trying to make an animation with scrolltrigger. I made a timeline but all my tweens are playing at the same time, what am I missing ? I want to play the last 4 tweens ONLY when the ones before are completed, how can I do that ? Do I have to create an other timeline ? Any tips are welcome

Hi all! I was wondering what type I should give 'timeline'. Because I received this error: Binding element 'timeline' implicitly has an 'any' type. I am trying to figure out a stable solution. I provided my source code: 'use client' import { useEffect, useRef } from 'react' import Image from 'next/image' import styles from './ImageGrid.module.scss' import { scaleCenterImage, moveUpTitle, introAnimation } from './animations' const ImageGrid = ({ timeline }) => { const centerImageRef = useRef(null) const leftImagesRef = useRef([]) const rightImagesRef = useRef([]) const centerImageWrapperRef = useRef(null) const centerImageTitleRef = useRef(null) useEffect(() => { introAnimation(centerImageWrapperRef.current) timeline && timeline .add( scaleCenterImage( centerImageWrapperRef.current, centerImageRef.current ), '<' ) .add(moveUpTitle(centerImageTitleRef.current), '<') }, [timeline]) return ( <section className={styles.imageGrid}> <div className={styles.imageGrid__inner}> <div onClick={() => timeline.play()} className={styles.imageGrid__imageWrapper} ref={centerImageWrapperRef} data-wrapper-center > <div className={styles.textReveal}> <h2 className={styles.imageGrid__imageTitle} ref={centerImageTitleRef} > Re:Active </h2> </div> <Image ref={centerImageRef} sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw' priority fill data-image-center className={styles.imageGrid__image} src='/images/practice_1.jpg' alt='' /> </div> </div> </section> ) } export default ImageGrid

When using firefox the scrollable timeline on https://eattheworldbetter.com/scan/banana-adv/ doesn't work. The (in this case) banana doesn't appear to scroll with the line. See chrome to check how it supposed to work. I don't get any errors in de console. Does anyone know why this does not work?

Hello everyone, I'm currently working on a React application and have been trying to create an animation where a specific section within one of my components gets pinned, and upon completion of its animation, it should scroll down to the next component. However, I've run into an issue when applying ScrollTrigger and creating a timeline for an element within my component. The problem I'm experiencing is that the start and end markers of the viewport coincide, and the markers for my targeted element are nowhere to be seen. Additionally, the position of the screen marker has shifted, and a strange line appears, covering the entire width of my screen. I'm including the relevant code snippet from my component for reference: import React, { Fragment, useRef, useLayoutEffect } from "react"; import "./style/main.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function Main() { const app = useRef(); useLayoutEffect(() => { let ctx = gsap.context(() => { var tl1 = gsap.timeline({ scrollTrigger: { trigger: ".box2", start: "0% 50%", end: "50% 50%", scrub: "true", markers: "true", }, }); }, app); return () => ctx.revert(); }, []); return ( <> <div ref={app} className="App"> <div className="box1"> <div className="box">selector</div> </div> <div className="box2"> <div className="boxx">selector</div> </div> </div> </> ); } export default Main; Css for this component is body { background-color: var(--dark); color: var(--light); font-family: "Signika Negative", sans-serif; margin: 0; padding: 0; height: 100vh; } .box { position: absolute; width: 100px; height: 100px; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--green); font-weight: 600; color: var(--light); transition: cubic-bezier(0.165, 0.84, 0.44, 1); } .App { display: flex; align-items: center; flex-direction: column; justify-content: space-around; min-height: 100vh; } .box1{ background-color: #ffffff; height: 100vh; width: 100%; } .box2{ background-color: #5900ff; height: 100vh; width: 100%; }

"use client"; import { useEffect, useLayoutEffect, useRef } from "react"; import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import _ScrollTrigger from "gsap/ScrollTrigger"; export default function Home() { const el = useRef(); const tl = useRef(); const main = useRef(); useLayoutEffect(() => { gsap.registerPlugin(_ScrollTrigger); const ctx = gsap.context(() => { tl.current = gsap .timeline({ scrollTrigger: { trigger: ".main", start: "top top", scrub: true, pin: true, end: "100%", }, }) .to(".box", { rotate: 360, }) .to(".circle", { translateX: 1000, }); }, el); return () => ctx.revert(); }, []); return ( <div className="app" ref={el}> <div className="main h-screen flex justify-center items-center"> <div className="box w-5 h-5 bg-blue-500"></div> <div className="circle w-5 h-5 rounded-full bg-red-500"></div> </div> <div className="border-2 border-pink-500 h-60"></div> <div className="border-2 border-red-500 h-60 bello"></div> </div> ); } This is my Next.js code snippet. Here I want the second animation to happen after the first animation. In the second animation the circle should translateX to value of 1000 in the duration of 15s. During this time the person should not be able to scroll as what happens during the rotation of the box. i.e the backtground should be fixed. Now when the 15s is over then it should scroll like normal page. Note that the translate property doesnot depend on scrub and is an individual animation.

Hello! I have fairly simple animations in a timeline with scroll trigger: gsap .timeline({ scrollTrigger: { trigger: document.getElementById("scene-1"), scrub: 0.5, start: "top top", end: "bottom bottom" } }) .addLabel("Scene 1") .to(".scene-1-1", { opacity: 0, y: -80, duration: 1 }, "+=2") .to(".bg-1-1", { opacity: 0, duration: 1 }, "-=1") .to(".scene-1-2", { opacity: 1, y: -40, duration: 1 }) .to(".scene-1-2", { opacity: 0, y: -80, duration: 1 }, "+=2") .to(".bg-1-2", { opacity: 0, duration: 1 }, "<") .to(".scene-1-3", { opacity: 1, y: -40, duration: 1 }) .to(".scene-1-3", { opacity: 0, y: -80, duration: 1 }, "+=2") Text blocks fade in and out, and backgrounds fade out to reveal the next background. Everything works fine when I'm scrolling down the page, but sometimes when I'm scrolling back up (going through the timeline in reverse) the text elements don't always return all the way to opacity 0. (I have the opacity defaulted to 0 in styles). Here's a demo version: https://codesandbox.io/s/interesting-volhard-yc6frk?file=/src/animations.js Hoping there's something just I missed for scroll trigger settings?

I am using GSAP to create multiple complex animations. Parts of such animations are detached from the main timeline - at certain points new timelines are created using a callback function. The callback function is required, because nested timelines are created dynamically and can be repeated infinitely. The problem is that nested timelines start running a few milliseconds later (I assume that the reason is that a created timeline is processed at the next tick). This few milliseconds can result in rendering nested timeline with a single frame delay. The fix I found is to nest timeline like this (in codepen demo I did not include the suppressEventsparameter so that nested timeline can print output): .add(() => createNestedTimeline().progress(1, true).progress(0, true)) It doesn't look pretty though. Is there a way to do this properly?

Hi! i'm new to gsap and i'm wondering how .paused() and .resume() are works I have a case, when i need to hide (pause) specific tweens while timeline in playing state but unhide (unpause) it when timeline is about to pause. The problem is when I unpause tweens this instantly applies and changes the current state, even if the tween with duration: 1 added to timeline.time(5), while we paused timeline in timeline.time(9) I'm tried some tricks with .timeScale(0) and .timeScale(1) and combining other tween methods but nothing works correct :( Is there any way to unpause tween without affecting the current state? The pen To reproduce it just click start button and then after 2-3 seconds click pause button Problem: red box moves after it. Solution: red box should not moves after it.

Hello, people! Just started using GSAP, and I just followed some YouTube tutorial, about an Overlay Zoom Effect with Timeline. But I encountered a glitch, let's say. When running the animation it goes well until reaching the "scroller-end" marker. And after that it's like it is refreshing or something. You will see on the video. Any Idea on why this happens? This is the video: https://jam.dev/c/62492e20-5c8f-49a3-a4fe-86c90da055da This is the code: <script> function run_gsap(){ let gsap_loaded = setInterval(function(){ const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active"); const screenSize = window.screen.width >= 1025; if(window.gsap && window.ScrollTrigger && !eleBuilder && screenSize){ gsap.registerPlugin(ScrollTrigger); overlay_zoom(); clearInterval(gsap_loaded); } }, 500); function overlay_zoom(){ const tl = gsap.timeline({ scrollTrigger: { trigger: '.content-scroll', start: '70px top', end: '750px center', scrub:true, pin: true, duration:3 } }); tl.to('.overlay-zoom', {scale:100, duration:1}); tl.to('.scroll-headline', {y: -20, opacity:1}, '<20%'); tl.to('.scroll-des', {y: -20, opacity:1},'<50%'); tl.to('.scroll-button',{y: -20, opacity:1},'<50%' ); tl.to('.overlay-zoom', {display:'none'}, '<'); } } run_gsap(); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>

I have one timeline. inside div I have 3 divs ( position: absolute ) I am pushing animation objects in a array const anim = mainTimeline.from(...) animations.push(anim); but when I try to play animation on specific index, for example animations[2].play() it plays whole timeline is it possible to play only specific animation under same timeline?

Hello, I am completely new to gsap and I saw an effect in a site where cards were stacked horizontally and there was a spacer for cards so that they don't overlap with each other completely, I tried looking online and went through many docs, and articles but couldn't achieve it. the thing in the image is what I am trying to achieve, I am here right now https://codepen.io/rahul-krosuri-au6/pen/jOeJyvw

Hi. Please note: this is a general question asking if the plugins will work well in a positive way when using pinned scrollTrigger timelines. I have a large scrollTrigger timeline which is pinned and I want to do everything I can do to make it feel as smooth as possible. Can you use scrollSmoother on/for scrollTrigger timeline's which are pinned? timeline code is here if it helps: let tl = gsap.timeline({ onUpdate: render, defaults: { ease: 'none', }, scrollTrigger: { trigger: section, pin: true, // pin the trigger element while active start: 'top top', // when the top of the trigger hits the top of the viewport end: '+=1000%', // end after scrolling 500px beyond the start scrub: 0, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar: was 1 anticipatePin: 1, invalidateOnRefresh: true, }, })

Hello, I need help. I can't figure out how to fix the black square in the position it is at the beginning of the item rotation animation in the third step. Now the square moving immediately to its final position.

Hi, as mentioned in title I want to show the elements one by one on screen on scroll while make line element grow vertically like a roadmap kinda view. And also I need to add active class to milestone-stone element so that it indicates the active element and give it a cool effect Thanks a lot in advance ?.

Apparently this Kind of doing scroll Trigger does not Work? But when doing it like this it does... This is how I imported this and this was the error from the console: this is react by the way, and I cant find a consistent video that I can actually refer, Im really sorry to be asking here im a gsap begginer.. Thank You so much in advance for any solution or enlightenment.

Hello! I have created a timeline with Scrolltrigger. I want to make the animation start sooner. So as soon as the section gets pinned, the animation should start. It feels like after the element gets pinned, I have to scroll too much to get the Scrolltrigger to start (although it does feel worse on the live site). Any help is greatly appreciated. Thank you!!

Hello! On page load I am trying to create am animation where certain elements fade in. On these same elements I have a scrolltrigger that moves the elements around and animates the opacity to 0. Each animation works without each other, but when trying to run both it does not work. After the initial fade in, once the user scrolls the elements disappear. Any help is greatly appreciated. Thank you!

I am programmatically moving an element inside of a pinned trigger to the center of the viewport via scrolltrigger with timeline animations. It works, but values do not properly update on resize. I'm setting values with anonymous functions, i even read through this post... but I'm still stuck. What's worse is `invalidateOnRefresh` is breaking some values (see codepen). Finally, I have to refresh the tl.scrollTrigger in order to use the tl.scrollTrigger.start value. Does anyone know why?

Hi everyone, I'm relatively new to GSAP, and I'm running into a problem that I'm not sure is related to Vue or GSAP. I have created a simplified example on StackBlitz to demonstrate the problem: example. Master timeline -> stores/AnimationStore.ts Usage & Child timeline -> app.vue Here is the problem I'm facing: I'm trying to share a GSAP timeline called master via Pinia in my Nuxt 3 project. Components in the project can create their own child timelines and add them to the master timeline. In the example, the child timeline is correctly added to the master timeline, but when I play the master timeline, it just starts (console.log('Master started')), but doesn't update or finish. Also, the child timeline doesn't run. I would appreciate any guidance or suggestions on how to solve this issue. Thanks in advance for your help!

Hi everyone, I like the aspects of GSAP timelines. In my Nuxt 3 application, I've been utilizing a master timeline shared via Pinia. Each component utilizes a context that is defined within the "onMountend" Lifecycle Hook and reverts during the "onUnmounted" phase. If a component is mounted, I add its animations to the master timeline. If the component gets unmounted, I remove the component's animation from the master timeline. Does the revert() function automatically remove the component's animations from the master timeline, or do I have to remove the animation myself?