Vladlen

Guys, thank you very much for your help. I studied for a long time to do this and I managed to make the necessary animation and transfer it to the angular. It is very cool that you respond fairly quickly and help with advice. I hope that soon I will learn how to do animation and give advice to others)

Hey. Thank you so much for guiding me in the right way. I did it all in codepen. But, when I started to transfer this structure to the angular, I encountered a problem. I installed gsap 3 and am trying to remake my code for version 3 of gsap. I can’t understand why the progress is not being updated, why during the drag the line stands still. I think this should not be affected by the fact that I do not use throwProps what could be the problem? gsap.set( tickerWrapper , {x: -tickerWrapperWidth } ); const initDuration = tickerWidth / this.speed; const loopDuration = tickerWrapperWidth / this.speed; let transformX; const tl: TimelineMax = new TimelineMax({repeat: -1 }); tl.to( ticker , 0 , { x: -tickerWrapperWidth, ease: Power0.easeNone } ); tl.to( ticker , loopDuration , { x: -tickerWrapperWidth * 2 , ease: Power0.easeNone, onUpdate: () => { // console.log('onUpdate= ', tl.progress()); } } ); Draggable.create(tickerWrapper, { type: 'x', trigger: ticker, onPressInit: () => { tl.pause(); }, onDrag: () => { transformX = (gsap.getProperty(ticker, 'x') + tickerWrapperWidth) % tickerWrapperWidth; tl.progress(Math.abs(transformX) / tickerWrapperWidth); }, onDragEnd: () => { transformX = (gsap.getProperty(ticker, 'x') + tickerWrapperWidth) % tickerWrapperWidth; tl.progress(Math.abs(transformX) / tickerWrapperWidth); tl.resume(); console.log('onDragEnd'); }, });

Hi, sorry for the not-so-good example above, so I tried to implement such a demo https://codepen.io/vladlen11/pen/yLYPbVd I kind of pass value into progress and think it should start from a new value. But it is reset, and I don’t understand a bit how to do it, depending on where I am pulling (left or right), the ticker inserted a clone there and the line never ends

Hey. I lost a lot of time trying to implement a similar ticker with the ability to pull it along the x-axis. I found you have an example that almost suits me, but I can’t get to ask him a new position when I release the ticker and keep it playing

Hi, a very interesting example and it came in handy for me. But I'm trying to modify it so that the creeping line could be dragged with the mouse forward and backward. Then she would again play from a new position. The problem is that when I release the mouse, the line does not update the position. Could you suggest the right decision?