Sahil

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.

There is no button to mark topics as solved, some users just edit title to mark it. Though I like forums with "Solved" button.

Problem here is that you are declaring tweens in both events with different delays, so lets say you click to make element visible and quickly clicked twice On first click, your element will start rendering after 0.1 second responding to 1st and 3rd click But after 0.9 seconds the tween with delay of 0.9 will start playing and disable rendering To avoid that you can call killTweensOf to kill tweens on sprite. But a better approach would be to disable rendering after your animation completes, Also if you want to use 0 duration tweens then you can instead use TweenLite.set method. Finally, if your animation just goes and back like that then you can define once and toggle it back and forth. Watch following video to know more about timelines and how you can take advantage of them to sequence your animations, there are more helpful videos on the channel.

@DD77 Craig and Pedro have done a great job in trying to help you figure out problems in your project. Though I would like to intervene because we can't spend so much time on a single question. We try to keep this forum focused on GSAP API related questions only. We occasionally do help members a bit more but with the intentions that they will use it as example to learn from and can expand it into what their desired goal is. I get it that you are using GSAP but still all of your questions are related to general JavaScript. Now to use GSAP or any animation library you need strong foundation of CSS and JavaScript basics so you can position your elements how you like and make them interactive through JavaScript. We don't resources to answer and explain JavaScript related questions. We have already provided you some helpful resources that will help you build your foundation. And we would be happy to point you to more resources to learn from if you need. We also have a sub forum where you can post to hire a freelancer to help you with your project. Or you can also look for a personal instructor. Feel free to post your requirements at the following link: https://greensock.com/forums/forum/15-jobs-freelance/ Hope this will help you resolve problems in your project. All the best.

You can use variable to store positions if your content isn't dynamic or you know you won't be changing it. If not, then you will need to get their position by using getBoundingClientRect and calculate the difference between their position. If your elements are of different size and you want them to stack on each other then you will need to calculate their center by using height and width(you can get height and width from getBoundingClientRect). Following is demo I made for another thread where I am changing the parent of element and then calculating the difference between the changed position and original position. You can use similar logic to achieve that effect. Just instead of recording values after changing parent you will have to loop through elements to record and calculate difference in position. Well all elements will have same ease but it will look different based on distance. If you meant they should start depending on how far they are and their speed while arriving should be same, then you will have to set their duration and start time by calculating the difference between distance.

That explains some of your Draggable questions. I really like it, I don't remember seeing draggable used like this. Great work.

Yup.

You can get total duration by calling timeline.totalDuration(). Then set totalDuration of your another animation to same as totalDuration of your timeline. If your timeline has other animations as well, then you can add your slides related timeline to another timeline first and get it's total duration then add it to your main timeline.

@Devon Bortscher I should have pointed out some problems with your demo before re-writing it. 1. As you already might know, you can use stagger tweens to add uniform delay when animating multiple elements. 2. You are using infinite: true, in GSAP if you want animation to repeat infinitely then you need to set repeat property to -1. But also for what you were doing you didn't need to set any repeat values. I decided to make a video tutorial explaining how my demo works. It seems like you have already figured, but in case you want to know more you can watch the following video.

I re-wrote the demo. I would say avoid assigning class to keep track of active elements, it gets messy and confusing real quick.

It will work if you animate cx attribute.

There is blog post saying netlify supports gitlab.

I merged your questions to keep discussion in single thread. getBoundingClientRect gives you the position of element with respect to viewport. You don't see any problem with that because you are not using viewbox. Viewbox is attribute determines the SVG's internal co-ordinate system. In following demo you will see that viewbox is 200x200 but svg element is 500x500, so basically SVG is scaled up. Now when you use the getBoundingClientRect the horizontal distance between both rects is 250. Which is incorrect. getBBox ignores any transforms. Though I don't know why it isn't part of library or spec. You can read this another thread to learn more about all SVG weirdness:

Did you check the demo I posted? It uses a custom function to get bounding box similar to getBoundingClientRect but with respect to svg co-ordinate system only.