Search the Community

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?

Hello, i found some slider using Gsap but i want to modify it with timelines. My goal is when i start scrolling my slide scroll and set rotation to 0 I tried to combine it with timeline but it jumps or anims end when i didnt scroll yet. Without timeline all of them rotates at the same time.

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?

Hey gang, I recently started working with the GSAP library and want to achieve some advanced effects. If you go to this link (https://dusan-portfolio.divhunt.art/#projects) and check the case studies section you will see that I'm trying to combine some horizontal scrolling effect with the background color that changes for each project. I kind of achieved some results but it's far from perfect. Hope someone can suggest to me the best way to recreate this, here is my code: //PROJECTS - scroll animation gsap.to("#project-list", { x: "-444%", ease: "none", scrollTrigger: { trigger: ".t-125", endTrigger: ".t-173", start: "top center", end: "center 45%", scrub: 1, markers: true } }); //PROJECTS - Color yellow gsap.to(".t-117", { backgroundColor: "#FBFE67", ease: "none", scrollTrigger: { trigger: ".t-125", start: "top center", end: "bottom center", toggleActions: "play none reverse none", scrub: 1, markers: true } }); //PROJECTS - Color Orange gsap.to(".t-117", { backgroundColor: "#FC7753", ease: "none", scrollTrigger: { trigger: ".t-141", start: "top center", end: "bottom center", toggleActions: "play none reverse none", scrub: 1, markers: true } }); //PROJECTS - Color Blue gsap.to(".t-117", { backgroundColor: "#3185FC", ease: "none", scrollTrigger: { trigger: ".t-157", start: "top center", end: "bottom center", toggleActions: "play none reverse none", scrub: 1, markers: true } }); //PROJECTS - Color Green gsap.to(".t-117", { backgroundColor: "#38FB6F", ease: "none", scrollTrigger: { trigger: ".t-173", start: "top bottom", end: "bottom center", toggleActions: "play none reverse none", scrub: 1, markers: true } });

Hello, could you please help me. I'm trying to attach tweens to timeline in Nuxtjs like that: tl.value = gsap.timeline({..}); and tl.value.to({...}); but animation not playng, but onStart event fires and tl.value.duration() returns 1. But if I use chain like tl.value = gsap.timeline({..}).to({..}) it's works fine. Here is simple example: https://codesandbox.io/p/sandbox/mystifying-waterfall-i2cwtp?file=%2Fpages%2Findex.vue%3A1%2C1 . Thank you!

Hi all, Lets say, I have a section and it's total height is 1200px. And I set it's height 100px and use overflow hidden with CSS to hide the other 1100px. My goal is when user scroll to see the other section(below the section I'm talking about) until the remaining 1100px is scrolled. after that people can see the other sections below it. I was able to make a demo, but it not working properly. Is it possible to achieve my goal using GSAP? Please see the video for better understanding. https://www.veed.io/embed/d61cde25-3dbd-4e40-8a32-fbe4ae94fa9d

While working on a GSAP timeline, I switched from targeting IDs to targeting refs. Now, I know that this code worked with targeting both #bgVideo and #bgImg: customTimeline = gsap .timeline({ scrollTrigger: bgFadeProps(), }) .fromTo( '#bgVideo, #bgImg', { opacity: 1, }, { opacity: 0, ease: fadeEase, }, '<' ); However, as soon as I switched both elements to refs, it doesn't seem to work the way I expected: customTimeline = gsap .timeline({ scrollTrigger: bgFadeProps(), }) .fromTo( `${bgVideoRef.current}, ${bgImg.current}`, { opacity: 1, }, { opacity: 0, ease: fadeEase, }, '<' ); I realize that the solution may also be super simple since GSAP is using querySelectorAll() under the hood, but I couldn't find other examples or this yet. What would be the right way to select these refs?

Hello GSAP! I created a reusable React component which displays a background video when the user has entered the frame. Likewise, when the user leaves the frame, the background video is hidden from view. However, I also need to fade in and fade out the background video using a scrollTrigger to control the fade effect. The reusable React component works fine when I assign a static ID (#bgVideoComp) to the video tag and then use a gsap timeline with a scrollTrigger to control to fade-in and fade-out of the video. However, since this component is to be reused more than once, I opted to generate a unique dynamic ID (let's say #vid1, #vid2, #vid3, etc.) for the video tag each time this component is called. What I noticed is that targeting a dynamic ID in the gsap timeline doesn't seem to work (the video fade-in and fade-out no longer occurs). This is what a snippet of the GSAP timeline code looks like: bgFadeStartTl.current = gsap.timeline({ scrollTrigger: bgFadeInProps(), paused: true, repeat: 0 }).fromTo( // '#bgVideoComp', `#${vidId}`, { opacity: 0, background: 'black' }, { opacity: 1, background: 'black', } ); The bgFadeInProps() is simply a function that stores the scrollTrigger properties. However, this code has remained unchanged between the static ID and dynamic ID implementations: function bgFadeInProps() { let bgFadeInProps = { trigger: '#bgFadeScrolly', start: 'top 80%', end: 'top 70%', scrub: true, }; bgFadeInProps = { ...bgFadeInProps, ...bgFadeInSx }; return bgFadeInProps; } Also, the video tag on which the ID is attached looks like this: <video // id="bgVideoComp" id={vidId} style={{ opacity: '1', display: 'block', position: 'fixed', left: '0', right: '0', bottom: '0', minHeight: '100%', minWidth: '100%', zIndex: '-1', width: '100%', objectFit: 'cover', }} autoPlay={true} loop muted playsInline > <source src={vidSrc} /> </video> Are there some common mistakes that I should look out for?

I want to change the widthSegments of my box using a gsap timeline, but when I try it's doing nothing. For now, I've tried this: const tl = gsap.timeline(); tl.fromTo( cubeGeo.parameters, { widthSegments: 1, yoyo: true, repeat: -1, }, { widthSegments: 2, yoyo: true, repeat: -1, } );

So I have an animation in using a timeline, and I want this animation to be able to be reversed. When I play it normally there's no problem, it's perfect. But when I try to reverse it, it plays one more time each time I play the animation. Here's my code: const changeBox = (reverse = false) => { //not allowing the user to remove the slideshow while the animation is playing allow = false; changeTl.fromTo('.active', { x: 0, opacity: 1, scale: 1, duration: 0.35 }, { x: -500, opacity: 0, scale: 0.75, duration: 0.35 }).fromTo('.active', { x: 500, opacity: 0, scale: 0.75, duration: 0.35 }, { x: 0, opacity: 1, scale: 1, duration: 0.35 }, '>'); changeTl.reverse(0); } I don't know at all what can be wrong since I'm quite new to gsap and still don't know all the details. PS: I tried to recreate it in CodePen, but it does not import the right version of gsap ? Thanks in advance for the help