[Relative values using ScrollTrigger.create]

you sir are a genius!!! thanks a million. 🍻

[Relative values using ScrollTrigger.create]

I was actually wondering, what I need to do in order to create two ScrollTriggers on the same element and attaching a tween to it, which moves it by a x value.

 

It seems like the x value is always reset to 0 first, when the new ScrollTrigger is applied. I actually thought relative values are using the current value. What am I missing here. Even setting the transform value initially doesn't seem to work.

 

PS: I'm aware that the example I posted looks like in could reduce the animations, this is not the case in the real project. Should i actually use a function to calculate the absolute xPercentage?

 

Any help would be highly appreciated.

See the Pen PoKreKp by daniel-brolli (@daniel-brolli) on CodePen

[Remove scrub of single tween from Timeline ScrollTrigger]

ok, i was afraid you will say that. but now I have everything that I need. thanks for your help man. 

[Remove scrub of single tween from Timeline ScrollTrigger]

ok, got that. but what would be the best approach to have for instance two tweens which should be sequential the first should be controlled by scrubbing and the second should have an absolute time span, but both on the same element. with the example @OSUblake posted, the tweens are not on the same timeline. it seems like my head is somewhere stuck in the concept

 

 

[Remove scrub of single tween from Timeline ScrollTrigger]

thanks for the reply. I was kind of aware of that. but creating a standalone scroll trigger on the same element, but not on the timeline, works as intended. isn't that kind of the same thing.

 

The problem I'm trying to solve is, that I have a surrounding scrolltrigger responsible for drawing an animation on a canvas and have certain container appearing synchronized with that, but with absolute values as duration and not linked to the scrubbing scrolltrigger. So my initial idea was to define a parent timeline with scrubbing true, have a tween on that timeline responsible for updating the frames and furthermore add more tweens with scrubbing turned off.

 

is there any easier solution I'm missing here? 

[Remove scrub of single tween from Timeline ScrollTrigger]

Hey,

 

I was actually wondering if I can disable scrubbing inside of an existing timeline as well. as you can see in the following codpen, it works by creating a custom standalone scroll trigger on the same element, but is not working as expected by directly using it inside of the timeline. Am I missing something here?

 

See the Pen XWawjrG by daniel-brolli (@daniel-brolli) on CodePen

 

PS: the reason I'm using that many timelines, is due to the fact, that my real project is setup in such a way. I just got rid of all the unneeded things