timeline delay between tweens

[t1B0Y]

Hello,

I've been struggling for the last few days to animate a photo gallery. The project is originally on react but a recreate a js example on codepen. I hope it will help to understand.

 

on one page of my projects, I made a horizontal scroll images gallery.

When the user clicks on one image I want the image to take up all space of the screen keeping the same ratio. So I created a timeline that animate out the column and reduce the width to 0. Then I animate the image to take the width of the container.

As you can see in the example there is a delay before the image width increase. I'd like the animation to be smooth and I find this delay not aesthetic at all.

I try many things: changing the position marker of the tweens. change to different css style, and change the order of the tweens. but nothing really works

Could you show me what I'm doing wrong ? 

Thank you in advance for your help :)

See the Pen ZEmZbmZ?editors=1111 by t1b0y (@t1b0y) on CodePen

[mvaneijgen]

Hi @t1B0Y welcome to the forum!

 

Your solution could work with a lot of tinkering, but this seems like a perfect use case for the Flip plugin, see https://greensock.com/docs/v3/Plugins/Flip/

 

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

 

 

[t1B0Y]

I went across Flip during my research but after trying it I though this wasn't it. But after studying the case more in depth it's exactly what I need to do but slightly different. 

Thank you so much for your answer!