FLIP - Change in DOM structure problem

[Daniel Hult]

Hey guys,

Trying out the FLIP plugin on a project and having some issues figuring out what to do.

In the codepen here there is just one active function that handles the FLIP animation and I've commented out my DOM structure change so you can see what the initial state should be. So in this example I want to go from a fullwidth image and then position/scale it to the hero container. Im using absolute positioning so it changes it's anchor point.

Is this possible?

See the Pen poNGNwV by daniel-hult (@daniel-hult) on CodePen

[GreenSock]

Hey, @Daniel Hult. I read your question about 5 times and I'm still kinda fuzzy about what you're asking. 

 

Is your goal to transition the size/position of the .hero__image between those two states? But it's jumping size/positions currently? 

[Daniel Hult]

Yes, I want it to go from the state that it's in currently in the codepen (image is positioned absolute in an outer container) and then move/place the image inside an inner container where it would also be positioned absolute.

If you uncomment this line in the codepen:

//hero.appendChild(image);

Then you'll see what I want for the final state.


Does that make sense?

[tailbreezy]

Hello Daniel,

 

Your inverted state doesn't have enough information to fill the screen, if you make a couple of css changes you will get what you want if I understand correctly the task

 

img {
    max-width: 100vw;
}

 

Not sure if you want to keep the overflow or not, but you can also comment it out to get full-screen to container effect.

 

.hero {
    position: relative;
...
    // overflow: hidden;
}

 

See the Pen edf9bf80daaa2d137ccdc0cb4233ab75?editors=0110 by dadacoded (@dadacoded) on CodePen

[Daniel Hult]

Ah, I see! Makes sense since the image is already inside the inner container.
Thank you for the reply @tailbreezy 😄