Airpods video/image sequence scroll and text

[tholeb]

Hello, i'm trying to do build the same video/image sequence style of the Airpods website and also add text. I googled and found this awesome codepen posted in the GSAP forum (see end of post):

 

 

 I'd like to have something like this codepen (scroll after panel 5) : 

See the Pen bGexQpq?editors=0010 by GreenSock (@GreenSock) on CodePen

But I really don't know how I can do something like this (add a sort of duration maybe ? Or even "scroll-out" when there is no text left to show ?)
Here is an example when I try to simply add another div (see screenshot) : you can see that the canvas is still "playing" (the scroll duration comes from the window height not the canvas height/parent height), and also that is goes way beyond the div.

 

 

So, my question is: how can I make it so it does not goes beyond the div, and that the canvas duration is related to the div size (after div, the canvas is not changing).
 

Also, I'm doing my website with React, and found this npm package : https://www.npmjs.com/package/react-gsap Do you recommend to use it, or should I stick with "basic" gsap ? 

Thank you  .

See the Pen yLOVJxd by GreenSock (@GreenSock) on CodePen

Edited January 8, 2022 by tholeb
codepen showing in the end of post

[Cassie]

Hi there!

 

I'm afraid it's beyond the scope of free help we provide in these forums to combine different codepen demos for you.

But here's a tip from the docs - 

 

Quote

trigger

String | Element - The element (or selector text for the element) whose position in the normal document flow is used to calculate where the ScrollTrigger starts.

You can define the trigger element - so in your case if you wanted that to be a containing element instead of the body - you'd pass the id belonging to that element.

Those demos you've linked to contain a lot of different scrollTrigger techniques so I would highly recommend watching the scrollTrigger explainer video before trying to combine the two as it will give you a better idea of how all of it works.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/

[tholeb]

1 minute ago, Cassie said:

Hi there!

 

I'm afraid it's beyond the scope of free help we provide in these forums to combine different codepen demos for you.

But here's a tip from the docs - 

 

You can define the trigger element - so in your case if you wanted that to be a containing element instead of the body - you'd pass the id belonging to that element.

Those demos you've linked to contain a lot of different scrollTrigger techniques so I would highly recommend watching the scrollTrigger explainer video before trying to combine the two as it will give you a better idea of how all of it works.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/

Hello, thanks a lot for your answer, i'll have a look to the video and the trigger element, I think that's the thing that can solve my problem.