Ironessence
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Ironessence
-
-
I've been having a lot of issues with the pin functionality on React. Mainly, I'm using the exact code from this CodePen, with npm install gsap@latest. (3.11.4). What it does is, when it reaches the "start" mark, it will automatically take the element and place it and the position specified first in the "end" string. For example:
start: 'top top',
end: '+=1000',
when the element reaches 'start', it will automatically go down by 1000. Which is faulty. On codepen, changing the version of the gsap package does not affect anything, it still works. in my React application, same code from codepen behaves differently on 3.11.4 vs. 3.9.1.
For now, I will keep using 3.9.1 even tho it's old. However, I think somebody might want to look into that. Hope it helps some people.
Video:
Please observe the behavior of the "Nav" element on the two gsap versions.
See the Pen LYeNwOv by tripti1410 (@tripti1410) on CodePen
React+GSAP scrollTrigger pin is faulty on v. 3.11.4 but works on 3.9.1
in GSAP
Posted
This was, indeed, the issue! What I've done now is esentially I've used the article you provided as inspiration, and before I had a useEffect without cleanup & context, that simply said gsap.timeline( animate here etc.). Thank you for your help!
Now, the useEffect looks like this (for other who run into the same issue and need a quick fix) :