Flip transition question — movement of items during transition

[henryb]

Hello,

 

I have a Flip transition that animates between a single column and a grid layout. This works, however there is further control + logic required to get the transition to feel smooth and to handle which images transition into view, as well as the position of the viewport during this transition.

Here is my current implementation: Stackblitz and here is a good example of what I am trying to achieve with a smooth transition on another website (click the `index` button in the top right corner of the page to see the transition I am aiming for).

This may not be strictly a GSAP question, and if not please disregard, though I am curious if anyone may have any pointers on what could help to get my transition closer to the linked example website.

From what I can observe, the linked example improves the Flip by achieving the following:

• From grid view > column view, the grid view keeps track of which row is at the top of the viewport and always transitions so that the top row are the images that move into view in the single column view
• From column view > grid view, the image in view transitions into the top row of the grid
• The change in the height of the page is managed so that the viewport position does not end up away from the items on which the transition started, i.e. the items in view at the start of the transition stay in view throughout and until the end of the transition

[Rodrigo]

Hi,

 

That's an interesting site to say the least. I inspected with devtools and saw that it actually uses two different sets of images. This is the thumbs container:

And this is the feed (single column) one

Now how the animation is achieved and which elements are being animated, honestly I couldn't tell you but if you set the opacity of the thumbs container to zero like this:

<div class="page__modal home__index__modal" style="visibility: initial; opacity: 0;"> 

You'll see the scroll bar of the feed element right behind this, so basically the developer uses two different elements, hides immediately the thumbs view  using visibility (hidden/initial) and then only animates the elements in the feed section, that's why the scroll position is remembered for saying it in some way, because when you're on the thumbs view only that scroll changes. Here you can see the first image behind the thumbs:

The trick in this website is all about timing and which set of images are the ones being animated.

 

As you can see your setup and approach is far different than this website so I doubt you'll get the same result, especially when it comes to the scrolling part.

 

I'd recommend you to have a look at this demo in order to get an idea of switching between a grid and columns, of course this uses Flex and not Grid, but the approach should be similar:

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

 

Hopefully this helps.

Happy Tweening!

[henryb]

Thank you very much for kindly sharing your observations, Rodrigo, that was very helpful. My apologies it has taken me a few days to reply.

That was well-spotted with the two sets of images that are interacted with separately. It seems like the page tracks the position of the images in view in one set while the other set is being scrolled, so that when they are Flipped, the set transitioning-in are in the optimal position for a pleasing animation. I agree there seems to be some careful timing being orchestrated.

Thanks for the link to the Flip demo too!

Best

Henry

[Rodrigo]

Yeah, you could keep track of the state of one set of images and use Flip's fit() method:

https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Also in order to keep things optimized you can check the state of the images only at startup and then on a window resize using a debounce method for that.

 

Happy Tweening!