alan0buchanan

I have 3 elements that appear slowly after the page loads (please see Codepen link). I am using TweenMax.staggerFrom to achieve this. Because the animation is being applied with JavaScript and there are no defaults set to hide the elements in CSS (eg `opacity: 0`), is there not a chance that the user could see a flash of the content (pre-JavaScript load) before it disappears and slowly fades in again?

@Jonathan that is actually awesome. The only issue now is that it looks like the ease is also reversed. Is there a way to get around it so that the ease is always the same?

The example Codepen shows a text input whose label changes position depending on the input's `blur` and `focus` state. Given `TweenLite.set()` is used to initialise the position of my label element, what is the best way to get back to this position without repeating code? In my example, this is what I am currently doing; firstly, setting the coords of the label's initial position: const initCoords = { y: 62, x: 10 }; Then initialising the position using the coords: const initLabelPosition = () => TweenLite.set($label, { ...initCoords }); Then, when I need to toggle back I am again inserting the `initCoords` into a `TweenLite.to()`: const moveLabelInsideInput = () => TweenLite.to($label, animationDuration, { ...initCoords, fontSize: labelFontSizes.blur, ease }); I think I might be missing an easier way to do this. Is there a better way I can toggle back to the initial position created by `TweenLite.set()`?

I may be wrong, but it seems like all usages of GSAP – even very recent ones – do not make use of ES6 syntax. Most noticeably sticking to `var` instead of `const` or `let`, and no use of arrow functions. I wonder why this is, considering: • the now extensive browser support • ease of using Babel for transpilation • ease of using ES6 syntax in Codepen without any external dependencies Is it just that everyone is used to ES5 and is happy with its syntax? Is it that people are unaware of ES6? Is it an 'unwritten rule' of using GSAP that people just use ES5 and likely always will? Or something else?

In my Codepen example, there is a gold circle. When you click the gold circle, it moves around the page using `x` and `y`. If you click the circle while it's moving around, another timeline animation for the circle gets queued and runs after the initial one has finished. I want to prevent this behaviour. My instinct tells me to use lodash `throttle`, but I feel there should be a better way to do this, especially as I would need the duration of the animation to use a throttle. I want any click to the circle to have no effect if the animation is in progress. Is there a `TimelineMax` method I can use to achieve this?

Here's the site: http://mojobar.co.uk/ I believe the animations are build with GSAP based on what Wappalyzer tells me. When you hover over a tile, a skull becomes visible within the tile. The skull moves around in a 'floaty' way - yoyoing up and down and rotating slightly. When you hover over the skull, it tracks your mouse movement to an extent. From dev tools I can see it's animating a combination of `transform: translate()` and `transform: matrix()`: I thought these animations were really neat. Any idea if there is a GSAP plugin/technique to achieve them?

Thanks @PointC and @GreenSock, I didn't realise I could access the duration of a Timeline like that. Looks like WiggleBounce is ideal for what I was looking to do.

In my bounce codepen, I am using a `Timeline` to tween `y`. These durations are all different as the bounce distance changes, as the ball loses momentum. I am also tweening `x`, which is a single duration so that the ball travels. I want the `x` duration to be the same as the sum of all the `y` durations. Currently, if I add another bounce to my `y` sequence, it will throw off the `x` duration. Is there a nice way to do this so that my `x` duration just works without me having to manually tightly couple it to the sum of the `y` durations?

In the Codepen attached, I have a map that contains a large image of the map. The features of the map are: • You can navigate around the map (using the Draggable API). • You can zoom in and out on the map using scroll. The zoom behaviour is handled by a `wheel` event. The default scroll behaviour is prevented, and a `TweenLite.to()` is used to change the `scale` value according to the scroll direction. It works fine, except when I try to place a transition between the two different `scale` values. When a duration is placed on the `TweenLite.to()` (in my example it's `1`), the transition happens, but it's laggy as you'll see. Is there some way I can achieve a nice smooth transition in this case?

I am using azazdeaz's great React GSAP library on a project. Thanks for your work azazdeaz! In my demo, you can see a bubble entering in from the bottom and leaving to the top. However in the `render` method's `return` you can see that more bubbles are meant to render based on the `state`'s `phase` value. The state value is incrementing as can be seen in the console log and React Dev Tools. So I guess the `slideAnim` function isn't updating when the `render`'s contents update. First solution I thought of was to run the animation again from a `componentDidUpdate`, but then it runs many more times than I want. As I write this I realise using `ReactCSSTransitionGroup` might be the ideal solution here. Could there be a neat solution for this situation using the React GSAP library?

In my Codepen is an example of 4 bubbles animating. Each one enters from the bottom and pause in the middle of the page, then leaves upwards. However, I want to be able to achieve this with one animation, so that it doesn't matter how many Bubbles are in the page, it's going to fire them all up one by one just as it is in my example. I had experimented a bit with `staggerTo`, `staggerFrom` and `staggerFromTo` which I understand are intended for this purpose, but I couldn't quite nail the exact desired functionality. Is there a solution for this?