lennco

Hi @RichardC Is it just the ease for stopping the sub you're after? // this ease just creates a forward<->back-motion var stopEase = 'M0,0 C0.124,0 0.394,0.151 0.484,0.162 0.656,0.182 0.838,0 1,0'; function _Stop(speed) { TweenLite.to(div, 0.2, { ease: CustomEase.create("custom", stopEase), x: '-=' + 300*speed }); } _Stop(0.5);

Hi @vicmortelmans I put together an example on how to combine some simultaneous tweens, hopefully matching (...) the scenario described in your post.

Hi @Johny13 Are you sure the element you're targeting is actually scrollable? You can get the current scroll position of an element like this: var body = document.querySelector('body'); console.log(body.scrollTop); I tried adding a div parent with 'overflow:scroll' and set it as the scroll container in the tween, and it worked just fine as far as I could tell. Edit: In Codepen it's the parent element of the body that gets the scrollbars.

You're very welcome

I'm sure it can be done alot better, but just added a function for clicking the circle to make it jump back to its original position. Click it again to animate it.

Hi swaranan Something like this?

Hi chapolote Adding to Sahil's answer... You can use the onComplete event to trigger a new timeline and use that as a "repeat" where you initialize it with new values.

Hi Guido After some initial testing I can conclude that there's a problem with the bounds. When it jumps, it does so to either 360 or 0. If you keep holding the mouse button down, and drag the mouse pointer once cw or ccw arround the center, it starts moving again. The behaviour is the same as if you keep pulling the mouse arround the center (and then back again) after the knob has hit max- or min bounds. Edit: Scratch that. The rotation value is increased or decreased by 360 if using bounds or not. It was just a symptom. I have no idea what's going on, but maybe someone will find the observation useful

Diaco beat me to it Anyways, here's what I came up with: Edit: movement triggers when hovering. Edit2: Made the flow feel more natural. Added a slight rotation to see it from the side. If you want to see it from the top, just remove the rotation from the stage class.

Hi Tasty, If you remove the ease on the stagger, you can clearly see why it's delayed: Using the 'visibility' property: Low duration stagger:

Hi Noturnoo, What about moving the picture to a fixed layer, and then scaling it?

More detailed explenations as to why are always appreciated, so thank you! And it all makes perfect sense after reading your post.

Ah OK, thanks.

Hi Jonathan, I only tried clicking the button like a normal person, so maybe that's why you can't replicate the problem? In either case, your solution works very well. Best of all: it doesn't require a "hack". So I think that's the one I'll go with. Where did you find the information on GSAP setting the display property at the end of the animation when using autoAlpha? The documentation only mention that it sets the visibility property. The few times I've tried using the display property in timed tweens, I never ended up with the desired result...

Thank you for the very thorough explenation and clear examples, Carl. Much appreciated. Your sugested solution also works well.

Thank you for taking the time to look at it, Sahil. I fail to see what immediateRender has to do with this particular issue though...? I edited the fiddle so you don't have to continously press the button. It will show a popup when there's a mismatch. Sometimes it runs for 20+ cycles, but it always fails at some point. https://jsfiddle.net/rvq96mht/9/

Hi, I ran into some odd behavior with TimelineMax recently. When setting 'display:none' in the timeline, and running it in reverse, everything works as expected - most of the time. Quite often though (it's completely random), the display property does not get set - or reset if you will - when reversing, leaving it at 'display:inherit' after the animation is done, as demonstrated in the fiddle. You need to open the debugger to see it (and click the button until it occurs). https://jsfiddle.net/rvq96mht/ Adding 'clearProps:display' at the start of the timeline is causing other issues, such as 'display:inherit' not being set when expanding. The behavior is consistent in both Chrome and Firefox. Any ideas?