Unable to resize Flip + ScrollTrigger animation

[David Gourdet]

Hello,

I was inspired by this beautiful demo on Codrops :
https://tympanus.net/Development/ScrollBasedLayoutAnimations/
and tried to do something like it.

But like in the Codrops demo, it's not working when I resize the window.
I tried many things with gsap.context()

the result is that the container doesn't grow or shrink with the window,
or the centered image takes the full screen -- as in its final state -- and the animation doesn't play anymore.

I've read many threads in the forum but it doesn't seem to fit to the context of my animation, or maybe (certainly) I'm missing something.

Thanks a lot for your help!

See the Pen yLQwMeB by deodat (@deodat) on CodePen

[David Gourdet]

I think the problem is that I use Flip.to instead of Flip.from,
so when I call flipCtx.revert(), my animation goes to final state instead of initial state.
But I can't figure out how I could make it with Flip.from.

[Rodrigo]

Hi,

 

Most likely the issue has to do with the fact that you're not removing the class that you are adding when you create the Flip animation before reverting the GSAP Context instance.

 

I forked your codepen (thanks for creating such a simple example!) using Flip.from:

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

 

Hopefully this helps.

Happy Tweening!

[David Gourdet]

Hi @Rodrigo,
Thanks for helping!

I started over from the Codrops demo because, contrary to what I said before and after giving it a closer look, it's working pretty great when I resize my window and it achieves what I'm looking for:

See the Pen eYQXrOY by deodat (@deodat) on CodePen

 

there is no resize event in it, nor revert of the GSAP Context instance.

Maybe I've missed something with my CSS.
I'm going to investigate a little bit more, correct my first pen, and, hopefully, I'll be able to show the result here
 

[David Gourdet]

 

This is what was promised and this is what must be delivered  
 

See the Pen MWzxGJY by deodat (@deodat) on CodePen

A few differences here with my beginning pen worth to notice:
- My .anim-wrapper  width is not auto anymore but 100%
- My .image is flex: none with no overflow:hidden (not sure this makes a difference)
- My .image-l in its final state (.gallery--switch) is aspect-ratio: auto not unset (not sure this makes a difference either)
- I trigger .anim-wrapper and not .anim (this seems to be a big difference)

- My pin is set to gallery.parentNode and not true (idem)