Jump to content
Search Community

JJeong

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by JJeong

  1. Hello, I'm trying to use this https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/#usage helper function and because I use react / typescript in my project, I'm getting typescript arrows when trying to paste the helper functions codeblock. I was wondering if there is a typescript version of this helper function and if not, how can I import types for gsap?
  2. Hello, I was able to create a continuous rotating ticker based on the forum answer here I've also added a Draggable plugin to allow the user to drag the ticker and a feature where if a user hovers their cursor, the ticker would pause. Draggable plugin mentioned above https://gsap.com/docs/v3/Plugins/Draggable/ My issue is that if the user drags to the end of the ticker, the ticker won't repeat since the translateX value is not updated / tracked during the drag process and the animation only repeats once the xPercent reaches 100. I'm having issues with two ideas I have in mind. 1. What would be the best way to calculate the position of my ticker when its being dragged? 2. If a user scrolls all the way to right, they will end up at a blank and the ticker will continue to rotate on a blank screen and only repeat once it hits xPercentage of 100. I was wondering if there is a way to force repeat my .to animation while the user is dragging the ticker? My plan is to have the ticker element to have two arrays and set the xPercent at -50. So it will look like the ticker is continuously rotating. But if the user drags the ticker past the -50 xPercentage, is there a way to restart the animation?
×
×
  • Create New...