the bug happens when trying to combine the two scenarios into one, it works well as long as the left and right arrows are not clicked, but if any arrow gets clicked (it's more obvious if you click the arrows more than one time) the animation seems like it lost the synchronization. I'm not sure if it could be fixed using .kill()to destroy the Tween and then re-initialize it but I'm not quite sure how to achieve that.
Making a content slider but having a synchronization issue
in GSAP
Posted
Trying to build a content slider where the slides are animated automatically as well as by using next and previous arrows based on this
See the Pen LckBh by bassta (@bassta) on CodePen
, while I could manage to do each case alone:See the Pen jLJyaL?editors=0010 by Mi_Creativity (@Mi_Creativity) on CodePen
See the Pen ZJPLEJ?editors=0010 by Mi_Creativity (@Mi_Creativity) on CodePen
.the bug happens when trying to combine the two scenarios into one, it works well as long as the left and right arrows are not clicked, but if any arrow gets clicked (it's more obvious if you click the arrows more than one time) the animation seems like it lost the synchronization. I'm not sure if it could be fixed using
.kill()
to destroy the Tween and then re-initialize it but I'm not quite sure how to achieve that.Link to the same question on stackoverflow
Thanks in advance
See the Pen RZdKer?editors=0010 by Mi_Creativity (@Mi_Creativity) on CodePen