Search the Community

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.

I'm working on a prototype for a mobile-only website. The concept is, that there is an image with a route on it and the page scrolls along the specific route. The image with the route is larger than the screen and will be updated with x/y transforms to follow the route during the scroll. I've created a GSAP timeline with the different points on the route and synced it to a GSAP ScrollTrigger instance. The trigger ('.scroller'.) is an invisible div with a height of 2400vw, which solely functions as the scroll distance. The demo is visible on: https://scrolltrigger-test-ib0bhfhl2-tom51north.vercel.app/. The demo works smoothly on desktop (use the mobile debug tool). However, on iOS the whole animation is kind of buggy/laggy when you scroll down the page and I can't find out why. I also have added a FPS meter, but that also shows 60 fps. Does anyone have an idea why the whole animation is buggy and how I can fix it? const scrollTl = gsap.timeline({ scrollTrigger: { trigger: ".scroller", start: "top top", end: "bottom bottom", scrub: true } }); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-33vw', y: '-59vw', ease: 'none' }, 0); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '7vw', y: '-91vw', ease: 'none' }, 1); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '47vw', y: '-130vw', ease: 'none' }, 2); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-4vw', y: '-169vw', ease: 'none' }, 3); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-57vw', y: '-203vw', ease: 'none' }, 4); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-106vw', y: '-244vw', ease: 'none' }, 5); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-68vw', y: '-270vw', ease: 'none' }, 6); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-9vw', y: '-264vw', ease: 'none' }, 7); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '26vw', y: '-292vw', ease: 'none' }, 8); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '64vw', y: '-322vw', ease: 'none' }, 9); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '14vw', y: '-375vw', ease: 'none' }, 10); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-38vw', y: '-410vw', ease: 'none' }, 11); .scrolltrigger-test { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #008238; } .scrolltrigger-test__visual { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; } .scroller { position: absolute; top: 0; left: 0; width: 100%; height: 2400vw; } .scrolltrigger-test__visual-background { position: relative; } .scrolltrigger-test__visual-background-image { display: block; position: relative; width: 280vw; height: auto; top: -10vw; left: -72vw; }

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?

Is this possible? I have a secondary set of buttons that appear for the top level nav buttons, I would like these secondary buttons to transition in, from right to left one after another like a quick cascade when the timeline stops on its containing frame. Using Animate's stacked layer tween process would be too cumbersome for the scalability of these apps, it would be great if a bit of code would trigger a transition-in animation procedurally. Is this something GS can do? Or would there be another JS library more suitable? Thanks.

So i am trying to animate the cards at the end of the Page by ScrollTrigger. This page also contains a Initial loading animation of the Page getting revealed. My problem is that if i keep the Initial Page load animation then the ScrollTrigger dosen't work properly (As you can see in the demo) and thecards suddenly appears as soon as the end reaches without a proper animation. But if i remove the initial page load animation then the scrollTrigger animation works fine. Any solution why ? Demo link - Demo here

Hi! everyone. this is my demo tunnel https://codesandbox.io/s/digit-tunnel-4vkc91?file=/src/index.js and i wanted to add easing with GSAP to make mousemove more smooth, like in this website https://archiviostoricoexperience.gruppotim.it/en/optical-fibre .. but couldn't achieve such smooth easing effect , can someone help .?

hello everyone, thanks for reading. i want to navigate to section by clicking dot Indicator. i have tried to change the Observer code but couldn't Understand the Logic to Sync Both. please Give Me your guidance. thank you very much.

Hi, I have a really dumb question about a functionality. I need a container that has text to move vertically each time I click a key. Is there an easy way to do it with a tween? I see the container only moves one time and that's it. How can I make it to move each time I click a key?

Hi, I'm having a difficult time with this animation. I have a logo which is going to animate from the bottom then the letters of the logo are going to be reveal from right to left at the same time that it push the logo so everything stays centered. I have and example but it looks like the animation is starting from the center, and not from right to left. I tried to use a background image instead of the SVG and seems to work fine, the issue is that later on I need to change the logo color, so using background image is not an option. Any help would be appreciated. Here is an example of the animation I'm trying to do Screen Recording 2022-07-05 at 15.20.17.mov

Hi, I have an animation that I'm having issues with. I'm trying to reveal a text while also push the logo at the same time (look video reference) but I can't do it smoothly. On my codepen it shows a big jump for the logo image once the text is reveled. Any help on how can I solve this? Screen Recording 2022-06-23 at 15.32.07.mov

Hi there, I am animating a shape towards another shape. However, during the tween there might be a user interaction that changes the target of this animation. In this case I would like to *smoothly* change the ongoing animation so it moves towards the new target. I don't quite understand how to achieve this. When I use separate tweens, then it (obviously) just interrupts the current tween and starts a new one from the current position, which does not look smooth at all (especially with an ease like expo.inOut). In the codepen, when you first click the red target, the circle starts moving towards it. When you now click the blue target, while the circle is still moving, it starts a new tween that moves towards the blue target. I would like to change the setup so that clicking on the blue target continues the current tween, but lets it end at the blue target. Any idea, how to achieve this? Thank you!

Hi there! I would like to add a scalar tween to a component in React using GSAP, the component is a functional component. I've whipped up a quick example of how i think that could be implemented in React using GSAP in the attached codepen. (Type in some number values into the input and watch GSAP tween the number below the input) It's a bit dirty as i need to add a global object to the window on the first mount of the component, so that GSAP has an object it can freely mutate without React resetting it on each render. Is there are better way of allowing GSAP to perform a scalar transition within React? Thanks for any help you can give!

I want to use this parametric waves animation with gsap.min library, currently this is working with TwinMAX. After removing the gsap.min It's working fine but I cant remove gsap.min because other animations or not working without gsap.min I have getting the following error in console. Uncaught TypeError: Sine.easeInOut.getRatio is not a function https://codepen.io/ThiemelJiri/pen/pWyezW Anyone can help please? Thanks

Hello community! I can't figure out how to replay tween after main ScrollTrigger. In the Codepen I have an example, on the first scroll end there is a beam, but if you scroll up again and try to get the same animation (after ScrollTrigger ends), it doesn't replay. I've tried to clear animation inside onComplete like onComplete: () => { circleTl.time(0).kill() } But no luck. How to solve that? Thanks!

Hey guys I have a very weird issue happening. First I was trying to create a CodePen but I can't replicate the issue there. I created a simple code example, so I have a tween on a timeline and I need functionality when the tween starts, the problem is that the onStart() function being trigger twice for some reason. First I thought that my function was being called twice but that is not the case. I did some research and I found similar issues but way back. Since I don't have a codepen to show, this is the example code that I have nextSlide(){ console.log('enter function') gsap.timeline() .to(this.ImageSections[this.currentSection], { onStart: ()=>{ console.log('enter OnStart() Timeline') } }) } And this is the console log. So I can see my function is being trigger once, but the onStart() is being called twice for some reason

Need some help with the infinite looping rocking motion. I would like it to have a smoother transition into a natural back and forth rocking motion.

Hello, sorry if this is a dumb question, I think is more easier that what I'm make it out to be. I have a rada graphic and I need to show multiple colored areas but I need to create a "scale in & scale out" (sorry for the phrase, I don't know exactly how to call this type of animation) animation for every single area, so when I show one I have to scale out before the next one.

Hi ! Apologies in advance, I'm a musician / digital artist and a total beginner with gsap (like 2 days ago) but also very new to Js, React and Three.js. I'm really amazed how easily gsap handles animation of any params compared to other solutions I found in the past. It will make my life so much easier, I'm already considering to join the Greensock club soon...! Since yesterday I've been hitting my head against the wall and I can't figure this out. Here's the sandbox : https://7cuco.csb.app I have this button that triggers random variations of color and rotation speed of a cube. I wanted gsap to smooth every random value by a few seconds. I managed to make this happen very easily for the rotation speed (I guess because I worked from a simple object) but for some reason it doesn't work as excepted with the Three.color object. Every click resets the color to black, before moving gradually to the selected color. Almost... I'm really sorry in advance, I expect this to be a really stupid mistake. Thanks in advance for your help !

I don't have a codepen but basically what i want to achieve is this: I have some data loading in the background, and i'm using GSAP3 to create a timeline that's animating an svg infinitly, it's a preload animation basically. What i want to do is that when the data is loaded, i want to pause the current timeline object, animate it until the progress is 1, and then when the animation is completely finished i want to create another animation to smoothly animate the preloader out of the screen and then show the loaded data. I saw an example of this in GSAP2 using TweenMax where: you pass the tweenmax object into the to() method, animate the progress property and then assign a callback function to the onComplete() property to kill the timeline object, but that doesn't seem to work in GSAP3, the svg abruptly jumps to the it's final state (where the progress is equel to 1) instead of animating to it. Can you please tell me how can i achieve this? I can't seem to find any example of this in GSAP3. Thanks in advance!

this.menuTimeLine = gsap.timeline({ paused: true, }); this.menuTimeLine .fromTo(this.ref.menu, { x: "-100%", }, { x: "0%", duration: this.state.open ? 0.3 : 2, ease: this.state.open ? "linear" : "expo.out", }, 0).reverse() if (this.menuTimeLine.reversed()) { this.menuTimeLine.play() } else { this.menuTimeLine.reverse() } Button.addEventListener('click', () => { if (this.menuTimeLine.reversed()) { this.menuTimeLine.play(); } else { this.menuTimeLine.reverse() } }) Update Prop or Tween value conditionally whatever it is normal gsap or gsap timeline In Gsap version 2.x.x updateTo can update tweening values or gsap props but what to do in gsap 3.x.x or Gsap vars can help in this issue ? in Codepen example dynamic ease or duration ? besause timeline is outside of onClick ?

Hi. I'm starting to use this incredible code to have some ads in my page. The issue I'm having is that some banners are located in the middle of the page, so when the user get to that part the animation has already ended. To fix this I'd like to know: - how to start the animation when the <div> section of the banner becomes visible. - If is possible to loop a serie of tweens without timelinelite. Thanks!

Hey! I recently switched from Tween.JS to GSAP, and I'm trying to tween a number with potentially large number of decimal places. I wrote a small library that finds-on-screen and auto-tweens those numbers, so I do not have a *predefined* number of decimals - but as they're cryptocurrency prices, those can be 4, 6, 8 or 9 - usually. I noticed that both TweenMax and TweenLite do only 4 decimals, which is quite weird. Looking around the web (and this forum) I cannot find a solution/parameter/switch how to alter this behavior. Any advice? import gsap from 'gsap'; import { TweenLite, Expo } from 'gsap/all'; gsap.registerPlugin(Expo); export default class TweenEmAll { // ..cut objTween = undefined; objTweenProgress = { value: 0.000001 }; // experiment with pre-defined 6 decimals // ..cut tween() { // ..cut // launch new tween this.objTween = TweenLite.to(this.objTweenProgress, this.duration, { value: this.target, ease: Expo.easeOut, //decimals: 6, // experiment //autoRound: false, // experiment onUpdate: this.onTweenUpdate.bind(this) }); } onTweenUpdate() { // reconstruct value nicely let value = this.objTweenProgress.value.toFixed(6); // experiment // update appropriate element if(this.isInput) this.elmContainer.val(value); else this.elmContainer.html(value); } }

Hello Club Green Sock! I was reading about the common Scroll Trigger mistakes looking for a solution to this question. I think may be going about this the wrong way, but... I have a timeline let hardwareTimeLine = gsap.timeline({ scrollTrigger: { trigger: ".centering-container", scrub: true, pin: true, pinSpacing: true, start: "top", end: "150%" } }); hardwareTimeLine .from(".hero-header", {}) .fromTo(".animated-header", {autoAlpha: 1, top: "29%"}, {autoAlpha: 0, top: "27%"}) .fromTo(".scaling-container", {duration: 1, scaleX: 1.6, scaleY: 1.6, transformOrigin: "50% 50% 0", backgroundPosition: "center"}, {duration: 1, scaleX: .6, scaleY: .6, transformOrigin: "50% 50% 0", backgroundPosition: "center"}, "<") .fromTo(".screen-inner-1", {duration: .5, transform: "translateX(0)"}, {duration: .5, transform: "translateX(-103%)"}) .fromTo(".screen-inner-2", {duration: .5, transform: "translateX(103%)"}, {duration: .5, transform: "translateX(0)"}, "<") .from(".icons-tray", {y: 150, autoAlpha: 0}); and I was wondering if there was a way to put a tween inside the timeline that is attached to the Scroll Trigger at the very end of my last ".from", if that makes sense? I tried .tweenTo() but that didn't seem to give the effect I am searching for. For example (see my codepen, you may need to look it at on full screen) I would like the grey box (".icons-tray") to tween up on it's own and only be started by the scroll trigger. Can anyone point me in the right direction of the way to approach this effect or have a working demo that shows this? Thank you so much!!!

Hey Club Greensock! I was just wondering if I could get some assistance on my project. I have a pretty good base (I think). I just had a couple questions and was wondering if someone might be able to give me some ideas and direction. In my pinned timeline, I have a container that I scale down. I am wondering how might one go about how to decrease the pin spacing as this timeline progresses? As you can see in the image, there is a huge gap due to the scale down. Is there a way to adjust the pinspacing so the final resting place of the animation obeys the global defaults I have setup for the section container? If that makes sense? Specifically if you look at my pen on chrome, there is a weird thing it's doing where there's like a slight margin that is revealing the background slide as it moves. It doesn't do this on FF. Tell me if there is a better way to do this, but basically I have the laptop as a png, the screen area is the transparency, and I have a white bg on the sides of the screen image (to hide the slides) and then I did an overflow: hidden on that laptop png. I know there's got to be a better, more flexible way of doing this. Any suggestions? I would like to setup a global tween (".reveal-up") that I can apply to be flexible to many elements on the page (sort of how like green sock does it here). I have it setup on the header and text in the section with the boxes that rotate and "fly-in". It plays, but it doesn't play when in view, rather it plays at the top of the page. How can I approach this to be more flexible so it plays when in view and also be able to apply it to other elements? Tweening inside my scroll trigger timeline. Specifically I am talking about the text "Lorem Ipsum" that is layerd above the laptop. I know how to make it part of the scroll, but is there a way to trigger it on scroll, but not to play with the scroll? If that makes sense. How would one go about triggering it on scroll, but to play through regardless of the users inputs on the scroll and additionally to reset? I am not sure if this is a thing, but when the browser resizes, there's some funkiness that happens to the timelines. Is there a way that I can make it more flexible on browser resize so the funkiness doesn't happen? Thank you for any help. Here's a couple images to assist in my questions: