Reproducing animation with switch fixed/static positions

[matruck]

Hello everyone,

I'm new to gsap and I'm trying to reproduce an effect seen on https://bepatrickdavid.com/  , in the "selected works" section. When you click on an image, for exemple, next to 'miranda biondi', you can see the animation.

 

In my codepen, I successfully reproduced the effect, but I am not satisfied with the code. I am certain that it is possible to use a more "gsap way" of coding. The 2 things i'm unhappy with are :

1. To make the switch of static/fixed image, I had to get the position of the element with getBoundingClientRect, wich i think is not a good gsap solution.

2. I don't understand exactly why, but once an image has been opened and closed, its size is fixed (you have to resize the width of the viewport to understand : the other images scale, but not the ones that have been animated once).

 

I want to use gsap to help me coding animations I understand at low level, for this reason I don't want to use the Flip module in this specific case.

Given this effect and my codepen, what is the clean gsap way of doing this animation ? Thank you !

 

(Also, what if the container of the image has a visible style (like background-color or border-color), and I want to make it disappear without hiding the selected image too ? My solution here avoids this problem by not having any style on containers, like it seems to be on patrickdavid's website)

See the Pen LYJzrqm by NinjaKinshasa (@NinjaKinshasa) on CodePen

[Cassie]

Hey there!

So even if you're not using the FLIP plugin you'll need to use the FLIP technique.

Here's a video

 

A superfast video

 

An article
https://aerotwist.com/blog/flip-your-animations/

 

Annnd here's a vanilla JS logic example, with a GSAP tween handling the animation.

See the Pen abe8f76b97ba8f50037de78b745cd8e5?editors=0010 by cassie-codes (@cassie-codes) on CodePen

 

 

And a demo using FLIP plugin with a fixed/relative element

See the Pen gOvybdP by cassie-codes (@cassie-codes) on CodePen

Honestly, if I were you I would just use the Flip plugin as it handles a bunch of edge cases, makes your code tidier and abstracts away the messy bits. I think it's great to understand what's happening behind the scenes but no need to reinvent the wheel!

Hope this helps!

 

[matruck]

Thank you very much for your reply ! The codepen and the videos are very useful, now I understand the flip technique !

 

[Cassie]

Wonderful! Good luck with whichever route you choose.