reactjs Animate letters appears by scrolling , ScrollTriggger

[emirzaki23]

Hey  Greensock! I was just wondering if I could get some assistance on my project.

 

I want to create animation letter that appear one by one when scrolling, right now this is my progress https://stackblitz.com/edit/react-xogadh?file=src%2FApp.js I kinda hope when user scroll to the second section they have to scroll one by one/slowly to make the all letters appears. I've tried using pin and adding values "end" more  but it makes section after them got pushed down and it some breakpoints it make the animation section got scrolled too.  is this the right way to achieve it?

 

 

Thank you for any help. Sorry for my english

See the Pen by (@) on CodePen

[mvaneijgen]

Hi @emirzaki23 welcome to the forum!

 

Your code seems perfectly fine and seems to be exactly doing what you tell it to do (btw please link to the project code directly including the file you want us to look at, like so https://stackblitz.com/edit/react-gargu5?file=src%2FApp.js) so that we can dive directly into the code. 

 

I'm not completely sure, but I think what you're asking is when the visitor scrolls you want a specific animation to happen. If that is true you are not looking for ScrollTrigger, but you are looking for the  Observer plugin https://gsap.com/docs/v3/Plugins/Observer/

 

Where ScrollTrigger ties all the animations to the scrollbar, can the Observer plugin watch for scroll events and then do specific things. Here is a pen that has almost the same logic as your pen, but with the Observer plugin animating to specific labels on a timeline.

 

See the Pen GRzrPPy by mvaneijgen (@mvaneijgen) on CodePen

 

And here a pen that mixes ScrollTrigger and the Observer plugin to release the scroll again if a certain condition is met. Hope it helps and happy tweening! 

 

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

 

[emirzaki23]

@mvaneijgen thank your for responding, this is the link for stackbliz https://stackblitz.com/edit/react-xogadh?file=src%2FApp.js.

 

so basically of demo i shared, when we scrolling and enter the banner  section the letter appear one by one as we still scrolling down this section. do you think is possible to change from scrolltrigger to observer and still have the same result?

 

 

Thank you!

[mvaneijgen]

Yep, then the Observer plugin sounds like your best bet, just check my demo above. This will be the logic you'll need, just try your hand implementing it and when you have any questions just post back here with a demo with what you've tried and what you're stuck with. Hope it helps and happy tweening! 

 

See the Pen GRzrPPy by mvaneijgen (@mvaneijgen) on CodePen

[emirzaki23]

 

@mvaneijgen Hello do you example of implement Observer using React js?, i having difficulty to convert your demo to react code, thanks

[GSAP Helper]

There's a React guide here: https://gsap.com/react 

 

Good luck! 👍