Tweenmax stagger a wave

[kap 0 Likes (Newbie)]

I want to create a wave movement. A couple of boxes jump up and down one after the other. FromTo does not lead to right result, because the boxes don't go to their previous position.

 

 

 

 

        TweenMax.staggerFromTo(".box", 1, {

            opacity: 0.6,

            y: -20

        }, {

            opacity: 0.2,

          y: 0

        },, 0.2);

See the Pen WbzQpW by anon (@anon) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Hi Kap,

 

They're not supposed to go back to their previous position. They went from -20 to 0. If you want them to go back, you should use a  repeat and yoyo.

TweenMax.staggerFromTo(".box", 1, {
  opacity: 0.6,
  y: -20
}, {
  opacity: 0.2,
  y: 0,
  repeat: 1,
  yoyo: true
}, 0.2);