![Aesthetic video hero with sticky scroll tutorial in Framer (No-code)](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/645549f1a4d55481d3259fc8_favicon_32x32.png)
May 16, 2023 12:57
Aesthetic video hero with sticky scroll tutorial in Framer (No-code)
Explore our latest Framer tutorial on YouTube that shows you how to create an aesthetic video hero with sticky scroll, without coding.
![Aesthetic video hero with sticky scroll tutorial in Framer (No-code)](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/6463539a963ad9b7d2c098c4_maxresdefault.jpeg)
![Aesthetic video hero with sticky scroll tutorial in Framer (No-code)](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/6463539a963ad9b7d2c098c4_maxresdefault.jpeg)
In the dynamic landscape of web design, creating visually appealing and interactive elements is crucial for user engagement. One such element is the aesthetic video hero with a sticky scroll effect, a captivating feature that can be created without any coding knowledge. This comprehensive guide will walk you through the process of creating this effect using Framer, a popular tool for interactive design. This guide is based on a video tutorial by Matt Jumper, which you can find here.
Initiating Your Project
Start by launching Framer and creating a new project. Drag a new frame onto the canvas and name it 'page wrapper'. Set this to relative 100, change the desktop layout, and add a gap of 56 pixels on all sides. Then, create your first component, which will be your image hover. Set its width to 90 percent and add a text element titled 'product design'.
Building the Image Hover Component
Next, create a new frame within the image hover component and name it 'image over'. Set its width to 90 percent and add a text element. Adjust the text size and alignment as desired. To make the component responsive, set the width of all your content to fill.
Incorporating the Hover Effect
Now, it's time to add the hover effect. Create two more frames within the image over component and set them to relative 100 percent. Name these frames 'left' and 'right'. Then, duplicate these frames and name the duplicates 'image' and 'divider'. Set the width of the image frame to 360 pixels and give it a grey background.
Animating the Hover Effect
To animate the hover effect, you'll need to create two variants of the image over component. Name these variants 'default' and 'over'. In the 'default' variant, bring down the opacity of the image and reduce its size. In the 'over' variant, increase the opacity and size of the image.
Adding Interactions
The final step is to add interactions. For the right-hand side of the image over component, set the interaction to 'Mouse enter' and change it to the 'right' variant. Do the same for the left-hand side, but change it to the 'left' variant.
Customizing Your Image Hover Component
With Framer's variable feature, you can easily customize your image hover component. Simply set variables for the text, number, and image, and you can edit these for each instance of the component.
Making It Responsive
The tutorial also covers how to make your design responsive. This involves setting breakpoints for different devices like tablets and phones, and adjusting the design accordingly. This ensures that your design looks good and functions well on all devices.
Accessibility Considerations
Accessibility is an important aspect of web design. The tutorial provides tips on how to make your design accessible, such as using appropriate H tags for SEO and screen readers. This not only makes your design more user-friendly but also helps with search engine optimization.
A Closer Look at the Video Tutorial
To further enhance your understanding of the process, let's delve into the transcript of the video tutorial by Matt Jumper. This will provide a more detailed, step-by-step breakdown of the process, complementing the guide above.
Matt begins the tutorial by introducing the concept of creating a scrolling hero animation in Framer without any coding. He showcases the final product, which includes blending modes in the navigation, sticky elements, fixed backgrounds, and more. He assures viewers that the process is relatively simple and proceeds to break it down step by step.
He starts with the desktop layout, creating a stack and setting it to fixed with a width of 100 percent and a height of 72. He centers and top lines it, ensuring it's anchored to both the left and the right. He names this the navigation. Inside the navigation, he adds a text tool and writes the brand name, establishing the text styles for the navigation.
Next, he moves on to creating the video background. He inserts a video and sets it to fixed with a width of 100 relative and a height of 100 viewport. He vertically and horizontally aligns it to the center, ensuring it's anchored properly. He then uploads a file for the video background.
Following this, he creates the hero content in the middle. He creates another stack, setting it to fixed so it's sticky. He sets the width to fill and the height to fit, aligning it perfectly. He adjusts the gap and adds padding for a safe zone for mobile. He also adds an animation effect on the appearance of the hero content.
He then addresses the responsive part of the design. He sets the large, medium, and small breakpoints for different devices like tablets and phones, adjusting the design accordingly. He also provides tips on how to make the design accessible, such as using appropriate H tags for SEO and screen readers.
Finally, he concludes the tutorial by reminding viewers of the importance of having only one H1 tag on a page for SEO purposes. He adjusts the tags of the text accordingly to ensure this.
Final Thoughts and Next Steps
The video tutorial provides a more detailed, hands-on approach to creating an aesthetic video hero with a sticky scroll effect in Framer. It complements the guide above by providing a step-by-step walkthrough of the process, complete with tips and tricks for making the design responsive and accessible. Creating an aesthetic video hero with a sticky scroll effect in Framer is a straightforward processonce you understand the steps involved. The key is to start with a clear layout, add the necessary elements, and then animate these elements. This effect can add a dynamic and interactive element to your web design projects, engaging users and enhancing their experience.
Create your own aesthetic video hero with a sticky scroll effect in Framer and see what you can achieve.
In the world of web design, the possibilities are endless. With tools like Framer, you can create a wide range of interactive designs without needing to write code. So, whether you're a seasoned designer or just starting out, Framer is a tool worth exploring.
![Aesthetic video hero with sticky scroll tutorial in Framer (No-code)](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/6463539a963ad9b7d2c098c4_maxresdefault.jpeg)
![](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66c1af95c0ac057a6b4044e3_favicon_32x32.png)
August 18, 2024 11:37
August 18, 2024
Realistic Physics Effect | Framer | No Code
Learn how to create realistic physics effects in Framer without code by checking out this YouTube tutorial, complete with a remix link in the comments.
![Learn how to create realistic physics effects in Framer without code by checking out this YouTube tutorial, complete with a remix link in the comments.](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66c1b2becb3d163f5d143232_maxresdefault.jpeg)
![](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66c1af95c0ac057a6b4044e3_favicon_32x32.png)
August 18, 2024 11:23
August 18, 2024
World's Shortest Framer Course
A breezy intro to Framer, the no-code platform for crafting stylish websites with ease. Perfect for anyone eager to tweak design effortlessly.
![A breezy intro to Framer, the no-code platform for crafting stylish websites with ease. Perfect for anyone eager to tweak design effortlessly.](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66c1af95c0ac057a6b4044e6_maxresdefault.jpeg)
![](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66b762ad53bd411d60a0f365_favicon_32x32.png)
August 10, 2024 15:53
August 10, 2024
Start with Framer: The Anatomy of a Framer Project
Dive into the essentials of a Framer project and explore its core components. Check out this guide to master building with Framer's interface.
![Dive into the essentials of a Framer project and explore its core components. Check out this guide to master building with Framer's interface.](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66b762ad53bd411d60a0f368_maxresdefault.jpeg)
![](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66b762ad53bd411d60a0f365_favicon_32x32.png)
August 10, 2024 15:53
August 10, 2024
Framer Tutorial: Create Animated Gradient Borders
Elevate your Framer designs with animated gradient borders. Follow this easy tutorial to break free from basic solid borders and add some flair to your projects.
![Elevate your Framer designs with animated gradient borders. Follow this easy tutorial to break free from basic solid borders and add some flair to your projects.](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66b762ada4dc7097df5fe865_maxresdefault.jpeg)
![](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66acb42bc129e260290e771e_favicon_32x32.png)
August 10, 2024 11:59
August 10, 2024
Framer Tutorial: Make A Site From Scratch
Beginner Framer tutorial on YouTube to create your first website from a blank canvas. Follow step-by-step guidance for a hands-on learning experience.
![Beginner Framer tutorial on YouTube to create your first website from a blank canvas. Follow step-by-step guidance for a hands-on learning experience.](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66b72bf0d36620466e086d62_maxresdefault.jpeg)
![](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66acb42bc129e260290e771e_favicon_32x32.png)
August 2, 2024 14:30
August 2, 2024
Framer Typography
Framer's July Update now supports OpenType features, enhancing typography with custom fonts like Inter and Fontshare for richer design possibilities.
![Framer's July Update now supports OpenType features, enhancing typography with custom fonts like Inter and Fontshare for richer design possibilities.](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66acc338be0d3c5c5f37c22b_maxresdefault.jpeg)
![Icon of https://www.youtube.com/watch?v=dd8A90dKYKc&ref=hyperframer.com&via=yordanoff&fp_sid=web](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66acb42bc129e260290e771e_favicon_32x32.png)
August 2, 2024 13:32
August 2, 2024
Framer Fetch and Display Dynamic Data from API
Unlock dynamic data on your Framer site with the new Fetch feature. Learn to integrate APIs effortlessly, no coding needed. Discover more in this Framer tutorial.
![Unlock dynamic data on your Framer site with the new Fetch feature. Learn to integrate APIs effortlessly, no coding needed. Discover more in this Framer tutorial.](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66acb5bc3ac299fd633ca61a_maxresdefault.jpeg)
![](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66acb42bc129e260290e771e_favicon_32x32.png)
August 2, 2024 13:25
August 2, 2024
Framer Update: 3D Transforms
Discover Framer's latest update, 3D Transforms, packed with over 10 new features. Take your creativity to the next level with improved effects.
![Discover Framer's latest update, 3D Transforms, packed with over 10 new features. Take your creativity to the next level with improved effects.](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/66acb42bc129e260290e7722_maxresdefault.jpeg)
![Aesthetic video hero with sticky scroll tutorial in Framer (No-code)](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/645549f1a4d55481d3259fc8_favicon_32x32.png)
May 16, 2023 12:57
Aesthetic video hero with sticky scroll tutorial in Framer (No-code)
Explore our latest Framer tutorial on YouTube that shows you how to create an aesthetic video hero with sticky scroll, without coding.
![Aesthetic video hero with sticky scroll tutorial in Framer (No-code)](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/6463539a963ad9b7d2c098c4_maxresdefault.jpeg)
In the dynamic landscape of web design, creating visually appealing and interactive elements is crucial for user engagement. One such element is the aesthetic video hero with a sticky scroll effect, a captivating feature that can be created without any coding knowledge. This comprehensive guide will walk you through the process of creating this effect using Framer, a popular tool for interactive design. This guide is based on a video tutorial by Matt Jumper, which you can find here.
Initiating Your Project
Start by launching Framer and creating a new project. Drag a new frame onto the canvas and name it 'page wrapper'. Set this to relative 100, change the desktop layout, and add a gap of 56 pixels on all sides. Then, create your first component, which will be your image hover. Set its width to 90 percent and add a text element titled 'product design'.
Building the Image Hover Component
Next, create a new frame within the image hover component and name it 'image over'. Set its width to 90 percent and add a text element. Adjust the text size and alignment as desired. To make the component responsive, set the width of all your content to fill.
Incorporating the Hover Effect
Now, it's time to add the hover effect. Create two more frames within the image over component and set them to relative 100 percent. Name these frames 'left' and 'right'. Then, duplicate these frames and name the duplicates 'image' and 'divider'. Set the width of the image frame to 360 pixels and give it a grey background.
Animating the Hover Effect
To animate the hover effect, you'll need to create two variants of the image over component. Name these variants 'default' and 'over'. In the 'default' variant, bring down the opacity of the image and reduce its size. In the 'over' variant, increase the opacity and size of the image.
Adding Interactions
The final step is to add interactions. For the right-hand side of the image over component, set the interaction to 'Mouse enter' and change it to the 'right' variant. Do the same for the left-hand side, but change it to the 'left' variant.
Customizing Your Image Hover Component
With Framer's variable feature, you can easily customize your image hover component. Simply set variables for the text, number, and image, and you can edit these for each instance of the component.
Making It Responsive
The tutorial also covers how to make your design responsive. This involves setting breakpoints for different devices like tablets and phones, and adjusting the design accordingly. This ensures that your design looks good and functions well on all devices.
Accessibility Considerations
Accessibility is an important aspect of web design. The tutorial provides tips on how to make your design accessible, such as using appropriate H tags for SEO and screen readers. This not only makes your design more user-friendly but also helps with search engine optimization.
A Closer Look at the Video Tutorial
To further enhance your understanding of the process, let's delve into the transcript of the video tutorial by Matt Jumper. This will provide a more detailed, step-by-step breakdown of the process, complementing the guide above.
Matt begins the tutorial by introducing the concept of creating a scrolling hero animation in Framer without any coding. He showcases the final product, which includes blending modes in the navigation, sticky elements, fixed backgrounds, and more. He assures viewers that the process is relatively simple and proceeds to break it down step by step.
He starts with the desktop layout, creating a stack and setting it to fixed with a width of 100 percent and a height of 72. He centers and top lines it, ensuring it's anchored to both the left and the right. He names this the navigation. Inside the navigation, he adds a text tool and writes the brand name, establishing the text styles for the navigation.
Next, he moves on to creating the video background. He inserts a video and sets it to fixed with a width of 100 relative and a height of 100 viewport. He vertically and horizontally aligns it to the center, ensuring it's anchored properly. He then uploads a file for the video background.
Following this, he creates the hero content in the middle. He creates another stack, setting it to fixed so it's sticky. He sets the width to fill and the height to fit, aligning it perfectly. He adjusts the gap and adds padding for a safe zone for mobile. He also adds an animation effect on the appearance of the hero content.
He then addresses the responsive part of the design. He sets the large, medium, and small breakpoints for different devices like tablets and phones, adjusting the design accordingly. He also provides tips on how to make the design accessible, such as using appropriate H tags for SEO and screen readers.
Finally, he concludes the tutorial by reminding viewers of the importance of having only one H1 tag on a page for SEO purposes. He adjusts the tags of the text accordingly to ensure this.
Final Thoughts and Next Steps
The video tutorial provides a more detailed, hands-on approach to creating an aesthetic video hero with a sticky scroll effect in Framer. It complements the guide above by providing a step-by-step walkthrough of the process, complete with tips and tricks for making the design responsive and accessible. Creating an aesthetic video hero with a sticky scroll effect in Framer is a straightforward processonce you understand the steps involved. The key is to start with a clear layout, add the necessary elements, and then animate these elements. This effect can add a dynamic and interactive element to your web design projects, engaging users and enhancing their experience.
Create your own aesthetic video hero with a sticky scroll effect in Framer and see what you can achieve.
In the world of web design, the possibilities are endless. With tools like Framer, you can create a wide range of interactive designs without needing to write code. So, whether you're a seasoned designer or just starting out, Framer is a tool worth exploring.