Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nickelssen

Timeline not playing properly

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×