Sahil

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.

getBoundingClientRect won't provide you accurate position inside the svg, it will only you position according to screen. Ya it is really well supported, just some browsers don't x and y properties but you can use left and top instead. Here is demo by @OSUblake showing how you can use getBBox using a custom function to get correct position inside svg. Similar thread if you wanna read more:

You need TextPlugin to do that and need to target element instead of innerText.

You need to host it somewhere. Your own domain n server or some third party site that lets you access it. Most users with amazonaws.com links have codepen pro account that lets you save different types of files. That being said, please keep your questions related to GSAP only. On stack overflow you will get a lot of downvotes but you will find some helpful groups on facebook. You can also join this slack group for such unrelated questions. https://damp-lake-50659.herokuapp.com/

The first part inside the object is key and second part is value, so you need to use ternary operator in value part. .to("#square", 1, {backgroundColor: window.innerWidth > 736 ? "red" : "yellow" }); Also, by declaring timeline outside of function you were adding all tweens to same timeline even though you won't be reusing them.

You can fake the effect. 1. Create paused tween for each element and then set tween's progress to how you like to scatter elements. 2. On scroll increase the progress of each tween based on wheel movement. 3. Once progress of a tween reaches to 1, set the progress to 0 so element will disappear and reappear at top, keep repeating 4. Also you are using mousewheel event that doesn't work in firefox use wheel event instead.

@smallio you can trigger the click events. For some reason the second parameter gives count in non-zero index.

@Devotee007 Not really GSAP issue, it was because your container didn't have position.

@somose138 I don't have any experience with react. Though @Rodrigo has written a guest blog post on how to use GSAP with react. I am sure you will find it helpful. https://greensock.com/react

You were calling staggerFrom on elements with class 'element-span'. So each loop was adding same elements to the timeline which was creating conflict. You need to select children of current element instead of all elements.

If you don't want to support rapid clicks then you can add logic to ignore clicks when your tween that controls timeline is active. If you want to support rapid clicks then you will have to calculate angle using onUpdate. Following is the example show how you can calculate the angle, check the console. Now you can use that to determine angle based on range you want. Also, adding classes might not be best idea, instead you can do that directly from javascript. You can simplify your math to determine range by using a rectangular map and skewing your svg. Though if you plan to add text to it then you won't be able able to use this trick. You might be able to use it by adding reverse skew on text.

You were passing timeline as a string with single quotes instead of actual timeline.

I remember 3D transforms working in Chrome. But looks like they dropped the support for 3D transforms from transform attribute for svg elements. GSAP used to use CSS transforms for chrome but it was changed to transform attribute in 1.19.1 for all browser consistency. Though 3D transforms do work with older versions of GSAP it will only work in Chrome as other browsers don't support 3D spec for SVG elements. https://github.com/greensock/GreenSock-JS/releases/tag/1.19.1