Jump to content
Search Community

Flip pinned Element flexbox animation from center to bottom

runejensencom test
Moderator Tag

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 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

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...