Sahil

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"

I was overthinking I guess, here is similar effect using Bounce.

You are using codepen only link, that won't work locally or on other sites. CustomBounce is part of club plugins https://greensock.com/club. You can also edit and create custom ease using ease visualizer https://greensock.com/docs/Easing, you will save a lot of time using CustomBounce and other plugins that come with club membership.

Here is the fork,

Ya you can ease the progress of target tween or timeline. Create a paused timeline and on scroll animate the proxy tween so you can use it's progress for animation. var proxyTween = TweenLite.to({}, 1, {paused: true}); TweenLite.ticker.addEventListener('tick', function(){ var progress = timeline.progress(); progress += (proxyTween.progress() - progress) * ease; // ease can be anything from 0.5 to 0.01 timeline.progress(progress); });

You can modify following example by @OSUblake from another thread,

Easiest way to do achieve that would be using CustomBounce plugin. https://greensock.com/docs/Easing/CustomBounce

Animation along path will just rotate them in 2d, if that's what you want to do then you can just rotate element by offsetting transform origin. But it seemed like you were going for 3D effect, which is why I specified 3rd link. You need perspective on parent element and transform origin on the elements. So when you animate rotationY, the elements will rotate in 3D. To change the speed based on mouse, you can change the 'timeScale' of individual tween or timeline. When I was starting with GSAP I experimented with something similar, it was just 3D cube. It is not really what you are trying to do but it should give you some idea. There is also a blog post by Chris Gannon for somewhat similar effect and explains how to set up your divs. https://greensock.com/cube-dial-tutorial

There is slack group of animators, we didn't create it but there is GSAP channel. Some of us are also member of that channel but we are not really that active there and we don't intend to provide support there. You can join using this link: https://damp-lake-50659.herokuapp.com/

That's pretty advanced thing for beginner to do especially if you are not familiar with JavaScript or 3D transforms in CSS. I would encourage you to visit our learning page and start from there, https://greensock.com/learning There is also youtube channel intended to introduce all the features of GSAP: https://www.youtube.com/user/GreenSockLearning The more specific part you need for this particular project is understanding 3D transforms that you can learn at following page: https://greensock.com/docs/Plugins/CSSPlugin

I am not sure because when I had purchased license I was in real hurry but I feel like there was option to pay using PayPal. @GreenSock can you confirm? Also, I think you can start developing using TweenMax and purchase the license before you publish your game.

First part is to go away from center, after that you can swing from end to end. It gets really simple if you use TweenMax instead of TweenLite. With TweenMax you can set repeat to -1 which will keep repeating it to infinitely. And then set the yoyoEase to true so easing effect will be same while reversing. If you just want to use TweenLite, then you will need to call a function onComplete callback after first part. Then inside function define a tween that goes to end, and onComplete call itself. If you just want to use TweenLite then you will need to call a function after first part completes, pass 1 as parameter to it. After that inside function you need to define tween that swings end to end, now pass negative of the parameter so on next call pendulum will swing away. You also need to pass the scope, to define what is 'this' inside function. But to be honest you are just making your life hard by not using TweenMax, as you will not notice any significant performance hit when using TweenMax.

It seems SVG doesn't support offsetHeight. So you can instead using getBoundingClientRect to get height.