Jump to content


Reproducing animation with switch fixed/static positions

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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


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!


  • Like 4
Link to comment
Share on other sites

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


  • Like 4
Link to comment
Share on other sites

Wonderful! Good luck with whichever route you choose.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.