EddieSeven

Hey Zach, Yea I figured it had to be the Flexbox messing with things, but thanks for replying. I'll keep working on a solution that keeps it in though, I've grown quite fond of Flex and Grid. P.S. That's a nice website! I'm actually working on my own personal site (this animation is one of the ideas I'm playing with for it). Hopefully the end product ends up at a similar level of polish. Thanks again!

Hi guys, I've worked with GSAP a bit but I can't seem to figure this out, so I'm hoping you guys can help out. This is my pen (I see there's a field for it, but I wasn't sure if that embedded it or was just a link. First time poster, bear with me...): https://codepen.io/EddieSeven/pen/RwNMJZZ I've been trying to figure out how to do a div-to-fullscreen transition sequence, but it's not working correctly. It should be a smooth transition from the position of the element, expanding to full screen on click, and then back again on a subsequent click. The "out" transition from the div to full screen works fine, but the "in" transition when it goes back to the div doesn't look right. It comes in from the corner, bounces past the expected values, and settles down in it's proper place, instead of contracting smoothly to the position of the element. I slowed it down in my pen so you could see what it's doing better. As a frame of reference, I'm using a nice bit of code that Blake posted a few years ago to accomplish this (basically a FLIP animation). That pen is: https://codepen.io/osublake/pen/WwgQEV The biggest differences between his setup and mine are that I'm using a Flexbox for layout, and a clip-path on the elements. Maybe that breaks everything, but since it seems to work on the way out, I'm not sure. A couple of notes, Blake's code uses X and Y coordinates in the style object and 'to - from' subtractions to establish position. If I use that on mine, the animation is offset. For it to align correctly, I'm using top and left, with only the 'to' values. Also, in order to animate the clip-path, I'm using two style objects and a conditional to decide between them. I tried manually adding the clip-path change to a single style object (as in Blake's example), but the result is the same. These components are commented out, but present in the code, in case you wanted to play with them. Any ideas on what might be going on here?