Jump to content
Search Community

What am I doing wrong with the bouce?

Steve Scott test
Moderator Tag

Recommended Posts

I want to just have like a horizontal list of images on the page, and have them just happily (slightly) moving up and down like a wave left to right (or randomly). I have a function on y to give each item it's position orders, but I'd like that calculated on every cycle, not just once at the beginning. 

 

It's kind of aggressive right now lol, I want it to be a friendly ease like each is a happy little image moving y +10->-10 every cycle.

 

Can someone point me in the right direction?

See the Pen bGMWJNK by stevescott (@stevescott) on CodePen

Link to comment
Share on other sites

Hi Steve,

 

One option could be explore the Custom Ease visualizer, play around with it and find a configuration that meets your needs:

https://greensock.com/docs/v3/Eases/CustomEase

 

Another alternative is the Custom Wiggle tool that extends Custom Ease in order to create complex effects.

https://greensock.com/docs/v3/Eases/CustomWiggle

 

I played with this configuration made with the Custom Ease Visualizer:

gsap.to(".items div", {
  y: function(){
    return Math.random() < 0.5 ? -10 : 10;
  },
  ease: CustomEase.create("custom", "M0,0 C0,0 0.302,-0.185 0.362,-0.056 0.485,0.211 0.438,0.816 0.564,1.076 0.642,1.238 0.749,0.94 0.86,0.91 0.948,0.886 1,1 1,1"),
  duration: 1,
  delay: 0,
  stagger: {
    amount: 0.7,
    from: 'random'
  },
  repeat: -1,
  yoyo: true
})

Happy Tweening!!!

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.
×
×
  • Create New...