Jump to content
Search Community

reversing animation on click causes strange behavior

kubasulek2 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, first of all i want to thank you for GSAP being awesome.  Creating my site, i noticed strange behavior. I have complex  animation, wchich goes forward/backward depending on wether element is clicked even or odd times. Everythings works pretty well exept for one part. I have svg stars empty inside with clipped rect to animate 'loading' the stars. While rest of animation works back and forth without any issues,  here works well for the first time, then each consecutive time looks like there is one more animation interfering with the rest. It,s hard to explain it precisely, due to my limited english, however it's clear in the example i attached . Just click a few time and observe the effect. For demostration purposed, I removed all well-functioning parts of animation. 

See the Pen BXLqzV by kubasulek2 (@kubasulek2) on CodePen

Link to comment
Share on other sites

  • kubasulek2 changed the title to reversing animation on click causes strange behavior

Hey @kubasulek2,


Welcome to the GreenSock Forum.


Try for example . .play(0) - here:


// .play()  begins playing forward, optionally from a specific time (
// by default playback begins from wherever the playhead currently is).
// so try:

counter % 2 ? tlSkills.reverse() : tlSkills.play(0);


Happy tweening ...




  • 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...