noahtrotman
noahtrotman's Achievements
-
Hi, Ok no worries. I'll try that too. I appreciate all your help! Have a good weekend!
-
Hi Rodrigo, Ok, I'll give that a go. Is it not possible to use the gsap script in nextjs without getting 'gsap not defined'?
-
Hi Rodrigo, I was doing that before with the UMD files and that works. Right now, I'm just trying to reduce my initial page load so that's why I'm trying to use the scripts.
-
Hi, I am trying to load the gsap scripts in nextjs but I am having trouble. I've tried a few things but they all result in 'gsap not defined' in the component itself. I can't find a similar issue in the threads or elsewhere. Using Nextjs script tag: //_app.js import Script from "next/script"; function MyApp(){ ... return ( <> <Script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" /> <Script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/Observer.min.js" /> ... <> Using regular script tag: //_document.js export default class MyDocument extends Document { render() { return ( <Html> <Head> ... <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" async ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/Observer.min.js" async ></script> </Head> <body> <Main /> <NextScript /> </body> </Html> ); }
-
@Rodrigo Ok, I'll incorporate the useLayoutEffect and kill it on the return. Ok I will change that. I was originally using useState but the observer was still able to trigger onUp/ onDown functions while animating (double trigger) and wasn't sure why so I thought this would fix it @Cassie Seeing your solution now. I will try both and see which one I prefer from testing. Thank you both!
-
Hey, I was able to get it to work. Just needed to subscribe to the nextjs router events when the route was about to change. Thank you for pointing me in the right direction. const scroll = Observer.create({ ... }) router.events.on("routeChangeStart", () => { scroll.kill(); }); Updated sandbox: https://codesandbox.io/s/laughing-cache-y51p4z?file=/components/Main.js:1414-1483
-
Heya, Ok, that helps. I'm working with nextjs so it'll be using their router and not React router. I'll take a look around too and see if I can find something.
-
Hi, I'm using gsap observer and its working and all on the main page, however when I navigate to another page the mouse wheel is blocked. The sandbox log says element not found but I'm not sure what the observer target should be instead of ".wrapper" (the classname of element). I'm just trying to target the specific page and not all pages. Aware that it defaults to the viewport and so this may be causing the problem. How would I change that? Scroll to move blue box. Click on blue box to navigate to page. Scroll on page with text. https://codesandbox.io/s/vigorous-visvesvaraya-l0wf22?file=/components/Main.js:789-803
-
Hi Rodrigo, I realized I forgot to specify which scroll. I was speaking of the home page, which you addressed and are right on. After doing more research and coming across the response by Shaun Gorneau in the linked thread. I believe its a combination of using the deltaY value with how much I want the element to move and having a threshold. Thank you for all your help! I'll give this a whirl and if anything unexpected comes up, I'll follow up.
-
Element snapping to new grid container with Flip (React)
noahtrotman replied to noahtrotman's topic in GSAP
Updating this thread for anyone that comes across it. I did some further research on maintaining state with React. tl;dr its not possible as its just the way React is. If you're using gsap Flip with React, you need data-flip-id so it can calculate the difference between the two instances of components since state will always be reset. Essentially, React preserves the state of a component while it stays in the same position of the dom, however once you move the position, the state will reset and a new instance of the component will be created with a different tree. Same happens even if you are putting it back to the same position, say a toggle. The React docs article on 'preserving and resetting state' explains it quite well. Readings on React State & Re-rendering: https://beta.reactjs.org/learn/preserving-and-resetting-state https://www.joshwcomeau.com/react/why-react-re-renders/ https://www.youtube.com/watch?v=7YhdqIR2Yzo&t=768s You may look into reparenting with React, which is quite difficult. On the other side there's React portals. Although this wouldn't really work in this use case if you needed to get around Reacts re-render loop this would be a plausible solution. Side note, not sure if this is possible with gsap but that's for a different time/ thread. Basically think of portals as a way to 'portal' a component into another part of the virtual dom and the actual dom will show where you want the component to be. If you want the component to be hidden from the start, and portal it to where you want, look at reverse portals. Further research on React portals: https://reactjs.org/docs/portals.html https://www.youtube.com/watch?v=IgJcK0SbiLM https://github.com/tajo/react-portal https://github.com/httptoolkit/react-reverse-portal -
Hi @Rodrigo, I have a follow up question to this thread. I was able to re-engineer the slider so I doesn't cause a re-render and am now back to how the sandbox looks. I ended up layering copies of a css grid container and have offset each one to give the illusion that it is all part of the same grid. And so I am just animating divs. I have hooked it up with the Observer plugin as you mentioned. The question I have is, how would I create the scroll like effect from the website I linked above. I don't think this is Observer... It seems to be a scrollTrigger, based on the dev tool sources but I'm unsure if that's even possible given the viewport container is width:100vw and height:100vh and doesn't have a scroll bar associated with it. I can create a sandbox if needed. What I'm mainly looking for is direction as I'm unsure how this is being animated.
-
Element snapping to new grid container with Flip (React)
noahtrotman replied to noahtrotman's topic in GSAP
Hi Jack, Yeah that clears things up and I think we're on the same page. I'll look into maintaining state with React to understand that better. Thank you for all your help & happy thanksgiving! -
Element snapping to new grid container with Flip (React)
noahtrotman replied to noahtrotman's topic in GSAP
Hi Jack, So I understand why the data-flip-id needs to be used. I guess I was confused from the gsap tutorial on the GreenSock youtube where the orange and purple rectangles are flipping between containers and there doesn't appear to be a data-flip-id. I then decided to remove the data-flip-id from the react gsap codepen above and things make sense. In regards to styled-components. I guess it because you said React is completely recreating the element (elementA). I thought this was from my code and not React itself. Looking at all the react gsap sandboxes with Flip and comparing them to mine, everything seemed good so styled-components was the last thing in my process of elimination. The only part I'm still confused about and also the reason I used the .from() tween is the box rotating back to 0deg. My intention is to have the boxes rotate to 45deg and then stay like that. Since a new instance of the element is being created when the Flip happens, it won't rotate back to 0deg with the .from() tween. Is this approach unnecessary? -
Element snapping to new grid container with Flip (React)
noahtrotman replied to noahtrotman's topic in GSAP
Hi Jack, Yeah I think this clears everything up. Thank you for breaking it all down and allowing me to better understand what's going on. I really appreciate all your help! I'm still doing a lot of trial and error to see what's causing it but have a hunch it's styled-components. I'll need to read through their docs to better understand what's going on. In the mean time as a temporary fix I've used a .from() tween so it doesn't rotate back on itself as the two instances will share the same data-flip-id. https://codesandbox.io/s/intelligent-wright-mhb7t9?file=/components/Main.js -
Element snapping to new grid container with Flip (React)
noahtrotman replied to noahtrotman's topic in GSAP
Hi Jack, I read through your sandbox a few times and understand how your just appending the data-flip-id of the original element (as you said ElementA) and appending it to ElementB so they hold the same id and remove the jump. To clarify the original problem, react is dumping the original element (ElementA) and thus causing the new component to be different (ElementB). The data-flip-id's are now different (at least different instances of each other as they both will read the same id before and after in the console) and that is causing the jump. Correct? As I'm still getting the hang of Flip in React, I don't quite understand how I would get the state after the rotation. Isn't the Flip.getState being called when the function is triggered and thus after the rotation? This also makes me question if the two are related. That is, the rotation being reset and the Flip position snapping. So far I tried a few things with no luck, including using refs, different classes, context. Looking at both the GreenSock React Flip Codepen and mine, one thing that I can see is that I'm using styled-components as all the Flip methods seem to be the same for both. I'll try to see if this is perhaps the issue.
