Jump to content
Search Community

A tag click event GSAP timeline animation not working properly

AkhilRaja test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

I created this very simple animation and what i wanted to achieve
- when when click one A tag animation will start and end
- when we click while animation is still paying it will restart
- it will play animation again after animation completed 

what problems im experiencing 
- some time animation wont play
- some times its play but glitchy slow motion
- it only play one time and dont play after clicking again

See the Pen bGqOzvB by AkhilRaja (@AkhilRaja) on CodePen

Link to comment
Share on other sites

  • Solution

The problem here is you can interrupt the tween at any time and then start a new tween to 360 with a duration of 3 seconds. So if the current animation is at 330 degrees and you interrupt it with a click, it will then animate the final 30 degrees in 3 seconds making it seem like slow motion. In this case I think using a .fromTo() tween would be the easiest fix.

 

See the Pen 6ef0faf495c9000cf1f553f5f7bbb773 by PointC (@PointC) on CodePen

 

You can also create your tweens/timelines outside of your event handler and simply play/reverse/pause etc. them with your clicks.

 

Hopefully that helps. 

 

Happy tweening.

:)

 

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