App Store Card Transition Effect

[Mike790]

Hi everyone!

 

I'm trying to replicate the transition used in the Apple app store as seen in the two links below.

 

Phone - https://imgur.com/gallery/e3lt0Ke

Tablet or larger - https://imgur.com/gallery/tXURWXe

 

I have created card elements that contain a minimal amount of information, and upon clicking a card, it expands to provide additional details. Compared to a modal overlay, this approach allows the user to know which card they clicked when it returns to its original state and reduces possible confusion as to where they left off, especially when there are numerous cards.

 

The CSS formatting that I intend to use will include the following:

- Flex / flex-grow for screens less than 1024px.  This places all cards associated with a category in a single row, allowing the user to horizontally scroll to view additional cards.

- CSS Grid for screens greater than 1024px.  This limits the number of cards in a row to the column number specified based on screen size and allows the user to vertically scroll to view additional cards.

 

I've attempted to recreate this animation using Javascript and GSAP, but I'm just starting with GSAP and I've been unsuccessful.  My CodePen with my latest iteration is at the bottom of this message.  I also recently discovered the animation directly below from @OSUBlake that uses the CloneNode method, but it's from 2016 and I'm not sure either approach is the correct route.

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

 

Thanks in advance for any help on this animation!

See the Pen qBbLvpG by agaisab (@agaisab) on CodePen

[ZachSaucier]

Hey Mike and welcome to the GreenSock forums. 

 

Whether or not to use cloneNode depends on your content - the method itself is completely valid.

 

In short, you need to use a FLIP technique to go between your two states. Here are the steps of what you need to do using the FLIP technique:

1. Record the initial position of the image with respect to the entire page (and dimensions if the dimensions are going to change). 
2. Move the element in the DOM (or use a clone), placing it where it will end up.
3. Record the final position of the image with respect to the entire page.
4. Animate from the initial position to the final position.

That's exactly what the GSAP FLIP helper function does and its demo shows.

[Mike790]

Thank you very much Zach!

 

I’ve been trying to understand how to use the FLIP helper function, but I can’t determine how to animate changes to an elements height and width. 
 

When increasing the dimensions of the second container in the stylesheet, no transition occurs and it instead jumps to the new height and width.
 

See the Pen LYGvORQ by agaisab (@agaisab) on CodePen

 

Any advice here would be greatly appreciated!

 

Mike

[GreenSock]

Here's a fork with a more advanced flip function that accommodates scale changes: 

See the Pen 167be8fed50d14497be9be023db99336?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

[Mike790]

This looks amazing Jack!  Thank you!

 

An odd effect occurs when adding content to the box.  Because scale is being used, content in the box is scaled up.  However, this increase only becomes visible when you click the button to return the box to #container1.

 

My ultimate goal is to increase the size of the box element while keeping its content the same size, perhaps using viewport units.  I'm going to continue to mess with this in the meantime.

 

Please let me know any suggestions you might have and thank you again for your help!

 

See the Pen pogmoGN by agaisab (@agaisab) on CodePen

 

[fogseller]

10 hours ago, GreenSock said:

Here's a fork with a more advanced flip function that accommodates scale changes: 

 

 

 

Is that what you're looking for? 

 

Is there a simple way of reuse it on multiple blue boxes on the same page? works beautifully  thank you for this discover!

 

 

 

 

[GreenSock]

Ah, okay, so you want to resize it via width/height rather than scaling it with scaleX/scaleY. I updated the function so that it'll accommodate EITHER one - if you want it to resize with width/height, just pass in resize: true in the vars object: 

See the Pen ed45c073e9b60f2b53d7deb0fc561f08?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better? 

[Mike790]

Better?   IT'S AMAZING!

 

I want to thank you both, Jack & Zach, for your guidance!  What an incredible product and incredible support. 

 

I'll be enrolling into the Greensock Club in the very near future and I look forward to using GSAP for all animated-related solutions!

 

Thanks again!

Mike

[GreenSock]

3 hours ago, Mike790 said:

Better?   IT'S AMAZING!

Yay!

 

3 hours ago, Mike790 said:

I want to thank you both, Jack & Zach, for your guidance!  What an incredible product and incredible support. 

Of course, happy to help. We really try to bend over backwards to help folks in the community. We know what it's like to try using a library that's poorly supported and then you feel like you're all alone struggling...with deadlines looming. No fun. 

 

3 hours ago, Mike790 said:

I'll be enrolling into the GreenSock Club in the very near future and I look forward to using GSAP for all animated-related solutions!

That's great! I look forwards to seeing you on the membership roster. We really couldn't do what we do without our supporters. 

 

Happy tweening!