Samuel Aaron McGuire

That makes sense! I really appreciate your time @akapowl and thoughtfulness. Hope this helps anyone as silly as me that couldn't figure this out too.

I'm looking to have two pins in a row using ScrollTrigger. I've tried setting the `refreshPriority` and calling "refresh" at the end of the ScrollTrigger.create calls. Regardless, the second pins "end" collapses to the start of its pin trigger. Is there something I'm missing? Please halp.

@akapowl you hit all the nails on the head. Thank you!!! ?

Thanks for giving a go at helping but, not sure if you fully read the post. The codepen is the most isolated version of the issue. Look at www.calexo.co products for the complicated version.

I was able to "kick the can" down the road a bit more: https://codepen.io/samcreate/pen/QWGoOMZ I used relative "+=" starts and ends with percentages which seems to work all right. I wouldn't mind if someone could take a peak and see if there's a better way to do this?

Thanks @Visual-Q Here's the best I've come up with thus far: https://codepen.io/samcreate/pen/yLVwYvW?editors=0010 In the simplified codepen example, we should have the parent get pinned. Fade in the first product, (scroll) play the first product scene1 (scroll) play the first product second scene and keep going for each other product. Issues I'm having: since the parent get's pinned, the products scenes "start" and "end' math doesn't seem to work the way I would think I could increment. "scene1 and scene2" will have lot's of animation in them so I'll need to be able easily adjust "padding" for each scene so it feels like there's adequate scroll distance between each scene.

I'm trying to port over my site calexo.co from ScrollMagic to ScrollTrigger. The hardest part to port has been the product section, which works as follows: Parent wrapper set to pin at "top top" its children are the products. Each products position is set to absolute, that makes them stack on top of one another. Additionally each product has two timelines each: one to animate in/out images/copy another to animate copy bubbles (see calexo link) To achieve this in scrollmagic I would use the "offset" property. So the first product and its first timeline's offset gets '0' (plays right when pinned) second timeline's offset gets 100%. Then the next products first timeline get's an offset incrementally set to 200% and it's second 300%, so on and so forth. I've tried doing this with setting the start/end to no avail but I might be missing a detail here. Here's the basics Pinning the wrapper for 700% (total of the products. below) Products start and end get: Product 1: timeline 1: start: "top top" end: "100%" timeline 2 start: "200%" end: "300%" Product 2: timeline 1: start: "400%" end: "500%" timeline 2: start: 600% end: 700% I've been trying to put together a codepen, but so far haven't been able to get anything working but as soon as I do, I'll add here. Thanks for any input.