Keep elements underneath the Scroll-Video while scrolling

Hi bf-community & hi @Daniele,

I’m using the scroll-video element and it works good so far! The only thing I can’t figure out is how to make the video sticky without the sections underneath it to move up while scrolling. The sections should stay below the video-element.

Here is the page I’m using for this: https://new.dinabios.com/dinaqube/

I look forward to any help :slight_smile:

1 Like

Password required :slight_smile:

ah my bad, I deactivated it, can you access it now? @Daniele

Hey @Daniele :raised_hands: just wanted to check if you maybe had a chance to have a look into this?

Try creating a new timeline, in which you activate pin for the section containing your video. Then play with the duration so it ends at 100% 500% or something like that. Haven’t played around with pinning in a while but that should get you started and then we can tweak and fix from there.

Position sticky is kind of a different way of position fixed, just that it’s temporary. Meaning while the videos section is sticky, other content will keep scrolling, think of a product filter sidebar that stays put while you scroll through product listings.

2 Likes

Hey manc! Thanks a ton for the tip, that did the trick and now it works perfectly :slight_smile: :clap:

Awesome, glad it worked :slight_smile: What you could also try now, is adding another timeline for the section that comes after the video. When the top reaches maybe -50%, so around where the logo at the end of the video starts fading out, translate that section up on the Y-axis. Goal being to remove some of the whitespace after the vid and make it kinda scroll in a lil faster for a floating parallax effect type of thing haha. Just a thought though :slight_smile:

1 Like

Ah great thought :bulb: I’ll try that out as well! Thank you for your amazing help, really appreciate it :slight_smile:

1 Like

I have another question: do you know why the video is not playing as smoothly in Chrome as it is in Safari?

I’m guessing it has something to do with the encoding of the video (discussed here previously but without an actual solution Scroll Video buggy when scrolling up on Firefox - #8 by neofix).

Here is a long thread about optimizing videos for the library being used → Encoding video for the web · GitHub
It’s kinda involved so might wanna glance over it and maybe try re-exporting or converting using other tools if you don’t wanna fiddle too much with commands

There is an issue on github saying it’s janky on chrome which is just 4 days old → Video jerked in chrome · Issue #76 · dkaoster/scrolly-video · GitHub I’m guessing the poster will just be directed to the thread I linked above about encoding but who knows, maybe someone posts another solution there.

If you do get it figured out or get stuck using ffmpeg, feel free to post back :slight_smile:

1 Like