Card Carousel Operation

[thomas-12345]

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

 

See the Pen Jjavyvv?editors=1010 by thomas-hibbard (@thomas-hibbard) on CodePen

[Rodrigo]

Hey Thomas,

 

Unfortunately we don't have time to explain and dissect every bit of logic that goes into our examples (at least you caught me with no time for that now, sorry 😔). On top of that I didn't authored that particular example so I can't explain you the hows and whys of it 🤷‍♂️

 

Normally when trying to understand how some specific parts of a particular code work what I do is try to simplify the example. For example in this case remove the Draggable instance and just run an endless loop of the timeline, start playing with values and in no time you'll land into the reasoning behind those values and get a better understanding of how the example works and you'll learn quite a bit in the process.

 

Happy Tweening!