Jump to content
Search Community

Expanding Card on Click

wcomp test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.
×
×
  • Create New...