battleaxe10000 Posted April 6, 2022 Share Posted April 6, 2022 Hi, I'm actually trying to accomplish this same thing in next.js, but I couldn't find how to write next js in codepen. The problem is that the images are not moving to where I want them, but instead an 'element.style' gets added and transform the images to the totally wrong place. It's bad in codepen, but even worse in my next js app. If I add transform: transition(0,0) !important or similar, the images get where they're supposed to be, but the animation is lost. I have tried to find a way to remove the element.style, but no luck so far. Some help here would be highly appreciated. Thanks See the Pen gOoewOj by battleaxe (@battleaxe) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted April 6, 2022 Share Posted April 6, 2022 Hi Batttleaxe, We don't need to see a Next.js version as that Codepen is going to do the same as it's just React. First of all, that is not how you change the DOM in React. Changing that DOM outside of React like that will potentially lead to a bunch of problems later with state changes. You should probably use an array of data and map to create the elements, assign a unique data-flip-id to the elements, change the state to render the elements in their new position and save the state, trigger the Flip animation and use the targets Flip property as the changed DOM will have different elements. Quote String | Element | Array | NodeList - by default, Flip will use the targets from the state object (first parameter), but you can specify a subset of those as either selector text (".class, #id"), an Element, an Array of Elements, or a NodeList. If any of the targets provided is NOT found in the state object, it will be passed to the onEnter and not included in the flip animation because there's no previous state from which to pull position/size data. Way too much stuff to really write on in detail here. Get the layout to change properly inside React first, and then we can work on the Flip stuff. The second issue is that your images are huge. I just looked at the first image, which is 4000 x 6000. Just to animate that one image, you're asking the browser to move over 70MB of pixel data. Adding will-change: transform to your CSS can also help, but those are images still way too big. Here's a vanilla version with smaller images showing that it works. See the Pen zYpWoxR by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
battleaxe10000 Posted April 7, 2022 Author Share Posted April 7, 2022 Thanks Blake. Yes, I know I should map through the whole shabang and just display them, but I thought this would work as well (got it from a vanilla js tutorial). The images comes from the unsplash asset in codepen, and I wasn't aware that you can even choose sizes there. I will have to look into that. Well, I'll give it a shot building it the proper way. Thanks Link to comment Share on other sites More sharing options...
OSUblake Posted April 7, 2022 Share Posted April 7, 2022 If you need help with the React part, just post an updated demo. Like I was trying to say in my previous post, you will probably need to assign a data-flip-id when swapping elements with map because it will not render the same element in the new position. See the Pen OJzvOBv by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
battleaxe10000 Posted April 7, 2022 Author Share Posted April 7, 2022 Thanks again Blake ❤️ 1 Link to comment Share on other sites More sharing options...
goooon Posted November 16, 2023 Share Posted November 16, 2023 Flip Menu. flip between two many different elements I'm having a problem with the Flip behavior. I don't understand why it only works in one direction. Any suggestions? See the Pen dyaZvRm by Gon82 (@Gon82) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 17, 2023 Share Posted November 17, 2023 I think you were greatly overcomplicating things. Here's a much simpler approach: See the Pen XWOVbdz?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
goooon Posted November 17, 2023 Share Posted November 17, 2023 Thank you very much for your help! originally, I made it with flip-id's because I wanted to make a similar effect but with different elements. In the demo, I've simplified with a single marker just for demonstration. What if each marker had a different text and photo? I would not be able to use the appendChild method. Sorry for not being clear on that point. The original idea was to have multiple elements. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 17, 2023 Share Posted November 17, 2023 10 hours ago, goooon said: What if each marker had a different text and photo? I would not be able to use the appendChild method. Why not? The appendChlid method basically adds a certain element inside another one, that's it. If you have other elements inside the parent where the line would go, then you have to first try that without Flip in order to make your CSS work the way you intend and then add the Flip Plugin to the mix. If the other elements inside the parent cause some issue, that most likely will be because of CSS and not GSAP and Flip, as I said, first try without GSAP, just simple click events that reparent the underline element and that proves that your CSS works. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
goooon Posted November 18, 2023 Share Posted November 18, 2023 Thanks @Rodrigo, I get your point, and you're right. Honestly, I was thinking about implementing this functionality in React. I can't use appendChild there, so my approach was to use flip-ids. Seemed easier, but now I'm kinda lost. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 18, 2023 Share Posted November 18, 2023 Hi @goooon Here is a simple demo in react that uses Flip with reparenting https://stackblitz.com/edit/vitejs-vite-bpwfpk?file=src/App.jsx Hopefully this helps Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now