Vladlen Posted April 29, 2020 Share Posted April 29, 2020 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 See the Pen EMQWMw by sgorneau (@sgorneau) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 29, 2020 Share Posted April 29, 2020 Hey Vladlen. I don't see anything related to "pulling it" in the code. What error are you running into? Link to comment Share on other sites More sharing options...
Vladlen Posted May 3, 2020 Author Share Posted May 3, 2020 On 4/29/2020 at 8:41 PM, ZachSaucier said: Hey Vladlen. I don't see anything related to "pulling it" in the code. What error are you running into? Hi, sorry for the not-so-good example above, so I tried to implement such a demo See the Pen yLYPbVd by vladlen11 (@vladlen11) on CodePen 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 4, 2020 Share Posted May 4, 2020 The core approach is as follows: Get the timeline's current progress in the onPressInit. In the onDrag, update the timeline's progress to a new value based on the value you got in the onPressInit and ratio of the distance dragged (this.x) with the total amount to drag (your current calculation is off I believe). Do the same thing as 2. in the onThrowUpdate. Resume the timeline in the onThrowComplete. From there you just need to make sure your calculations are complete By the way, we highly recommend upgrading to GSAP 3! It has a smaller file size, a sleeker API, and a bunch of new features. Link to comment Share on other sites More sharing options...
Vladlen Posted May 5, 2020 Author Share Posted May 5, 2020 21 hours ago, ZachSaucier said: The core approach is as follows: Get the timeline's current progress in the onPressInit. In the onDrag, update the timeline's progress to a new value based on the value you got in the onPressInit and ratio of the distance dragged (this.x) with the total amount to drag (your current calculation is off I believe). Do the same thing as 2. in the onThrowUpdate. Resume the timeline in the onThrowComplete. From there you just need to make sure your calculations are complete By the way, we highly recommend upgrading to GSAP 3! It has a smaller file size, a sleeker API, and a bunch of new features. 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'); }, }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 5, 2020 Share Posted May 5, 2020 I'm no expert in Angular, but it's pretty hard to debug blindly. Could you please try recreating the error using something like CodePen, StackBlitz, or CodeSandbox? The latter two are arguably easier to use module-related code with. As a side note, this doesn't look right to me: const tl: TimelineMax = new TimelineMax({repeat: -1 }); I would think it would be this: const tl = gsap.timeline({repeat: -1}); Also in GSAP 3 you can just use ease: "none". For more information about things like that, see the GSAP 3 migration guide: Link to comment Share on other sites More sharing options...
OSUblake Posted May 5, 2020 Share Posted May 5, 2020 2 hours ago, ZachSaucier said: As a side note, this doesn't look right to me: const tl: TimelineMax = new TimelineMax({repeat: -1 }); I would think it would be this: const tl = gsap.timeline({repeat: -1}); Yes, you don't need to use TweenLite, TweenMax, TimelineLite, or TimelineMax anymore. TypeScript will get the type automatically in this case. const tl = gsap.timeline({repeat: -1}); If you do need the type, use GSAPTimeline. let tl: GSAPTimeline; // OK tl = gsap.timeline({ repeat: -1 }); 2 Link to comment Share on other sites More sharing options...
Vladlen Posted May 6, 2020 Author Share Posted May 6, 2020 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) 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