Jump to content
Search Community

Video Pinned Section

IsaGomez test
Moderator Tag

Recommended Posts

Hi,

I'm trying to make a section with several pinned videos.

My idea is that when you scroll it shows a video and a text item.
I have seen that this effect can be done with images. However when I try to do the same with videos I can't get the second and third video to start.

Any help or guidance is welcome.

Thanks :)

See the Pen gOeyOMO by isagoga (@isagoga) on CodePen

Link to comment
Share on other sites

Hi @IsaGomez welcome to the forum! 

 

It seems to work fine for me! I would advise giving all your ScrollTriggers a name and enabling the markers, so that you can see what is happening when. 

 

See the Pen bGvJVvg?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

Also I'm wondring why you are using an other smooth scroll plugin instead of the one GSAP is providing? Smooth Scroll is build to work with ScrollTrigger, this is probably going to give you a smoother (pun intended) developer experience.

 

https://greensock.com/scrollsmoother/

  • Like 2
Link to comment
Share on other sites

Hi @mvaneijgen,
Thank you very much for your reply.

I finally got the three videos to play and updated the code in codepen.

I still need to adjust the opacities a bit so that the video corresponding to each text item appears and disappears but I think I'm close to get the desired effect.

Regarding Smooth Scroll I thought I was using the one provided by GSAP so thanks for the suggestion and I will adapt it as well.

Best regards

Link to comment
Share on other sites

No problem at all!

 

I would check out the docs for that, lots of demo's and videos showing you all kinds of setups https://greensock.com/docs/v3/Plugins/ScrollSmoother

 

And if you are still stuck, just fork your pen setup everything how you think it should work and post the new demo back here, then surely someone will jump in and help you out!

  • Like 1
Link to comment
Share on other sites

52 minutes ago, IsaGomez said:

I'm trying to add ScrollSmoother and when I added it the animation stopped working.

 

Hello Isa,

 

it looks like in your codepen example you are using an older demo of mine as a basis for the scroll-triggerring, which as it is will not work with ScrollSmoother because it is technically not set up 100% correct.

I posted another updated version of that demo (with ScrollSmoother integrated) in the thread linked below. Maybe that will help.
 

 

 

 

I would definitely recommend also having a look at the other suggestion for how to handle things, following what Blake suggested in that same thread...
 

 

 

... and/or Jack's suggestion for how to handle it in this other recent thread.

 



 

  • Like 1
Link to comment
Share on other sites

Hi @akapowl

Thank you for the modification to your pen.


I have added to my pen the variable 'smoother' to declare ScrollSmoother as you do in your pen.

However, although I see that the ScrollSmoother effect is applied and the video works I don't understand why the text in the right column is not displayed.

 

Any suggestions are welcome ;)
Best regards,

 

Link to comment
Share on other sites

49 minutes ago, IsaGomez said:

Any suggestions are welcome

 

Honestly (and I don't mean this condescending in any way) the best piece of advice I can give you is to not just copy and paste code you think might work for you - that will only get you so far, especially with scroll-driven and/or layout changing animation.

The post I linked to before actually points out the major thing that was needed to be changed in order for it to work properly.
 

On 6/1/2022 at 4:48 PM, akapowl said:

For it to work properly, the pinning would have to happen first, before the setup of the other STs - and for those other STs to work then, a wrapper around the pinned part would be neccessary - which unlike the pinned part, would keep scrolling and thus could be used as the trigger element for the other STs.

 

It doesn't look like you implemented that or the overall changes in the JS.

 

Now depending on how exactly you want things to behave, I'm not even sure this is the best approach to go for, but here is a working version of it.

 

One thing I changed here is instead of toggling the playstate of the videos with the ScrollTriggers for the panels, to toggle it with the ScrollTriggers for the texts, so it is easier to have them synced (meaning playing the first video when the first text is visible and so on).

 

Another is with regard to the 'timing' of the fade - I tweaked start and end of the relevantPanels STs a bit, so now the video will fade out only while the text moves from the center to the top. Getting the timing exactly like you want it, will likely require a bit of fiddeling with the values though - and for that you will need to understand what part of the code does what logic-wise. Maybe this comes close to what you imagined already though.


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

 

 

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...
On 8/24/2022 at 1:51 PM, mvaneijgen said:

No problem at all!

 

I would check out the docs for that, lots of demo's and videos showing you all kinds of setups https://greensock.com/docs/v3/Plugins/ScrollSmoother

 

And if you are still stuck, just fork your pen setup everything how you think it should work and post the new demo back here, then surely someone will jump in and help you out!

 

 

Thanks for the link.

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.
×
×
  • Create New...