Problem with Flexbox div to fullscreen transition

[EddieSeven]

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...):

 

 

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:

See the Pen WwgQEV by osublake (@osublake) on CodePen

 

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?

See the Pen RwNMJZZ by EddieSeven (@EddieSeven) on CodePen

[ZachSaucier]

Hey Eddie and welcome to the GreenSock forums. 

 

The approach that Blake used in his demo that you based your work off of is not setup to work with flex positioning. It is doable, but you'll have to implement the logic to do the same thing yourself. I think it's unlikely that someone in this forum will do that work for you.

 

Let us know if you have specific questions! 

 

P.S. Your use of parallelograms reminds me of my personal website.

[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!