Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Expanding Card on Click

Recommended Posts

Does anybody have any links to a Codepen or other demo that demonstrates how to accomplish this using GSAP and vanilla JS? It's super simple really. Just a card that expands when you click it (without transform scaling the contents of the card), then goes back to its original size when you click outside of it.


See the Pen NeZmwO by tt9 (@tt9) on CodePen

Link to comment
Share on other sites

Hey wcomp,


This style of animating from one state to another is often done using a technique called FLIP. 


GSAP has a helper function for it that you can find with the other helper functions. It might also help to check out the thread below. Otherwise, try animating something like this and if you run into any errors you can post again in the forums and we'll help where we can :) 



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