Change start and end with timeline and scrollTrigger

[ilovecheese]

I have setup a minimal demo, from my existing code. As you scroll, the items pass from right to left, but what if I want #1 to start in the middle and #8 to end in the middle? What if the timeline started a little earlier and ended a little sooner? I can set css manually for the first two items to achieve this, but I thought it would be easier with gsap.

 

Wanting to start here:

 

... and wanting to end here:

See the Pen ZEPKWyy by ilovecheese (@ilovecheese) on CodePen

[PointC]

I'd probably place the main timeline on a parent and tween the progress() or time() with my ScrollTrigger. Maybe something like this:

See the Pen f0c829a8060479b0a65459094ce4c5dc by PointC (@PointC) on CodePen

 

Happy tweening.

[ilovecheese]

Okay, what you have works, but I think in my production code, it won't work. Below is another updated demo, which reflects closer to my production code. I have two timelines, one for an intro, and another for the items. If I start a parent timeline early, then the intro will already be faded halfway out, which is not what I want. Thanks!

 

See the Pen JjzNKao by ilovecheese (@ilovecheese) on CodePen

[PointC]

Sorry - I'm not following, but you don't need to put the intro and the scrubbed progress timeline on the same parent.

 

In your revised demo you have:

.add(items(), '<');

which adds that at the start of the previous animation. Did you mean to have it start after the intro?

 

More details would be helpful as I'm just not understanding the desired outcome.