ScrollTrigger: How to animate two scenes that lay on top of each other

[Samuel Aaron McGuire]

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.

[Visual-Q]

Hey Samuel welcome to the forum.

 

It's a bit hard to diagnose without context so hopefully you'll be able to get a codepen up. A simplified test case is usually easier to diagnose than a complex example so you might try something basic just to illustrate your issue.

 

In the meantime check out this page it covers a lot of common issues people have and includes a section about nested scroll triggers which might apply to your situation.

 

 

[Samuel Aaron McGuire]

Thanks @Visual-Q
Here's the best I've come up with thus far: 

See the Pen yLVwYvW?editors=0010 by samcreate (@samcreate) on CodePen

 

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. 

[Samuel Aaron McGuire]

I was able to "kick the can" down the road a bit more:

See the Pen QWGoOMZ by samcreate (@samcreate) on CodePen

 

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?

[ZachSaucier]

Hey Samuel. There's a fair bit going on in your demo so it's not completely straightforward in terms of understanding exactly what you're trying to accomplish. But I don't see any real issues with your most recent demo in terms of the approach. I think it's the sort of thing that just requires some more time to get it working exactly the way that you want it to.

 

I don't believe you need the resize event listener though — ScrollTrigger automatically refreshes on resize and throttles the event listener for you.

 

If you have additional questions about GSAP or ScrollTrigger it'd be helpful if you created a demo that isolated the issue that you're asking about.

[Samuel Aaron McGuire]

6 hours ago, ZachSaucier said:

If you have additional questions about GSAP or ScrollTrigger it'd be helpful if you created a demo that isolated the issue that you're asking about.

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. 

[akapowl]

 

Hey @Samuel Aaron McGuire

 

Your concept appears to be working quite right the way you have it set up.

There are some things to be noted, though.

 

1) I would recommend using autoAlpha instead of alpha.

 

This will add an extra visibility: hidden to your not-visible items and thus make the visible items accessable for pointer-events (which they currently are not - you will see, when you try to mark any text of product 1)

 

2) The way your ScrollTriggers work now is that the animations are only dependent on their start value (onEnter and onLeaveBack), thus your end value doesn't actually do much - so I think for this example case you wouldn't even have to specify an end value.

 

Furthermore, the end-values will always be relative to the start-values.

 

So I would reccomend not using your offset variable inside of them, because this will only make the duration of your ScrollTriggers increase with every prod element you add to your HTML. In this example case you would only notice that with markers visible and in production (with markers removed) it probably wouldn't make much of a difference - but for the future / a different scenario when e.g. you would also be making things dependent on the end values, this would be something to consider. See this demo for clarification of what I mean (towards the very end of scrolling)

 

See the Pen 9698c29aadba8d9e63ae427900914099 by akapowl (@akapowl) on CodePen

 

You could just set the end-values to something like "+=150%" instead and make sure the ScrollTriggers always have the same 'duration'.

Or since not needed for your example case as mentioned above just not set any end values here.

 

 

Which would lead to 3) the end-value for your pinning ScrollTrigger probably being something more like this

 

end: (products.length * (2 * innerHeight)) + innerHeight

 

This, I am not entirely sure about, but I played around with the amount of prod elements in your HTML a bit and it seems to be pretty consistent.

 

See the Pen f9b3f923a8a93c1f0f55cae0b2be05ca by akapowl (@akapowl) on CodePen

 

 

Hope this helps a bit.

 

Cheers,

Paul

 

[Samuel Aaron McGuire]

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