Jump to content
Search Community

Timeline not playing properly

Nickelssen test
Moderator Tag

Recommended Posts

So I had to make three animated icons with GSAP. And i made them separately and everything was fine but then i had to combine them into one page and the second icon started to bug in its animation. I think it has something to do with the timeline being paused an set to play but i am really at a loss.

I hope that a fresh eye can spot my mistake and can help me. And also pleaseeee don't mind my beginner coding.

 

 

Icons Master.zip

Link to comment
Share on other sites

Now I haven't delved too much into your code but by looking at the animation, you probably need to restart the clips (two/twob rollover + rollout), plus have a way to determine if either animation has finished, otherwise you'd run into an issue if you rollover/rollout before the animation completes and having it jump back to the beginning of the state and playing from there. Since it looks like it's just going back to the default state, a better option for two may just be to play the timelines in reverse or yoyo.

  • Like 2
Link to comment
Share on other sites

Hey Nickelssen and welcome to the GreenSock forums!

 

I think you'd really like GSAP 3. It can save you a bunch of writing code (and therefore time) by using the new defaults behavior! That way you don't have to declare the same properties over and over each time. It also have an improved API, smaller file size, and a bunch of other new features so why not switch over? For more information go here: 

 

GSAP 3 also has a handy feature for the position parameter. It's "<" and what it does is align the start of the tween it's applied on to the start of the previous tween in the timeline. That way, if you change the start time of the tween it's pointing to, you don't have to manually update every other tween that it's referencing! Super handy for being able to move tweens around in a timeline.

 

The core of your issue is what davi said: when someone quickly hovers and then unhovers there are conflicting tweens. In other words, both animations are trying to tell specific pieces where they should be, which causes the jump. You could work around that by queueing up the animation to play once the other one finishes (the easiest way to do so would probably be to make one big timeline and then go between labels on hover and unhover) but more commonly people just reverse out of the original animation. The easiest way to do that is to have a reference to the animation that plays on hover and call .reverse() on it in the unhover function. If you need a different animation for the unhover (i.e. not just reversed) then you should use the other approach.

 

Some articles that might be helpful to you:

 

  • Like 2
Link to comment
Share on other sites

5 hours ago, davi said:

Now I haven't delved too much into your code but by looking at the animation, you probably need to restart the clips (two/twob rollover + rollout), plus have a way to determine if either animation has finished, otherwise you'd run into an issue if you rollover/rollout before the animation completes and having it jump back to the beginning of the state and playing from there. Since it looks like it's just going back to the default state, a better option for two may just be to play the timelines in reverse or yoyo.

 

 

Thank you so much! I reversed the animation of the two timeline in the rollout and that fixed it. You are a real life saver.

 

 

 

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