How to animate a div, moving it from outside its container and then back into the container

[hanjames]

Hi there, so I want to make a scroll animation of an image that has full width and full height of its parent section, and scale it down back to its original position in a column, I found some possible solution by using a Flip plugin but still don't know how to implement it yet, also I want to perform some intermediary animation like the text reveal sequentially before it can continue to animate back to its column.

 

For now I provided some rough codepen example by using another div directly below the section element and the final position of the image should be in the middle of the 2nd column.

See the Pen bGOjXGm by ryanfarhan00 (@ryanfarhan00) on CodePen

[mvaneijgen]

Hi @hanjames welcome to the forum!

 

I had to remove your Tailwind classes, because I don't know how to overwrite those when flipping. But you can just do your javascript logic of setting your main image to the position in the column, I've used the following flip demo from the docs https://greensock.com/docs/v3/Plugins/Flip/

 

See the Pen OJNYjmz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

And added that to your timeline at a point that seems logical. It still needs some tweaking, but I think you can take it from here. 

 

See the Pen ZEVjgPB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

As a side note, instead of y: '0%', you can do yPercent: 0. Hope it helps and happy tweening! 

[hanjames]

Thank you so much!, I tweaked it a little bit by removing the image-src child in the image-main and now it's working pretty close.

 

Only one issue though, when I apply mainImage.appendChild(mainImageSrc) then I scroll back everything just goes black, it seems like tween can't run backwards after the flip animation done.

[Rodrigo]

Hi,

 

Maybe this examples can help understanding how to use Flip with ScrollTrigger when scrolling in both directions:

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

 

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

 

Hopefully this helps.

Happy Tweening!

[hanjames]

@Rodrigo Thanks, rodrigo. It works now!.

 

For me it's the setState method that works inside .add() method, I assume that's because the cleanup process that performed by gsap.context() when I scroll back up.

Need some time to grasp the concept though hahaha, but it was a fun challenge nonetheless.

[Rodrigo]

I would strongly recommend you to begin with just Flip with some buttons in order to just create Flip animations:

https://greensock.com/docs/v3/Plugins/Flip

 

Then you can start by using ScrollTrigger callbacks to create those Flip animations like this:

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

 

Hopefully this helps.

Happy Tweening!