Easing in staggerTo with cycle function

[ceindeg]

Here's my code...

 

.staggerTo(".card-container", 0.3, {
  force3D:true,
  cycle:{
    right:function(index){
      return index * rightmulitplier + "%";
    }, ease: Elastic.easeOut
  }
}, 0.00001, 2);

 

Have I set the easing in the correct place? It doesn't seem to have any effect at all...

 

Also as an extra question - the animation is pretty jittery which (as I understand it) is caused by animating the "right" value rather than setting the X value. However my layout needs to stretch from the right edge so is there a way to animate the "x" from the right? e.g. x: right 20% etc.

 

Sorry for the lack of codepen, the work is confidential so I can't share it. 

[PointC]

Hi @ceindeg

 

Welcome to the forum.

 

Your ease is in the wrong place. Everything here seems to be working correctly.

See the Pen prXYEz by PointC (@PointC) on CodePen

You can provide a demo without showing anything confidential. Just use some simple divs like I did for you in my demo.

 

Happy tweening.