Jump to content
Search Community

noahtrotman

Members

  • Posts

    25

  • Joined

  • Last visited

 Content Type 

Everything posted by noahtrotman

  1. noahtrotman
    Hi, Ok no worries. I'll try that too. I appreciate all your help! Have a good weekend!
  2. noahtrotman
    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'?
  3. noahtrotman
    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.
  4. noahtrotman
    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> ); }
  5. noahtrotman
    @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!
  6. noahtrotman
    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
  7. noahtrotman
    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.
  8. noahtrotman
    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
  9. noahtrotman
    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.
  10. noahtrotman
    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
  11. noahtrotman
    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.
  12. noahtrotman
    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!
  13. noahtrotman
    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?
  14. noahtrotman
    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
  15. noahtrotman
    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.
  16. noahtrotman
    Hi Jack, Given the behaviour, that kinda makes sense. Would there be a way to test it? I looked in the dev tools and when the element in moved in the dom all the class names stay the same (since nextjs adds unique class names to each dom node). I don't think data-flip-id would help me in this case as I am just trying to move the one instance (blue box) to the corner container
  17. noahtrotman
    Hi, I am trying to animate a box between two containers within a grid layout using the Flip plugin. I've mainly followed the React Flip demo on GreenSock's codepen. Currently its moving containers but its snapping to the other container and resetting its rotation. I have the animation at 4 seconds and it's still snapping and I am unsure why. To simplify things I've put the Flip trigger in a button rather than call it on the onComplete of the rotation tween. Sandbox: https://codesandbox.io/s/withered-framework-k6fwm5?file=/components/Main.js:1778-1791 Order Sequence: 1. blue and yellow box to rotate 2. after completed. click flip 3. blue box will snap to bottom left corner As it's only intended to move one way, you'll have to refresh the sandbox to start it over. I appreciate any help. Regards, Noah GreenSock React Flip Codepen: https://codepen.io/GreenSock/pen/OJzvOBv
  18. noahtrotman
    Hi Trapti, Thank you, your response helped me see what was wrong. I was originally passing the classname to the component thinking it would work with the context provider. All I needed to do was pass the boxClass classname through props to the child component and it works! I've updated the sandbox with the corresponding changes. Hope you have an amazing day!!
  19. noahtrotman
    Hi, I've been trying to target multiple components for the last couple days and can't get it to work. I've tried an array of refs but that caused and error of undefined (_gsap) and then read the react gsap article and it suggested to use React Context. I can't seem to get that to work either and I am unsure what I am doing wrong. I just keep getting gsap target not found. I've simplified my work in a demo with just 4 boxes, with the hopes that all 4 boxes animate at the same time. All help would be greatly appreciated. Sandbox: https://codesandbox.io/s/target-multiple-componets-react-gsap-0fw4z5?file=/components/Viewport.js:558-566
  20. noahtrotman
    Hi Rodrigo, I see what you mean and flexbox is probably not the best approach. I did just come across gsap matchMedia, where both x/y and xPercent/yPercent are being used. I think utilizing that approach and matchMedia may be better as I don't believe there is a one size fits all solution to being responsive. Thank you as well for referring me to the Observer plugin, didn't know it existed.
  21. noahtrotman
    Ok, will do. I will post a reply when I recreate the slider using flexbox.
  22. noahtrotman
    Hi Jack, Ok, I see what you're getting at. I think the sandbox you provided is a good band aid for now while I look at re-engineering my thought process. I do have a follow up question. I know its possible to flex the items/images diagonally and I think that's what I ought to look into. My question is, given that I'm using gsap modifiers to create the infinite slider loop outside the viewport. Would the modifiers approach still be possible with animating flex values?
  23. noahtrotman
    Hi, I originally posted about spacing out images diagonally in gsap in a separate thread and was able to figure that out. However, I ran into an issue when I added in my entrance animation and am trying to see if there is a better approach. The images on the slider move from top right to bottom left. If you scroll or click the next image they will slide to the next one. My current approach has been to use the browser window size to calculate the position and size of the boxes/images based off of that. I am aware that this approach depends on the window size being the dependency of a useEffect and every time the view port changes it will all re-render and restart. I believe this is also hurting the performance when the images originally slide in and you see it glitch. Would anyone suggest a better approach to achieving the same outcome that wouldn't cause a re-render of the gsap timeline? Steps would be: 1. Open sandbox in new window 2. wait for animation to complete 3. resize viewport Sandbox: https://codesandbox.io/s/blue-dew-bs8bpc Original inspiration: https://franciscamoura.com/ Original post:
  24. noahtrotman
    So, I guess I was overthinking it and it came to my head just now when looking at this stack question. https://stackoverflow.com/questions/44036932/performance-of-css-flex-vs-manual-javascript-computation I've updated the sandbox for the change.
  25. noahtrotman
    Hi, I am currently trying to create an infinite diagonal slider in react/nextjs. One of the issues I am having trouble with is distributing the images diagonally for all viewport sizes. Currently there are 4 images in the array that is being mapped to the screen but I'm just trying to have the screen show 3 on the viewport. One in the bottom left, the center and top right with the images being pinned to its center. (for the bottom left and top right, 3/4 of it would be out of the viewport) I have gotten it to work for some viewport sizes but for others that's not the case and it becomes an issue when I start animating with gsap's modifiers as they become offset very quickly. I've simplified my code in a sandbox to show what I have. Any sort of help/direction would be greatly appreciated. https://codesandbox.io/s/i4tksf?file=/components/Slider.js Thanks Noah
×
×
  • Create New...