Hello, guys.
Trying to port beautiful anime.js effect to GSAP and have troubles.
The effect itself is here (the first one) - https://tympanus.net/Development/StackMotionHoverEffects/
The code is here - https://github.com/codrops/StackMotionHoverEffects/blob/master/js/main.js#L63
I made a Codepen to show my issue -
The anime.js code have this piece
translateZ: [
{
value: function(target, index) {
return index*8 + 8;
},
duration: 200 ,
easing: [0.42,0,1,1]
},
{
value: function(target, index) {
return index*20 + 20;
},
duration: 700,
easing: [0.2,1,0.3,1]
}
]
This is fromTo values. But GSAP doesn't have API to set from and to duration and easing separately, right? What should I do then? And I don'treally can't image how this separate values are applied. Any ideas how this work, on what stage?
Why my animation have initial jerking?
Why my elements doesn't moves up?
How to port it properly?