Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Victor Work

Ignore. addPause() on tweenTo

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 5
Link to comment
Share on other sites

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

 

 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

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

I love this Lib

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×