Jump to content


Trying to make a pin bouncing effect

Recommended Posts



Well, here I am asking for help. I tried figuring this out, but I'm just hitting a wall.


I have some pins i need to animate in a bouncing effect. I also need them to be staggered. I've got a wokring demo, but my bounce effect is just horrible. And doesn't look anything like a bounce effect.


the best I can demonstrate what I'm looking for is this 

See the Pen yedHk by surjithctly (@surjithctly) on CodePen

 except I want it to be a very small amount of bounce, just so that the visitors eyes are drawn to the pins. something like this 

See the Pen WbqbLb by dctdevelop (@dctdevelop) on CodePen



Thanks very much for the help.



See the Pen rNePKqq by kylerumble (@kylerumble) on CodePen

Link to comment
Share on other sites

Hey Kyle and welcome to the GreenSock forums.

GSAP has a CustomBounce plugin that makes this sort of thing a breeze, including the squashing and stretching! I highly recommend it.


If I were you I would only apply it to the icon, not the whole list element. Moving the whole list item is a bit disorienting to me.

  • Like 4
Link to comment
Share on other sites



Thanks so much for all the help to all of you. I'll implement those changes. 


@ZachSaucier I agree, I'll move the animations to the SVG, I believe I originally did that because i was having trouble sequencing the pins. GSAP is absolutely amazing, but there is so much to learn and grasp. So it's been a lot of trial and error. 




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