Update scrollTrigger values

[Mamboleoo]

Hey there,

I have a ScrollTrigger animation with fixed start & end values
 

const tween = gsap.fromTo(el, {
    background: 'red'
}, {
    scrollTrigger: {
        scrub: true,
        start: 0,
        end: 500
    },
    background: 'blue',
    ease: 'none'
});

How can I update the end value on my side? Let's say after after the user opens a modal I need to update the end value to 100.

tween.scrollTrigger.end = 100; doesn't work as it is a read-only value.

 

I found the updateTomethod on GSAP 2.0 but it seems to have been removed on 3.0

Thanks!

[mikel]

Hey @Mamboleoo,

 

Maybe this example will help you

 

start: () => start, // gets called on each refresh

 

See the Pen PoPjXPE by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[Mamboleoo]

Assigning dynamic values with functions and calling update() could work indeed!

Thanks

[chacrasoftware]

Hi, is it also possible to update the scrub value? I wanted to set the scroll value without the scrub catch up

[mikel]

 

Hey @chacrasoftware,

 

Welcome to the GreenSock Forum.

 

There are many paths that lead to a goal.
Just try something out and show us it in a small CodePen.

A small case says more than a thousand words.
Then we can better understand what you want to achieve.

 

Happy tweening ...

Mikel

 

 

[chacrasoftware]

Hi @mikel,

 

I'm new and still learning gsap along side with reactjs, so far its been a fun experience doing animation with this library!

 

Here I created an example using react with ScrollTrigger, I wanted to set the initial scroll position on mount, it works fine but when the initial item is on the far end of the list it will scroll fast down when the scrub is set to a number, I then set the scrub to true and gave the result I'm looking for but I need to set the scrub to a number again to make the scrolling smooth, is there a way to update the scrub value?

 

edit: the scrub animation not working on initial mount in the codepen not sure why

 

See the Pen qBpbbGZ by davidkhierl (@davidkhierl) on CodePen

 

Thank you!

[OSUblake]

Hi chacra,

 

Is this what you're looking for?

 

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

 

[chacrasoftware]

hi @OSUblake thank you for your response, tho is it possible to have the scrub catch up effect only applies once after the initial scroll? setting the initial scroll animates down so fast specially when I have a long list of items and I wanted to disable the catch up effect of scrub initially and update it back from boolean to number after that.

[mikel]

 

Hey @chacrasoftware,

 

Here is a concept that mixes ScrollTrigger and ScrollTo while adjusting speed to the distances.

Maybe helps for your logic.

 

See the Pen PomGKON by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[chacrasoftware]

Thank you for this concept @mikel will look into this!