Jump to content
Search Community

Reproducing animation with switch fixed/static positions

matruck test
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

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.
  • Create New...