HELP WANTED: FLIP Animation – Animate element/s from one div into another div.

[Levin Riegner]

Hello,

I'm trying to create an animation where three blocks/boxes move into a target container (upon scrolling, but not important for right now). The target container (end state) consists of six boxes arranged in a CSS grid layout, resembling a typical dashboard with sections for a sidebar, two top items, and three bottom items. Initially, in the starting container (start state), only three of these six boxes are positioned at the bottom of the screen but inside a separate div.

 

The goal is to trigger an animation on scroll or scrub the animation whilst scrolling, transitioning the boxes from their starting positions into their respective locations in the target container's grid layout. I've spent several hours trying to implement this functionality and even attempted using Cursor, but without success.

 

If anyone could point me to a simple tutorial, demo, or example showcasing how to achieve this type of animation, I would greatly appreciate it.

Attached below are some screenshots illustrating the intended animation and layout.

 

Additionally, here's a snippet of the initial code I worked on, though I ended up removing parts of it after facing persistent issues.

 (please scroll down on the codepen to see what im intending to do)

 

Thank you in advance for your help!

See the Pen PwYEWVx?editors=0010 by joebentaylor (@joebentaylor) on CodePen.

[Levin Riegner]

I have been able to recreate a simple example which does work, so im not sure whats wrong haha

 

See the Pen GgKyGBN by joebentaylor (@joebentaylor) on CodePen.

[mvaneijgen]

I'm not completely sure how things should work in your setup. But I would not create the Flip animation on each click. I would create the Flip animation just when the page loads and then .play() or .reverse() that tween you get from Flip, on button click. 

 

See the Pen emOyjPN?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen.

 

Also don't you want to reparent your boxes to be inside the grid? On the docs is an exmaple how you can reparent an element with Flip and then in turn instead of animating the container with all the boxes create a flip animation for each box on its own. Hope it helps and happy tweening! 

 

https://gsap.com/docs/v3/Plugins/Flip/#features

[Levin Riegner]

I found that your codepen provided wasnt working correctly and was flashing on the reverse state.

 

I got close with this codepen:

See the Pen GgKyGBN by joebentaylor (@joebentaylor) on CodePen.

 

But the only issue i have is that the boxes on reverse toggle are incorrect for a short second... im not sure how to reesolve.

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen LEPeMZe by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Levin Riegner]

I actually made this work! Thank you

[Levin Riegner]

Just as a quick followup, i enhanced this demo finally with some custom animations and scrolltrigger to trigger based on scroll vs a button.

The end demo-result:

See the Pen WbeMGJv by joebentaylor (@joebentaylor) on CodePen.