TaiwoJazz

I will go back and come up with a better logic for this. Thanks.

@GreenSock Thanks for taking time to provide the above demo. I tried as much as possible to keep it simple in the first demo i provided above. I didn't include the snapping feature as it makes it more unnecessarily complex. I have made some changes and i have achieved 100% of the desire result, thanks to your demo. I think this code monitoring scrollY is causing the flicking so i fixed that by removing the below key: value pinType: 'transform', My forked demo can be found here https://stackblitz.com/edit/react-a8iwqz?file=src%2Fviews%2FLayers.js,src%2Fstyle.css

Hi guys. It's me again. I'm trying to achieve this animation where the text get it's original color and also remove the image overlay. I think my current logic can be better and i shouldn't have to create multiple timelines but i'm kind of lost in it. Here is my demo https://stackblitz.com/edit/gsap-react-basic-f48716-59toq4?file=src%2FApp.js The text on the left and the image on the right are supposed to play together and change to the next one till the last item and then we unpin.

@RodrigoTanks for the help @GreenSock Thanks for the help. The animation will work as expected if the panel height is lesser than 100vh but not more then 100vh. This was the problem i was facing before. As Rodrigo has previously said, i may have to make sure that the panel height are 100vh to achieve that effect.

Waoo, thanks for that observation, I just noticed that now. You are right. First of all, the minimal demo was actually created from this starter template https://stackblitz.com/edit/react-6rzfpp?file=src%2FApp.js Let's focus on the Layers page. The issue is that, the sections in the layers page must be 100vh. What we have content that are more than 100vh, and i still want to maintaining the layers animation. Once we scroll down to the end of each layers, it looks like it's pin while the other section overlay it. But this time, the height is not mandatory 100vh

I made a little bit of modification to React layer pinning but i noticed that it only work with fixed height and "top: 0" css set on the ".panel" If the top: 0 is comment out, the first page will scroll the entire height but the layer will no longer work. Here is a link to the my minimal demo https://stackblitz.com/edit/react-1af7mc?file=src%2Fviews%2FLayers.js,src%2Fstyle.css

Yeah. Much understood now. Really appreciate your time. 💯

@Rodrigo I must say that i really do appreciate your effort and you time. Sometimes it can just be very funny considering that fact that i kept looking at that component and i didn't notice that added line. I was more fixed on Scroll.js component. Thanks a lot. God bless you.

Check this yet?

You the best @Rodrigo I hope you enjoyed your vacation and we didn't bother you too much gsap issues lol

Got it. Thanks. 💝

I think the thread you sighted has lost the context. Looks like the user updated his code with your solution so i was unable to actually see the changes form the code you make changes to and the changes you make to the code in the Scroll.js file

Nice. I understand how things work here during the weekend. I just want to properly understand which is better: Tag a moderator or create a new Thread Thanks a lot for the clarification. Appreciate it. ❤️

Thanks for the @Cassie But is there a community guidelines?

Quick clarification: I acknowledge that the moderators in this GSAP forum are putting in significant effort to address all the questions and issues. However, I would like to clarify the proper way to utilize this community without violating any guidelines. If a question hasn't been marked as solved or, for some reason, has been pushed down due to other inquiries, what is the best approach to bring the question back up without resorting to unnecessary tagging of moderators, as this is also against the rules? Thanks

Hi there. I have gone through the link you provided and i have implemented the changes mentioned there. However, the issue still persist. Not sure if it's because i'm using react and the other example is in NextJS. Here is a demo after the implemented changes. https://stackblitz.com/edit/react-spyzevefwe?file=src%2Fviews%2FScroll.js @Rodrigo Kindly take a look at the link above. Not sure why it's still now working. Thanks.

Hi Guys. This should be a very straight one. So i have this animation that uses scroll trigger and pinned the page. Pretty smooth with no issue. Check it out https://stackblitz.com/edit/circle-scroll-trigger?file=src%2FApp.js Now i have another project that uses React page transition. So i added the above animation to the scroll trigger page. Check it out here https://stackblitz.com/edit/react-spyzevefwe?file=src%2Fviews%2FScroll.js The issue comes when i switch between pages and i tried to scroll down to the animation, It just disappeared. But if i refresh the page, everything works fine. I think the page transition is interfering with the scroll trigger animation. Appreciate all the help i can get. Thanks.

Thanks mate. I guess I will switch over to React.

Hi guys. Here is a starter code provided by GSAP team on Page Transition with NextJS https://stackblitz.com/edit/nextjs-13cw4u?file=components%2FTransition.js I however discovered that it doesn't work with NextJS app router but works with page router. In app router, the exiting route and the entering route is always the same thing. I will appreciate if someone can create a template for this page transition using App Router. Thanks

Thanks @Rodrigo Final look here https://stackblitz.com/edit/candour-training?file=src%2FApp.js

Hey guys, It's been like almost 48 hours i have been doing a lot of try and error trying to replicate the below animation. I'd appreciate if anyone can help fork and modify my minimal demo or maybe is something like that has been created before and the code is available in JavaScript, i can convert it to React. Please don't mind my code, i have been modifying for hours https://stackblitz.com/edit/candour-training?file=src%2Fstyle.css,src%2FApp.js Here is a short video of it on Loom https://www.loom.com/share/9cebdfd4a29f4c41954094823e57481b?sid=7e8c4e1e-013d-430b-a654-4cfa4139740c The animation itself can be found on https://unikorns.agency/ homepage in case you want to check Thanks in advance

Yeah, make sense. Thanks.

Why do i have that warning in the console in this simple minimal code https://stackblitz.com/edit/gsap-react-basic-f48716-mzpxvt?file=src%2FApp.js

Thanks everyone that contributed here. The `Link` from `react-router` actually caused to the animation not to render correctly, so i defaulted back to using just `a` tag and everything is fine now. Thanks a lot

@GreenSock Thanks a lot for this detail explanation. This make so much sense. Just one thing i will like to clarify about the useGSAP hook. The code below works fine when the page initially loads, after i navigate to other pages, the animation work. But once i go back to a page i have previously visited, the animation doesn't play again. This is not something i like, i will like to animation to keep playing irrespective of how many times i navigate between pages. I'm thinking this has to do with dependencies. I will appreciate more clarification on this. useGSAP( () => { gsap .timeline() .from('ul', { y: 50, duration: 0.6, delay: 1, opacity: 0, }) .from('ul a', { scale: 0, stagger: 0.1, transformOrigin: '50% 50%', ease: 'back', duration: 0.5, }); }, { scope: container }, { dependencies: [] } );