Problem with the animation (React)

[Farrel]

Hey im new to gsap and react just playing with it for several days and im stuck, so there is 2 sections the right one is working fine but the left one is not i want it to scroll from bottom to top when i scrolled it down and vice versa , but when want to scroll it down the second time the animation just do it from top to bottom means it works only the first scroll any ideas?, or is there something wrong with my code? ive been messing with it for days  

 

 

https://codesandbox.io/s/magical-cerf-e6co5c

above is the demo links

 

any helps is appreciated

[GreenSock]

5 hours ago, Farrel said:

but when want to scroll it down the second time the animation just do it from top to bottom means it works only the first scroll any ideas?, or is there something wrong with my code?

Yep, it's just the logic in your code - in your  showNextPanelText() function, you ALWAYS animate the exiting text upward (y: "-100%") and the new text to 0 from wherever it happens to be at that moment (which is always from -100% after the first time through). See the issue? You'll need to adjust your animation logic accordingly, like make it directional. You can check the ScrollTrigger's "direction" property to see if it's 1 or -1. Sorta like:

yPercent: yourScrollTrigger.direction < 0 ? 100 : -100

 

Minor note: I'd strongly recommend using the dedicated yPercent property rather than y. In other words:

// better:
yPercent: -100

// not as good:
y: "-100%"

Because that gives better flexibility since you can combine them. Plus you don't have to use a string with "%" on the end. 

 

Does that clear things up? 

[Farrel]

8 hours ago, GreenSock said:

Yep, it's just the logic in your code - in your  showNextPanelText() function, you ALWAYS animate the exiting text upward (y: "-100%") and the new text to 0 from wherever it happens to be at that moment (which is always from -100% after the first time through). See the issue? You'll need to adjust your animation logic accordingly, like make it directional. You can check the ScrollTrigger's "direction" property to see if it's 1 or -1. Sorta like:

yPercent: yourScrollTrigger.direction < 0 ? 100 : -100

 

Minor note: I'd strongly recommend using the dedicated yPercent property rather than y. In other words:

// better:
yPercent: -100

// not as good:
y: "-100%"

Because that gives better flexibility since you can combine them. Plus you don't have to use a string with "%" on the end. 

 

Does that clear things up? 

 

thanks for the heads up ill get around with , yeah i did realize that it must be my logic code didnt know there was direction property in scrolltrigger guess ill read the docs more