Scrolltrigger video + play on viewport

[Dennyno]

Hi all,

on this project I mixxed up few things, trying to achieve an Apple style scrolling:
1) video container + video itself scale down while scrolling. (Im trying also to make it starting 100vh on mobile, with no luck. Could be the aspect-ratio?)
2) the container appears while scrolling down

3) the video should stay then pinned , in order to allow playing.
4) the playing is then controlled by the scrub, otherwise the video is useless if the users scrolls away and miss it.

The result should be a video that loads and plays only when in viewport (or inside the pinned area ) and when in viewport should be scrubbable.

Actually the code seems working (seems), but Im not sure this is the best way.

Thanks.

Video scrubbing from a @OSUblake's demo 😊

 

See the Pen WNXQxEq by DedaloD (@DedaloD) on CodePen

[OSUblake]

Here's a demo with a helper function for scrubbing videos.

 

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

 

The rest of your questions sound more layout/CSS related, so that's on you. 😉

[OSUblake]

And if you're looking the fill the entire screen with something, using a vmax of 283 is useful. That's assuming an equal aspect ratio.

 

 

[Dennyno]

5 minutes ago, OSUblake said:

Here's a demo with a helper function for scrubbing videos.

 

 

 

 

The rest of your questions sound more layout/CSS related, so that's on you. 😉

Hi Blake, thanks for replying.

I guess the code is similar as the one I get form your previous codepen, in'it?
The problem is that the video starts playing also without 

What's usually the problem when the element (this element, the same of codepen) jumps while scrolling? https://staging11.whynot.media/unlock

 

Really thanks for the hint

 

 

[OSUblake]

Just now, Dennyno said:

I guess the code is similar as the one I get form your previous codepen, in'it?

 

The demo I just posted is for scrubbing. Isn't that what you said you wanted?

 

3 minutes ago, Dennyno said:

What's usually the problem when the element (this element, the same of codepen) jumps while scrolling? https://staging11.whynot.media/unlock

 

Not sure. Is there anyway you can make it do that in a demo?

 

[Dennyno]

8 minutes ago, OSUblake said:

 

The demo I just posted is for scrubbing. Isn't that what you said you wanted?

 

 

Not sure. Is there anyway you can make it do that in a demo?

 

Yes, thank for the demo.
Sorry for the half message, my 8months babyboy was playing with the keyboard.. lol.

The video should also autoplay also when in viewport. Thats why I added also 
 

    onEnter: () => videoElem.play(),
    onEnterBack: () => videoElem.play(),
    onLeave: () => videoElem.pause(),
    onLeaveBack: () => videoElem.pause(),

Not all the users are so smart to understand they have to scroll to view the video, so I think that adding 1) autoplay when in viewport 2) scrubbing for controlling the speed of autoplay... is something clever? Or bad useless idea?

Thanks again for your time

[OSUblake]

Yeah, I'm a little confused on how to approach that because those are conflicting actions, playing the video and scrubbing, so it seems like you need to choose one or the other.

 

Is seems like scrolling down would be easier to hack to together, like you might be able to scrub it before hitting the trigger using another trigger, and then play it once it's inside the trigger, but how are you expecting the video to behave when scrolling up? 

 

[Dennyno]

Backward/Rewind the playing, as the scrub does? 

So the state should be

1) video  not loading outside of the container, kinda like a "loading lazy"

2) video start autoplaying while the container is in viewport

3) video has also the scrubbing while the container is in viewport and has start playing ( so the playing could go faster while scrolling up/down).

Just to know if possible, or I am a foolish

[OSUblake]

5 hours ago, Dennyno said:

Backward/Rewind the playing, as the scrub does? 

 

Well, a video can't play backwards, meaning you can't do something like videoElem.reverse(), so you would probably have to use scrub to go backwards.

 

5 hours ago, Dennyno said:

video has also the scrubbing while the container is in viewport and has start playing ( so the playing could go faster while scrolling up/down).

 

I think the the problem with that is what happens if the user lets the video auto-play for like 90% of it's duration, and then the user starts scrolling? The user might have to scroll a long distance to scrub the remaining 10% of the video.

 

It's seems like a very complicated effect to be able to pull off.

 

[Dennyno]

Hi Blake,  what about loading a gif as video poster, to give the sensation that there's a video there? 💡
Seems the easiest way to make eldest users understanding the movement. 😅

Just one little hint: how to make the scaling staying always on center of the x-axis?

I tried with transformOrigin:center center, but on my demo https://staging11.whynot.media/unlock the animation float to right.

Ps thanks for the code

EDIT: solved the codepen example (just adding the placeholder and cleaning the code, nothing extra, but it works as needed - even it's not the sexiest solution ever 😅)

 

[Vineeth Achari]

On 2/2/2022 at 4:40 AM, OSUblake said:

How do I play the Vimeo video normally in the viewport when scrolling?

 

 

Here's a demo with a helper function for scrubbing videos.

 

 

 

 

The rest of your questions sound more layout/CSS related, so that's on you. 😉

 

[GreenSock]

@Vineeth Achari I don't understand - can you please rephrase your GSAP-specific question and make sure you include a minimal demo? 

[Vineeth Achari]

On 6/28/2022 at 5:27 AM, GreenSock said:

@Vineeth Achari I don't understand - can you please rephrase your GSAP-specific question and make sure you include a minimal demo? 

 

@jack I want similar video play and close button for my website. Please check the url link https://www.purecinema.tv/its-quiet-out-here/ and help out.

[GreenSock]

8 minutes ago, Vineeth Achari said:

@jack I want similar video play and close button for my website. Please check the url link https://www.purecinema.tv/its-quiet-out-here/ and help out.

Sorry, I still don't understand your GSAP-specific question. Please read the forum guidelines - these forums are not for general questions like "I saw this cool effect on another site - please teach me how to build it from scratch", but we're happy to answer any questions about GSAP specifically (like the API). 

 

Of course anyone else is welcome to chime in with a suggestion/answer. I just want to manage expectations about what kind of questions we typically answer here.