Jump to content
GreenSock

tholeb

Airpods video/image sequence scroll and text

Recommended Posts

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.

image.thumb.png.c12375810e8e09273c523fe391b09df3.png

 

 

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 by tholeb
codepen showing in the end of post
Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×