Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vladlen

Continuous ticker drag

Recommended Posts

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

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

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

The core approach is as follows:

  1. Get the timeline's current progress in the onPressInit. 
  2. 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).
  3. Do the same thing as 2. in the onThrowUpdate. 
  4. 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

21 hours ago, ZachSaucier said:

The core approach is as follows:

  1. Get the timeline's current progress in the onPressInit. 
  2. 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).
  3. Do the same thing as 2. in the onThrowUpdate. 
  4. 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

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

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 });

 

 

 

  • Like 2
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×