Sahil

Your sixth parameter should be function, in your snippet it is seventh. I think you accidentally wrote position parameter twice. const heroTimeline = new TimelineLite({delay:'1'}); heroTimeline .add('start') .staggerTo([stage1_h1, stage1_h2], 1, {opacity:1}, 0.25, 0, stage2); https://greensock.com/docs/TimelineMax/staggerTo

That's really well written actually. To set delay before text fades out again, you can set repeatDelay property. You are setting delay in both from and to values but it will ignore delay in 'from' values. On codepen you don't have to write entire HTML, you can add your scripts from settings and just write HTML body in codepen, rest is not needed.

If you think about it, what you are trying to do is to create timeline for user interaction. Your character is free to move around so you can't put him in timeline. Instead you should treat it as interaction. When he reaches certain spot then trigger animation related to that position. Timeline is not best option for this.

With all that I forgot to implement main effect of revealing text. https://stackblitz.com/edit/gsap-react-multiple-elements-pvnr8v?file=multiple-elements.js

Does Tween1Tl.seek("startLabel").pause(); work for you? If not, would be great if you can post a demo.

Happy to help! Here is less complex solution using invalidate. Instead of using another object, I am animating element directly. On resize, activeTween gets invalidated to record new values. I have left some comments for key parts but this is far less complex and better for performance because we are not creating new set tween on every frame.

Hard to guess what could be happening in your actual code. And it is impossible for onComplete to fire before tween completes, unless you are using stagger tween. In stagger tweens, onComplete gets fired for every single tween. You need to pass 5th parameter as function for onCompleteAll callback. https://greensock.com/docs/TweenMax/static.staggerTo() Apart from that it is impossible for us to help without demo showing problem. But I am sure there must be something else in your code that must be causing this issue.

Your snippet is fine. Can you post a reduced test case showing the problem?

I tried that actually but stackblitz was giving me weird highlights throughout the code and grayed out ref attribute when I used it on those elements, so I assumed ref will work on parent node only inside loop. Still overall I am impressed stackblitz just hope code highlighting won't be issue locally.

That's tricky mainly because you want to change the duration of the tweens but changing duration of tweens that are on active timeline create weird effect because you are stretching timeline's duration so it just stretches from same start position. You can't add these tweens to any timeline, only thing you can do is change timescale of whatever that timeline is but still going to be tricky situation if it is complex animation. Here is a bit more simplified demo, now instead of animating element I am animating another object between 0 to 1. Because animating actual element gets too tricky. And then using the onUpdate call to update position of element. When move function is called I am creating new tween and assigning it to currentTween variable. I am using another variable, currentVars. To record start and end position that I need to create new tween on resize. onResize if currentTween is actually active, then kill currentTween. Then call move function to create new tween. See if this works for you, I am not sure if there is better way but if I come up with something then I will let you know.

Yes but you probably don't need to if you can structure your columns differently. In following demo I am animating containers so you won't have to write same tweens again and again to achieve that effect, or use a loop? Would be a lot easy for you to edit in future. Also, if you want to translate element in percentage then you can instead use yPercent. That's because your columns animate within a second but your quotes animate over six seconds. So when you scroll, all slides animate first then rest of quote tweens start playing because one's duration is 1 second and another's is 6. You can either construct your timelines with same duration or explicitly set one timeline's duration to another.

You can create two timelines then add them to master timeline at position 0. master.add(tl1, 0); master.add(tl2, 0);

It seems like similar question from last week. As advised, please post a reduced test case demo of what you are trying to do and elaborate your question more so we can understand better. Take a look at following thread to see how to create demo,

Ya of course, it just boils down to your knowledge and understanding of framework or library. I am not familiar with react but I wanted to give it a try. I followed @Rodrigo's same blog post that I had advised you to follow in previous thread. Following is the fork of one of his demos. As you can see, it can be reduced to very little code, you can add more conditional logic to change colors etc. https://stackblitz.com/edit/gsap-react-multiple-elements-5aqhzy?file=multiple-elements.js Though there might be certain things that Rodrigo will do differently because this is very first time I am working with React but basically you need to start learning from resources we provide, almost everything is possible just depends on how you implement.

You can set repeat value by calculating count based on totalTime. Here is fork, https://stackblitz.com/edit/gsap-exmpl-pvk8zc?file=simple-tween.js

Problem: When you create any timeline, all the statements execute at the same time. So GSAP creates tween with target and duration, in your case duration is important but it gets calculated for all three tweens based on target element's current position. So when 3rd tween is created element is at position 0 and it goes distance of 50 pixels which is absolute value. But because it is a 'to' tween, the element goes from whatever the current position is to the target position and by the time 3rd tween plays, distance has changed but because it was created already, the duration for it was set to 0.5. Solution: You need some way to calculate duration based on actual position, to get around that you need to use addPause method. When you call addPause during a timeline, it will pause timeline at given position parameter. I am passing the function that will get called when timeline pauses, parameters that we pass to move function and scope. I am passing current timeline as scope to keep things organized. Inside the move function, you do same calculations as before but this function gets called while timeline is playing. Because of that the tween gets created based on what is actual position of the element, so your calculation for duration is live and correct. Once your tween/timeline completes inside the addPause function, we can resume the main timeline by using onComplete callback. If you know all target positions then another solution would be to calculate your duration based on target value of previous tween instead of getting current position of the element. Because I think original question was for scenario where target position would change based on user interaction.

All three add statements execute at the same time and they calculate the duration based on current position of the element, so 3rd statement goes to 50 pixels in 0.5 seconds but by the time that tween executes distance has changed. Though what you are expecting is that it should calculate duration after first two tweens complete. If you want to construct timelines like that, maybe you can use addPause method and move your logic inside it. https://greensock.com/docs/TimelineLite/addPause()

Your gradient goes from top-left corner to bottom right, you need to position it based on your arc. Best way to see your gradient would be use rect and fill it with gradient so you can see which areas gradient is affecting. Here is fork but there are many other issues with your demo like blur is affecting gradient color, and top left part is not getting drawn(or your are drawing rect on top of that) so I am not sure what is going on. Also, please keep your questions related to GSAP API only we don't provide support for general javascript related questions and it seems you are not even using GSAP. https://codepen.io/Sahil89/pen/MzeZXj

You need to set duration so class toggles back when you scroll further.

That's because you are setting position to fixed and setting left, top which seems to create situation where IE does IE stuff and messes up transform origin. Any reason you are setting top, left? Doesn't seem like you have to. If you remove top left and remove xPercent, yPercent from javascript it will work fine.

To animate element across z-axis you need to set perspective on the parent. If you want to set x and y translate in percentage then you can instead use xPercent and yPercent. Go through this page to learn more about transforms and how GSAP can make things easy for you: https://greensock.com/docs/Plugins/CSSPlugin

Ya there is a lot of code that I am not even sure what is the purpose of that. You are using container's height and width to calculate progress of tweens based on where the cursor is inside the container. Now your container can be a div or window and you need to know how using either affects the implementation. First thing you need is to position your elements where you want them when mouse is at center and from that position eye will translate. You can't use pageX in your actual project because if you scroll it will throw off your calculations. You need to calculate mouse position like I did if your page scrolls. You also need to reset value of rect on resize and scroll event. Figuring out how much the eye should move doesn't need all that calculation, you can just use a number based on radius of your circles.

In current implementation, Blake just loops through all the target elements that have data-depth attribute. And there is no logic in place to check if element is visible or hidden. You can add a property to 'item' that you can use to skip the element from the loop, but you will also have to adjust the the count of items to change the loop because you are skipping item and rest of calculation depends on the index. Kind of tricky situation as you will just have to rewrite most of the parts of it because Blake doesn't plan to provide support for it.

Yes that's what is happening but when you define a 'to' tween, GSAP will start from current value and animate it to the value you specified. If you had first timeline animating to 180 then keepFlying will just go from 180 to 360 and keep repeating just half circle. If you had first timeline to 360, nothing would happen in keep flying because the fly is already at the end position. That's why you need to use relative value, so now in your case first timeline goes to 25 and keep flying goes from 25 to 385 and keeps repeating. We have great resources on learning page that explain all these finer details, you will find it a lot useful in future: https://greensock.com/learning

In keep flying you were using absolute value so wrapper would only animate from 25 to 360. You need to use relative value instead "+=360"