Jump to content
Search Community

Animated profile icon

mgb test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,

So I have taken over an animation task at work and I have now built this icon with gsap: https://imgur.com/a/2vhi8
And I have two questions:

 

  1. The designer at my work don't want it to go reverse 1:1. If you look at my comment "First Part" in codepen that should not run when the animation goes reverse. (The idea is that the first bounce only makes sense one way). So how would you solve this? I could probably fix this by duplicating the entire timeline and make the changes but that would be repeating code. So how would I fix this fix this the most elegant way?
     
  2. Could one of you please review my code in general? I would love some feedback if I could do something smarter!

 

Thanks!

PS: GSAP is awesome!

See the Pen KRVWWy by faderfrost (@faderfrost) on CodePen

Link to comment
Share on other sites

Hi @mgb :)

 

Welcome to the forum.

 

I think the easiest thing to do would be scrub the timeline with the .tweenTo() or .tweenFromTo() methods. You can use those methods to animate the playhead to a time or label.  Maybe something like this?

 

See the Pen mLVXXp by PointC (@PointC) on CodePen

More info:

https://greensock.com/docs/TimelineMax/tweenTo

https://greensock.com/docs/TimelineMax/tweenFromTo

 

Hopefully that helps. Happy tweening.

:)

 

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

Thank you @PointC this was what I needed. Looking at your codepen I can now see that the last tween (which is the first in the timeline) stops very suddenly. Is there a way to override the first tween and change the ease to Power4.easeOut or something similar to make it more smooth when played reversed?

Link to comment
Share on other sites

Yes, you can add an ease to the vars object of those methods. Something like this:

 

tl.tweenTo("reverseStop", {ease:Power4.easeOut});

 

When you tween a timeline like this, you're creating a linear tween that scrubs the playhead to/from times/labels. You can add in/out eases to this tween in the vars. Sometimes it's preferable to remove the eases from the actual tweens on the timeline and make them all Linear.easeNone. You then set the eases in the scrubbing tween like I did above.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Thanks Craig! This works!
However I have to bonus questions for you :)

Is it possible to change the duration on that last tween when going reverse? It would look better if it went slower. Also, The last frame does not match the starting point. The circle is a few pixel higher then the expected result. I can see why it does this but I'm not sure how to fix it besides making two timelines.

With all these small changes to the animation when it goes backwards would it then be better practice to create two timelines instead? I like the DRY concept but I don't like to make things to complex either :)

Link to comment
Share on other sites

I'm not sure why the circle doesn't line up. I didn't look too closely at your SVG, but maybe the paths are off by a couple pixels? Just guessing. This might be a case for a separate timeline for reverse as it seems like you need really fine detailed control and that's a fast animation. It can't hurt to give it a try for comparison.

 

Happy tweening.

:)

 

  • Like 2
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.
×
×
  • Create New...