[Controlling Speed of Tween]

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);

 

See the Pen Mrmwow by lennco (@lennco) on CodePen

 

[TweenLite scrollTo is messed up by simultaneous height animation]

Hi @vicmortelmans

 

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

 

See the Pen YYZmqw by lennco (@lennco) on CodePen

 

[scrollTop not working on ios]

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.

[Tweenmax svg circles change position randomly]

You're very welcome

[Tweenmax svg circles change position randomly]

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.

 

See the Pen eygvbp?editors=1010 by lennco (@lennco) on CodePen

 

[Tweenmax svg circles change position randomly]

Hi swaranan

 

Something like this?

 

 

See the Pen qpROzO?editors=1010 by lennco (@lennco) on CodePen

 

[TimelineMax - change values on repeat]

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.

 

See the Pen dJOVVw by lennco (@lennco) on CodePen

 

[Draggable jumps to end]

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

[Gsap Slinky animation]

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.

 

See the Pen mpEVGZ by lennco (@lennco) on CodePen

 

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.

[Fake Typewriter effect - non intended delay on start]

Hi Tasty,

 

If you remove the ease on the stagger, you can clearly see why it's delayed:

 

See the Pen XVdyKJ by lennco (@lennco) on CodePen

 

Using the 'visibility' property:

 

See the Pen RxaqGL by lennco (@lennco) on CodePen

 

Low duration stagger:

 

See the Pen PENxbe by lennco (@lennco) on CodePen

 

[Element go to middle screen and Scale to 100(vw/vh)]

Hi Noturnoo,

 

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

 

See the Pen JMGVxz by lennco (@lennco) on CodePen

 

[Inconsistent behavior]

More detailed explenations as to why are always appreciated, so thank you!

 

And it all makes perfect sense after reading your post.

[Inconsistent behavior]

Ah OK, thanks.

[Inconsistent behavior]

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...

[Inconsistent behavior]

Thank you for the very thorough explenation and clear examples, Carl. Much appreciated.

 

Your sugested solution also works well.

[Inconsistent behavior]

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/

[Inconsistent behavior]

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?