Hi Jonathan ( <-- I don't know how to tag your name in the forum!) Thank you so much for your thorough reply!! :D
I took the time to watch the videos and read through everything -- thank you, it has helped clear up a lot of confusion. The 3 examples were quite helpful.
Thank you for cleaning up my code too!
However, I think I still have the same original problem. I changed the Codepen to the .staggerFromTo example you had suggested, and increased the values so as to see the animation better. This is what I have now:
var tlgrass = new TimelineMax({
repeat: -1,
yoyo: true
});
tlgrass.staggerFromTo(grass, 2.5, {
transformOrigin:"0% 100%",
skewX:"25deg"
}, {
skewX:"-25deg"
}, 0.3);
The stagger effect works indeed, each animation is delayed by 0.3 seconds. However, my problem is that they stop and wait for each grass object to loop through, before repeating (or yoyo-ing in this case) back. What I am looking for is for the grass elements to swing left and right continuously without stopping (skewX to the right, skewX to the left, skewX to the right, etc...). And right now each grass element skews to the right, then stops and waits for all the others to skew the same, before going back to the left. Is there a way to have them continuously loop without pausing? Thanks again!!! Link to Codepen.