Hi @GreenSock, thanks for the answer, I really appreciate it.
I'm aware of the inefficiency but I really was hopeless and discourage.
As a workaround to have the socks position always as I wanted, I used the snap:
OPTION 1: snap
Here is a minimal demo with snapping working and animation all set: https://codepen.io/maqquo91/full/rNrMmwK
What I don't like about this solution is that the sock isn't smooth, I think because goes directly from 0 to -3600 instead of doing all the steps.
Another thinks that I'm unable to understand is why is the difference between set and to:
If I use the method .set the animation is working but if I use to. with ease function the animation isn't working.
//Animation working
tlSprite2
.set("#socks-container .frames", { x: -(spriteW * 10) });
//Not working
tlSprite3
.to("#socks-container .frames", { x: -(spriteW * 14), ease: SteppedEase.config(36) })
OPTION 2:
I like the smoothness of the socks rotating here but I can't figure out how to sync this on a timeline and calculate how far does the socks need to move from one point to another.
What I'm trying to achieve is to sync the animation of the socks scrolling with the interaction of the other sections, so basically
- from header to "section-1" the socks should move from 0 to -3.600
- from "section-1" to "section-2" move -6.000
- from "section-2" to "section-3" move -8.400
The exact frame allows me to insert some information and arrows for displaying the features of the product.
Thanks in advance