Jump to content
Search Community

Flip behaving wierd

battleaxe10000 test
Moderator Tag

Recommended Posts

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

elementcss.png

See the Pen gOoewOj by battleaxe (@battleaxe) on CodePen

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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

  • 1 year later...

Thank you very much for your help! :-P

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

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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...