norkuy

I'm not a GSAP or React expert and haven't played around with Scroll Trigger, but I thought I'd chime in since I attempted something similar. Originally, I tried React portals but when the component / element moves to a new location, it has to unmount and remount, causing a flash when it flips. Libraries like these may be able to help you. They keep the internal state of the component when it's reparented. https://www.npmjs.com/package/react-reverse-portal https://github.com/Paol-imi/react-reparenting (experimental) Possibly something like this could work: const imageState = Flip.getState(element); /* reparenting code to move the element to a new location */ Flip.from(imageState, { duration: 1, ease: 'expo.inOut' }); You may also need to add a data-flip-id and a targets property

I wonder if I moved the Flip.from animation into a useEffect that runs on initial load in the element that's being moved with a portal. I think it's possible that the element that's being moved isn't fully loaded since when I put a breakpoint when the move occurs the video element is moved but the video itself isn't painted.

Thank you PointC and Cassie. I was hoping I wouldn't need to rely on another package to accomplish it but I'll try with this reparenting library. I also tried React.createPortal but my DOM node to be animated just updates to the new parent with no animation. Just to see what would happen, I used with querySelector and appendChild in React and it works although the animation seemed a bit laggy at times. I know using appendChild and querySelector in React would be a bad idea.

I went through this example https://tympanus.net/codrops/2022/05/19/image-to-grid-transition/ from Codrops to see how Flip was implemented and appendChild is used to put the image into its last state and also noticed appendChild is used in the Flip docs. Does anyone know the react way of putting an element into a new parent container so Flip can animate it? const imageState = Flip.getState(DOM.contentItem); DOM.gridItemTarget.appendChild(DOM.contentItem); Flip.from(imageState, { duration: animationSettings.duration, ease: animationSettings.ease, });

Agree on that, I work on a web app at work, mostly JS but also some Java and SQL.

Thanks for the advice. Sometimes I get caught up in taking the more stable path (but still a lot of work) of web app development and haven't fully considered doing something creative because I thought it wasn't viable. Thanks

Great to find some like minded people into creative coding here. Being able to work on a bunch of creative projects would be the ideal for me so it's cool to see people are doing it. I'll consider the TP idea haha

Thanks for the reply, Zach. You're definitely making devs lives easier. I figured the portfolio part was true. I've been kinda deconstructing Codrops examples lately to understand how they work so I can create some of my own stuff. Thanks!

Hey everyone, Unrelated to a coding question but just curious if I could get the forum's opinion. I'm a front-end developer and I'm really interested in going deep into GSAP, Three.js, Pixi JS, WebGL, and other creative areas of the web. There are endless amounts of React and Angular jobs for front-end devs but these don't interest me as much as working on more creative projects. My question is, can you make a living working with tools like these and more design-focused projects? I don't see a lot of these types of jobs posted, maybe I'm looking in the wrong places? 95% of jobs I see for front-end devs are for web applications.