Jump to content
GreenSock

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

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.

 

https://codepen.io/tt9/pen/NeZmwO

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×