Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daniel Hult

FLIP - Change in DOM structure problem

Recommended Posts

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

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.

×