Jump to content
GreenSock

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

Trying to make a pin bouncing effect

Recommended Posts

Hello,

 

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.

 

Kyle

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

Link to post
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 3
Link to post
Share on other sites

Wow! 

 

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. 

 

Kyle

 

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

×