AkhilRaja Posted June 15, 2021 Share Posted June 15, 2021 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 More sharing options...
Solution PointC Posted June 15, 2021 Solution Share Posted June 15, 2021 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. 4 1 Link to comment Share on other sites More sharing options...
AkhilRaja Posted June 16, 2021 Author Share Posted June 16, 2021 wow thank you so much, i spent so much time to figure it out but i didnt try fromTo: , this solves my problem and i love using GSAP and GSAP community is wonderful. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now