Share Posted March 8 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 More sharing options...
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
Already have an account? Sign in here.Sign In Now