Jump to content


"elastic" behaviour on cards

Go to solution Solved by Carl,

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

I'm trying to make a behaviour that feels kind of elastic, that when the user moves is mouse (and in the future, his phone), the cards behind the current one move away with a delay between each other. The problem is that for it to be as I visioned it, it would need to move away, based on the centred card, with the exact same values for top/left and bottom/right (confusing, I know, but I hope you understand what I meant).


Can you give a little help?


PS: For some reason, the demo on codepen isn't adding the transform: translate(-50%, -50%) when the element loads. On my localhost it works as intended...


If need be, I can post a sample of what I have locally working.


Thank you

See the Pen OXojgx by ricnunes (@ricnunes) on CodePen

Link to comment
Share on other sites

Hi ricnunes  :)


Welcome to the GreenSock forums.


If I understand your question correctly, I think Blake's Spring Connections pen can guide you in the right direction:


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


That pen is using the new ModifiersPlugin. If you haven't seen it yet, here's some more reading about it:



Hopefully that helps a little bit.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

ouch, that was a quick response. Thank you!


Not exactly that. The "elastic" feedback I can kind of replicate with a simple delay, the major issue I'm having is the amount the 2 boxes move.


Trying to be more clear:


I want that, when the mouse moves, the 2 cards behind the card in front move 5 to 10 px to the opposite side, based on the primary card. For example, if the mouse is on the top right of the DOM, the 2 cards should be 5px and 10px respectively on bottom, left of the first card.


Maybe this will make it easier to understand, since the codepen demo isn't that good visually.


Link to comment
Share on other sites

  • Solution

I doubt this is exactly what you need but perhaps it gets you closer: http://codepen.io/anon/pen/RRYxwa?editors=0010


The basic idea is that you find how far the mouse is from the center of the card (which is the center of the screen) and move each card in the opposite direction by varying amounts (distX*0.2)

  • Like 3
Link to comment
Share on other sites

You are awesome! It's exactly that!!! Thank you soooo much!

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.