Jump to content
GreenSock

runejensencom

Flip pinned Element flexbox animation from center to bottom

Recommended Posts

I struggle to find a solution with pinned elements flexbox animation from center to bottom, but I have manage to get it to work with ScrollTrigger.create

 

Do you have any suggestion how to make it work? I want the element to pin from center to bottom, when it hit the center of the viewport in the container div.
 

 

See the Pen VwxXWam by rune-jensen (@rune-jensen) on CodePen

Link to comment
Share on other sites

  • runejensencom changed the title to Flip pinned Element flexbox animation from center to bottom

Hi @runejensencom,

 

I'm struggling a bit to grasp exactly what you're trying to do. Perhaps this is what you're after?

See the Pen dyemJGm by GreenSock (@GreenSock) on CodePen

 

If not please let us know.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

 

10 hours ago, runejensencom said:

I want the element to pin from center to bottom, when it hit the center of the viewport in the container div.

 

Like this?

See the Pen abGYGXG by akapowl (@akapowl) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi akapowl and Rodrigo. I really appreciate your help.
 

Rodrigo solution works the best with akapowl "end: `bottom-=${box.offsetHeight/2} center`,".

Now it works perfectly like I want and it works great in Webflow. I want both box-one and box-two scaling proportional when box-one is pinned to the bottom of the container.

 

But the EM scaling doenst work for box-one like box-two, when I resize the window. Any idea how to fix this?


See the Pen JjvLxXe by rune-jensen (@rune-jensen) on CodePen

 

 

Link to comment
Share on other sites

It works when I scroll below the end-markers, resize window and then scroll above end-markers and down again, then it refresh to correct size.

Maybe it is something about refresh, when windows is resizing?

Link to comment
Share on other sites

I figured it out. Works perfectly now as I wanted.

 

I just need to add "scale: true" like this:

 

let tl = Flip.from(state, {duration: 1, ease: "none", scale: true});

 

  • Like 2
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.
×