How can I possibly increase my data-motion as I scrub my scrollTrigger or maybe get the output of my data-motion while I'm scrubbing.

[Xenex122]

My explanation is same as the title...Can I increase my data-motion whenever I'm scrolling down in the screen and also get its new value of "motion" as it keeps scrolling up or down 
 

                        scrub: function s(e) {
                            velocity = velocity * 2
//                           This doesnt console.log the velocity.
                            console.log(velocity)
                            return speed/2
                        },

You can see it here in the javascript part..the scrub is working though but I can't console.log out the velocity or change the data-motion to "velocity".. What I mean here while I'm scrolling I'm supposed to get some value in the console either scrolling Up or Down.

See the Pen MWQPgOo by myth-vince (@myth-vince) on CodePen

[Cassie]

This has me a bit baffled I'm afraid.

Are you trying to update the position of the y axis dependant on how fast someone scrolls? 

Scrub is just numeric - you can't use a function-based values there I assume because it shouldn't really be dynamically updated. I imagine it would be very hefty on performance. 

Maybe you're looking for onUpdate callbacks and getVelocity()?

https://greensock.com/docs/v3/Plugins/ScrollTrigger/getVelocity()

[Xenex122]

Oh I see I've updated it now but I can't pass my const "velocity" inside of it. I want to increase the amount of "velocity" not the getVelocity() that you are talking about. I've updated it in the below of scrub 

 

onUpdate: self => {
                              const velocity = velocity*2
                              console.log(velocity*2)
                          }

See the Pen MWQPgOo?editors=1111 by myth-vince (@myth-vince) on CodePen

and it giving an error in console like 
 

Quote

Uncaught ReferenceError: Cannot access 'velocity' before initialization

EDIT: I also try getVelocity but I can't pass it to the "velocity" const. 

 

velocity = self.getVelocity()

EDIT 2:

Oh nevermind I should put it as "let velocity" not "const velocity" my bad..don't mind me I got it.

[Cassie]

Also just a note - that y value in your tween won't change as you update the velocity, that's precalculated, it's not dynamic.

I'm not entirely certain what you're after but if you want to update the y position as you scroll you'll need to update that in the callback 

Something like this demo

See the Pen xxXadQJ by GreenSock (@GreenSock) on CodePen

[Xenex122]

Oh this really looks hard...

[Xenex122]

@Cassie I'm almost close to it but there is something wrong here..Instead of the stroke-text should be the one moving..The main text is the one moving..Look at this 


Do I have something to add here ? or what?

let Velocity = gsap.quickTo(layer,"y")

Update Its kinda work fine for me now 

 

 onUpdate: self => {
                            // const velocity = velocity*2
                            console.log(self.getVelocity());
                            // console.log(velocity*2)
                            velocity = (self.getVelocity() / -25) * speed
                            Velocity(velocity)
                        },

this works fine now @Cassie thanks.

[mvaneijgen]

I've got something working, but my values are off and I have the feeling there is a better way of writing this. 

 

See the Pen QWQZbjb?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen

[Cassie]

Are you trying to do something like this pen without scrollSmoother?

See the Pen bGaWjpw by GreenSock (@GreenSock) on CodePen

[Xenex122]

Just now, Cassie said:

Are you trying to do something like this pen without scrollSmoother?
 

 

hahahaha...to be honest yes..I'm finding a way to do it without using it hahaha..

[Cassie]

Which bit - the header text animation with the outlines or the staggering effect further down the page? If you're wanting to do the staggering that's going to look really awkward without smooth scroll. When people use mousewheel without smoothing the velocity will jump.

 

I'd just suggest using ScrollSmoother to be honest.

[Xenex122]

2 minutes ago, Cassie said:

Which bit - the header text animation with the outlines or the staggering effect further down the page? If you're wanting to do the staggering that's going to look really awkward without smooth scroll. When people use mousewheel without smoothing the velocity will jump.

 

I'd just suggest using ScrollSmoother to be honest.

I see but..onUpdate function there is a lot of self  function call right like? rather than self.getVelocity() is there anything related on it? I don't find anything here in the docs or other things that can be used in self.function callbacks. ???

[Cassie]

If you're trying to do the header animation that's nothing to do with velocity.

See the Pen wvyYKag?editors=1111 by GreenSock (@GreenSock) on CodePen

I don't know what this means? Are you asking what self is in this context?

Quote

I see but..onUpdate function there is a lot of self  function call right like? rather than self.getVelocity() is there anything related on it? I don't find anything here in the docs or other things that can be used in self.function callbacks. ???

 

[Xenex122]

1 minute ago, Cassie said:

If you're trying to do the header animation that's nothing to do with velocity.

 

 

I don't know what this means? Are you asking what self is in this context?

 

 

 

Yes all inside the self functions...cause I believe there is something more than self.getVelocity right?

[Cassie]

I got ya - So they're called 'callbacks' and self refers to the ScrollTrigger.

From the docs -

 

Quote

onUpdate

Function - A callback that gets called every time the progress of the ScrollTrigger changes (meaning the scroll position changed).  The onUpdate callback receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity(). )

 

 onUpdate: self => {
    console.log("progress:", self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity());
  }

 

If you log out self to the console you'll be able to see what's available to you! Hope this helps.