I'm trying to understand the above pen, but am just not getting exactly what is happening. The fist especially confusing bit is in the initCell function
var tl = gsap.timeline({ repeat: 1 })
.to(element, { duration:1, x: "+=" + wrapWidth }, 0)
.to(element, { duration:cellStep, color: "#009688", scale: 1, repeat: 1, yoyo: true }, 0.5 - cellStep)
baseTl.add(tl, i * -cellStep);
It seems to say, first move each element left the wrapWidth, then increase its scale to 1.
Questions:
1. Why would a cell move the entire wrapWidth? Why is it not just moving the width of one cell?
2. What exactly is the 0.5 - cellStep positional argument doing here. Does this somehow orchestrate all the cells moving together?
3. Why does each individual timeline have a position argument in the second to, and also the baseTl.add has another position argument?
The other unclear syntax (for me) is this animation initialization:
var animation = gsap.timeline({ repeat: -1, paused: true })
.add(baseTl.tweenFromTo(1, 2))
animation.progress(1, true).progress(0, true);
It appears to animate the base timeline only between the 1 and 2 second marks, which, I don't even see a declaration of a duration in when the base timeline is created: var baseTl = gsap.timeline({ paused: true }); but I'm not understanding the progress(1).progress(0). Also: removing the second call to progress, the animation appears to work the same. I'm curious what it is doing, but also curious if it's actually necessary.
Overall this seems to nest three timelines, the last nesting three timelines attached to each of the eight cards
- var animation -> var baseTl -> var tl: timelines (8 of them)
I don't really understand this orchestration, can someone explain how these three timelines operate together?
Thanks very much