N3O

@GSAP Helper Apologies , you were correct. Here's the link to a demo. When you access the page, please scroll down a bit until you see a blue box, and then click on it to see the demo in action: react js demo

@Rodrigo it's awsome thanks ! I have a question concerning the Flip plugin if you don't mind. It seems that by default, the plugin records all positioning and size properties for elements. When flipping one component to another location, it inherits these default properties. However, I'm encountering a problem with this behavior I've got a component chilling at the bottom of a scrollable container. When a user clicks on it, the component's state gets saved before we hop over to a different page. Here's where it gets funky. When I try to flip a component on the new page, it insists on animating from its old spot at the bottom of the previous page, creating a scroll zone where none is needed. I sketched out what's happening to help visualize the problem. I'm on the lookout for a sweet workaround that can keep the animation in line, without any scroll side effects. Got any tricks up to go around that? Cheers for any advice you can share!

Hey everyone! Just wanted to drop an update on the thread. Thanks to @GSAP Helper awesome tip about using `gsap.context()` in a React setting, I've managed to completely solve the transition animation I was facing! After implementing the context call as instructed, the animations are now smooth as silk. Plus, the cleanup approach mentioned has been a game-changer for the overall flow. No more awkwardness! Here's a link on CodeSandbox : Flip transition with react js and react-router-dom thanks for the help and for the resources provided. Keep on tweening all! Cheers!

@GSAP Helper Hi there! Thank you for the insightful advice on using `gsap.context()` for managing animations within React. Following your directions, I updated my code to incorporate the context call, and I'm pleased to report that it works wonderfully! The cleanup pattern you described, using `useLayoutEffect()`, has significantly improved the behavior of the animations, and the issue with animations appearing awkward has been resolved. I truly appreciate your help and the resources you've shared. Happy tweening, indeed! Best regards,

@Rodrigo @GreenSock I believe I have found a potential solution for implementing transitions using the Flip plugin with React and React Router DOM. My approach was inspired by this Vue.js example: https://codepen.io/GreenSock/pen/eYdXZJZ . However, I'm encountering issues with the animation transitions, it appears somewhat awkward, and I can't pinpoint the cause. I would appreciate it if you could review the React adaptation of the example I've created on CodeSandbox: React exemple . Any assistance in resolving these animation issues would be immensely helpful. Thank you!

@mvaneijgen @Rodrigo Thank you both for your insights, I really appreciate you taking the time to share your ideas ! The FLIP plugin does look like it could be a handy tool for the animation transition I have in mind. Also, the idea of using a persistent component is quite intriguing, although I'm still a bit on the fence about it, anyway I’m going to dig deeper into the documentation and see how I can tailor this strategy to fit my setup. Looking forward to get these animations just right - Thanks a bunch!

hi ! any hint on how to make this effect with react and react-router-dom ?

Hello GSAP community, I'm working on a React project where I'm attempting to create a smooth page transition with GSAP and React Router. The specific effect I aim to achieve is this: when a user clicks on a button (which is text with a background image), I'd like the image within the text to grow and eventually become the background image of the new route. Here's the scenario in detail: - I have a list of clickable project cards on the homepage, each with text over a background image. - when clicking one of these text elements, I would like the background image to expand, filling the entire screen and then transitioning into the background of the next page So far, I have tried animating the scale of the element . However, I am running into two main issues: 1. The `scale` property does not seem to be the correct approach for making the image become the background smoothly. 2. The transition to the other route comes off as abrupt and I'm struggling to integrate the animation seamlessly into the page change. I would greatly appreciate any advice on how to create a seamless transition where the clipped background image expands to fill the screen and serves as a connector between the two routes. Here's a link to a current sample of the project on CodeSandbox: Codesandbox Exemple

Hi ! I am reaching out to seek assistance with a challenge I'm facing while using ScrollTrigger, particularly with the property pin: true. Problem Description: When utilizing pin: true, the ScrollTrigger generates a pin-spacer div. However, I've noticed that this generated div has a z-index value set to 'auto.' This is causing interference with certain parts of my code, preventing them from functioning as expected. I would appreciate your guidance on how to resolve or work around this issue. Specifically, I am looking for a way to adjust the z-index value of the pin-spacer div generated by ScrollTrigger when using pin: true. I appreciate your time and support in helping me overcome this challenge. If there are any additional details required, or if you need any extensive code snippet, please let me know. Thank you for your assistance.