Ignore. addPause() on tweenTo

[Victor Work]

Is there a way for me to give tweenTo bypassing the pause  to have a smoother transition?

See the Pen QmqxpK by Noturnoo (@Noturnoo) on CodePen

[Sahil]

You will need to use Linear.easeNone ease on each tween for smooth transition. You can also set it globally for all tweens if you want.

 

See the Pen rdGrmR?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[Victor Work]

See the Pen rdGrmR?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

 

and how do I do when I need to ease the animations? Is there a way to set easeNone in a function?

[Carl]

Just to be clear, the addPause() were being ignored on tweenTo(). the slowing down of the speed was caused by the eases (as Sahil said)

Demo below has no addPause()

 

See the Pen vRebNb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

and to add an ease to a tweenTo() you can set that in the vars object

 

tweenTo(0, {ease:Bounce.easeOut});

 

notice the bounce on "go back"

 

See the Pen ZxXwWK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

[Victor Work]

But I need a gentle ease in the back and ease between the animations, I gave an update in the pen to illustrate

 

See the Pen QmqxpK by Noturnoo (@Noturnoo) on CodePen

 

[Victor Work]

Another example within a real need.

skip to line 200

 

 

See the Pen PQQZKq by Noturnoo (@Noturnoo) on CodePen

 

[Carl]

In that case you could try keeping all of the animations in your timeline with Linear eases and never play() the timeline. Always tweenTo() the next frame and add the ease to the tweenTo(). Doing this you will have to determine what the next label is, but getLabelAfter() will help

 

See the Pen wmPMNb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

With the solution above you will notice a problem if you are tweening to label4 (or any label) and you hit the next go tl button while the animation is happening, then you are still going to end up at label4. So you may want to disable clicking while animations happen or work on a more robust approach where you use getLabelsArray() and increment an index each time you click and then tweenTo() the next label based on the new index value. Also, be careful to check that there is a label after. In other words, you can't tweenTo() label6 as it doesn't exist.

[Victor Work]

Many thanks Carl, this will solve a lot of my problems, again GSAP saving our lives.

I love this Lib