Button Shake/Seesaw Effect


#1

This may have been asked, but I couldn’t seem to find an exact topic that matched.

Is there a script written for a button to shake or have a seesaw effect? Where when the page loads, the button seesaws to get the attention of the visitor?

Thank you.


#2

Hi @Zachary,

There was a previous post about element animations in the two following locations:

You could also mess with some hover animations as well - check this out
» http://ianlunn.github.io/Hover/

There is quite a bit out there on element animations!

Hope this helps!


#3

I googled… This is a pretty cool website I found https://elrumordelaluz.github.io/csshake/

You don’t really need a script to do this though. You can mess around with keyframes in CSS if you add a custom style to your page.

  #lp-pom-button-?? {
  animation-name: shake-it-off-t-swift;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  }
  @keyframes shake-it-off-t-swift {
  0% {left: 0}
  1% {left: -3px}
  2% {left: 5px}
  3% {left: -8px}
  4% {left: 8px}
  5% {left: -5px}
  6% {left: 3px}
  7% {left: 0}
}

I made a “dancing button” example for fun
http://unbouncepages.com/backstreets-back-giveaway/


#4

@Caroline @Kyle.C

Thank you both!

Kyle, cool feature. The countdown feature at the bottom was neat too (faster decrease as you scroll and stable decrease as you sit on the page). How’d you do that? I was very disappointed when I sat there and scrolled to find out all the posters were gone before I could claim one…:disappointed_relieved: :stuck_out_tongue_winking_eye:

Caroline, thank you. I actually saw and read the on-scroll animations post, but didn’t really catch on that you could change the effect until I read it again this time. I found this link that shows what each feature looks like: https://daneden.github.io/animate.css/. I was actually looking for the “swing” effect.

Thank you both again!

Zach


#5

Sure thing,

I was playing around with another script posted here in the community… [Tips & Scripts] Count Up Animation

Have fun building your pages!