How to apply "elastic.out" to each yoyo iteration?

[hey]

 

I'm super new to GSAP and JavaScript in general. Trying to create a morphing logo for my website. Will take step by step.

 

My first step is trying to figure out how to apply "elastic.out" to each yoyo iteration. Currently, the first iteration (which plays forwards) has "elastic.out" as intended, but the second iteration (which plays backwards) has "elastic.in", I guess because it's yoyo, which reverses everything. 

 

Is there a way to have "elastic.out" when playing forwards and backwards? Thanks. 

 

 

See the Pen WNBQMYW by alananal (@alananal) on CodePen

[mvaneijgen]

Hey, Hi, Hello, @hey welcome to the forum!

 

30 minutes ago, hey said:

I guess because it's yoyo, which reverses everything. 

Correct! You have to view a tween as a movie and with reverse you'rre literally grabbing he playhead and dragging it backwards.

 

But GSAP gots you covered, what you can do is manipulate the tween with another tween 🤯! I've changed your tween to a timeline not strictly necessary, but timelines are just so much more powerful. And then have a function with that calls a .tweenTo() (when you got some spare time it is a good idea just to give the docs a once over, you'll be surprised how much has already been thought of!) method on the timeline and tweens to a duration of 1 or back to 0, with the ease you want applied. Hope it helps and happy tweening! 

 

See the Pen dyEYmBr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[hey]

Thank you for the reply. For some reason, the elastic animation is not as smooth as the original. I'm gonna play with it some more.

[mvaneijgen]

You're right, then maybe just calling a new tween each time you want to morph, this way it always plays 'forward'.

 

 

Hope it helps and happy tweening! 

 

See the Pen QWRjzmO?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[hey]

Thank you, Mitchel! 👌