Create SICK Video Scroll Animations in Framer
Вставка
- Опубліковано 2 жов 2024
- bit.ly/4aGMSIr 👈 From Figma to Framer (Code: FIGMATOFRAMER for 40% off!)
-- Today, I'm going to show you exactly how to integrate a video scrub animation based on scroll. This technique ties the video playback to the scroll position, as opposed to tying the video to time (as it traditionally is). Framer makes it super easy to integrate this as there's very minimal code involved.
Video asset (Only for learning use):
coursetro.s3.a...
Remix link:
framer.com/pro...
Let's get started!
#lowcode #framer
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
The new framer course is just about finished! Can't wait to see what all of my students end up creating. Grab your spot here! bit.ly/4aGMSIr
Is there any alternative for free hosting besides Amazon S3? It's not possible on UA-cam, correct?
I cant scroll with trackpad and mouse but it works flawlessly when the scroll bar is moved
really really great to have this, and im working in framer too, works on desktop but blank space when viewing in mobile version
This is some cool shit 😻
how can I apply this to a Main component? Or, better said, to nested components?
Can you do this in HTML, CSS and JS? May be also using Gsap and Lenis?
Yes. Rule of thumb: If you can do it in Framer/webflow, you can do it in HTML/CSS/JS. Why? Because that's all those services use, too.
Yo this was really helpful! Thanks!
First view and first comment. ❤️❤️
Cool fx
I tried this with a js library in a test project. It works smoothly only on high-end devices. It gets stuck and the whole device stucks. So this effect isn't good for every device
Depends on what the project is and the target audience. For a design agency landing page, or a tech landing page of some sort, I'd say it's a go -- because chances are, most people will be on desktop. On mobile, you can remove a lot of the heavy loading stuff, even the video.
First
Gooooood