Create SICK Video Scroll Animations in Framer
HTML-код
- Опубликовано: 29 май 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.amazonaws.com/st...
Remix link:
framer.com/projects/new?dupli...
Let's get started!
#lowcode #framer
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
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
really really great to have this, and im working in framer too, works on desktop but blank space when viewing in mobile version
Cool fx
This is some cool shit 😻
Gooooood
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.
First view and first comment. ❤️❤️
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