How to smooth update the text with scrolltrigger

[Ildar Khusainov]

Hello!
I'm new in gsap.
I'm just say - its absolutely base things.

 

As you might have noticed from my code, I want to change the text as I scroll. In my example, I used the change via the document object, since it takes much longer to change the text when using the textContent property (I didn't specify a delay or duration at that point). And it seems to work fine, but if you go in the opposite direction - there is no reverse change as there would be with the scrub property. I also want to change the logo to CHNG after the "#create" animation is finished, using all the scrub benefits - reverse change. 

I'm using a translator, please forgive the quality of the language(And js and plain English).

Thanks!!!

See the Pen NWomPby by poshlit (@poshlit) on CodePen

[mvaneijgen]

Hi @Ildar Khusainov welcome to the forum!

 

ScrollTrigger can only be on the timeline not on individual tweens of the timeline. I've forked your pen and copied your most elaborate ScrollTrigger to the timeline and comment everything else out.  You're also creating ScrollTriggers based on other scroll triggers, this is not inherently wrong, but a lot is happening at the moment that it is hard to see what is going one right not and mostly to find what is going wrong. Can you maybe make a simpler demo and lets focus on one element at a time?

 

See the Pen MWLRaZV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

My advies remove ScrollTrigger and just focus on the animation, see below an example. Where there a tweens that change the text, I've used our Scramble text plugin on some of the tweens and on others just textContent. By just creating a timeline with individual tweens you get all the logic with scrolling back and forth for free! Hope it helps and happy tweening! 

 

See the Pen mdvgVbP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen