Sahil

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

If you use killAll, it will kill all your other animations from entire page. Can't you just pause your timeline like you do on mouseleave? The reduced test case you posted doesn't show why you will want to kill your animations. I would suggest posting another simple demo that shows why you need to kill animations.

By last image I guess you mean '#blackimg'? You are writing two tweens with delay of zero on same element and trying to animate same property. So whichever tween was executed last will overwrite previous tweens for same property. If that doesn't answer your question then post a codepen demo. Also, you should use timeline for that instead of trying to achieve it by using delays.

You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value. Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value. The scroll based effect is a lot more simple as you don't need to use any predefined tween,

You were using split text on same elements multiple times, which was creating nodes as many levels deep. In the loop, on first tween you are setting opacity and in next two tweens you are setting color but not opacity. So lets say your animation completed till 3rd line, now all character nodes in first 3 lines have opacity 1 but rest of the lines have opacity 0. Now when you click again, split text is creating new character nodes 1 level deep. First 3 lines will work fine because their parent has opacity of 1 but rest won't show up because their parent have opacity 0. If you were using opacity everywhere it would have worked, but wouldn't have been efficient. I will suggest reading this article to better plan your animations, https://css-tricks.com/writing-smarter-animation-code/

You can have either one or another. What you can do though is check referrer on your server side and decide which class to add, if it is your site then don't show loader if it is external url then show loader. If you don't want to mess with server-side then look into barba js http://barbajs.org/

Not sure what your question is exactly. One of the reasons your animations are jittery can be because your paths are too complex and/or long. You can simplify your paths using https://jakearchibald.github.io/svgomg/ Another reason would be, you are running too many animations at once and asking browser to do too much work. Take a look at following article it has few performance optimization tips for canvas. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas As for your question about how to setup your animations, the demo you posted has a example using TimelineMax so I am not sure which part is confusing you. For parallax effect you can't use TimelineMax, here are simple examples of how you can do it in HTML. You can apply same logic for canvas,

Some simple transitions that people find hard to do, you can live code these https://greensock.com/forums/topic/18904-transformorigin-help/?tab=comments#comment-87689 https://greensock.com/forums/topic/17978-try-to-do-block-reveal-with-diagonal/?do=findComment&comment=82156 This one is simple but also has a bit more advanced demo by Blake https://greensock.com/forums/topic/18880-page-transition-with-barbajs/ Simple Add some simple morphSVG, drawSVG and split text effects, https://codepen.io/PointC/pen/aawwgx?editors=0010 https://codepen.io/PointC/pen/oPELMe Intermediate Motion blur using SVG https://codepen.io/osublake/pen/WZqBjV?editors=1010 Animate along the path, a bit pacman touch. You can also include your Mario https://codepen.io/osublake/pen/vWGGGv?editors=1010 FLIP using GSAP to animate flexbox https://codepen.io/osublake/pen/vWGGGv?editors=1010 Drag along the path https://codepen.io/osublake/pen/YYemRa Circlular clip path https://codepen.io/osublake/pen/QKEjwv?editors=1010 Handwriting hamburger https://codepen.io/PointC/pen/zLbxzO Movie rating slider https://codepen.io/PointC/pen/devBRB?editors=1010 Gooey Dial https://codepen.io/PointC/pen/oqeJbo Polygon snapping https://codepen.io/osublake/full/QdbQjN SVG Dynamic Text https://codepen.io/PointC/pen/jpEdBd?editors=0010 Advanced https://codepen.io/PointC/pen/LmOvEQ https://codepen.io/osublake/full/RNLdpz https://codepen.io/osublake/pen/XXbLer/ https://codepen.io/osublake/pen/dMLQJr basically all of Blake's popular demos. Ran out of time.

Ya you can do that but working with pseudo elments in javascript is a bit more complex. For example, you can't define your rules together. You have to select them using entire string the way you defined them, for example if you defined them in CSS as '.parent .child:after' then you must use that entire string to select them. '.child:after' won't work. It gets a lot more easier to work with actual elements. Or using SVG to do animations like these. Here is same example using drawSVGPlugin, Few things to note, 1. SVG viewbox is set to '0 0 100 100' and preserveAspectRatio is set to false so svg will stretch if element's height width changes. 2. The stroke's vector effect attribute is set to 'non-scaling-stroke' so stroke won't look stretched with svg. 3. I am using extra path that gets visible when animation completes because you could see tiny gaps on the edges. It can be avoided by setting different line cap and line join. 4. SVG overflow is set to visible so stroke won't get partially hidden.

Ya you can have multiple timelines starting simultaneously in parent timeline using position parameter. Take a look at following video,

Two ways, 1. Add empty tween at the end of Timeline, timeline.to({}, delayTime, {}); 2. Use delayedCall inside onComplete function, var Tween = new TimelineLite({ onComplete: function() { TweenMax.delayedCall(delayTime, function(){ this.restart(); }); } });

You can change the speed by changing timeScale on reverse. But to do that your timeline should be constructed as single parent timeline, that can contain other timelines. Take a look at following article on how you can write better animation using functions, you are already doing it just need minor tweaks. https://css-tricks.com/writing-smarter-animation-code/

Oh my turn! my turn!! PS: Sorry couldn't resist

I noticed this in Chrome few days ago, solution I came up with was using filter on svg element. Then set svg opacity to 0.01 and set position to fixed so element will stay in viewport.