- Видео 53
- Просмотров 95 426
Ryze Design Studio
Индия
Добавлен 15 ноя 2011
New Design Tutorial Every Week 😍
Welcome to Ryze! We're not just another UI/UX Design Studio - we're your creative partners in crime. Our mission here on RUclips? To keep you in the loop with the latest design trends, share thrilling industry news, and guide you through fun and easy design tutorials.
On this channel, you'll discover everything you need to know to master design tools like Framer, Spline, Figma and more including in-depth tutorials and beginner's guides.
If you are looking to elevate your existing digital products or kickstart something from scratch with top-tier UI/UX craftsmanship, you've landed in the right place! At Ryze, we're all about crafting digital experiences that speak to your customers' hearts and minds. We're here to shake things up and make digital interactions downright delightful!
Drop us a line at connect@ryze.world to bring your vision to life!
Let's Ryze together! ✨
Welcome to Ryze! We're not just another UI/UX Design Studio - we're your creative partners in crime. Our mission here on RUclips? To keep you in the loop with the latest design trends, share thrilling industry news, and guide you through fun and easy design tutorials.
On this channel, you'll discover everything you need to know to master design tools like Framer, Spline, Figma and more including in-depth tutorials and beginner's guides.
If you are looking to elevate your existing digital products or kickstart something from scratch with top-tier UI/UX craftsmanship, you've landed in the right place! At Ryze, we're all about crafting digital experiences that speak to your customers' hearts and minds. We're here to shake things up and make digital interactions downright delightful!
Drop us a line at connect@ryze.world to bring your vision to life!
Let's Ryze together! ✨
Kling AI Tutorial - Beginner-Friendly and FREE!
Whether you're new to video creation or a seasoned pro, Kling AI makes it effortless to bring your ideas to life. This comprehensive tutorial breaks down everything you need to know about Kling AI, the game-changing video generation platform that's making professional video creation accessible to everyone!
What You'll Learn:
✅ Step-by-step text-to-image, text-to-video and image to video creation process
✅ How to enter prompts and understanding the settings
✅ Insider tips for generating high-quality AI videos
✅ Exploring advanced camera movement options
✅ Customization techniques to make your videos stand out
Key Highlights:
- Completely beginner-friendly tutorial
- No technical skills required
- Le...
What You'll Learn:
✅ Step-by-step text-to-image, text-to-video and image to video creation process
✅ How to enter prompts and understanding the settings
✅ Insider tips for generating high-quality AI videos
✅ Exploring advanced camera movement options
✅ Customization techniques to make your videos stand out
Key Highlights:
- Completely beginner-friendly tutorial
- No technical skills required
- Le...
Просмотров: 521
Видео
Midjourney Tutorial- I spent 40 hours perfecting my Midjourney Workflow so you don’t have to!
Просмотров 344День назад
Learn Midjourney AI from scratch! No experience needed! Beginner Friendly 🎯 What You'll Learn: Complete Interface Walkthrough Essential Parameters & Settings Mastery Creating Photorealistic Images Designing Stunning Illustrations Character Design & Consistency Scene Building & Composition Animation-Ready Asset Creation and more... 🛠️ Technical Skills Covered: Aspect Ratio Optimization Style Ref...
Framer Preloader Tutorial: Create Custom Loading Animations (No Code) | Link To Remix File
Просмотров 1,7 тыс.14 дней назад
Learn how to build stunning preloader animations for your Framer website - no coding required! In this step-by-step guide, I'll walk you through creating smooth, professional loading screens that automatically trigger when your website loads. Perfect for both beginners and intermediate Framer designers, you'll discover how to use components and interactions to craft seamless loading experiences...
Framer Tutorial : Create a Stunning Interactive Header for your Landing Page with Framer Animation
Просмотров 1,2 тыс.21 день назад
Want to instantly transform your website with something unique and interactive-without needing any coding skills? In this no-code Framer tutorial, we'll walk you through creating a draggable header that adds a playful, eye-catching element to your site in just a few minutes. Imagine your visitors immediately drawn to an interactive canvas they can actually move, adding both uniqueness and perso...
Framer Tutorial: CMS for Beginners | Part 1: Understanding the Basics
Просмотров 852Месяц назад
Learn everything you need to know about Framer CMS in this comprehensive tutorial series. In this first episode, we dive deep into: • What is a Content Management System (CMS) and its importance in modern web development • Key features that make Framer CMS user-friendly and efficient • Step-by-step guide to navigating the Framer CMS interface • Exploration of Collections and how they work Compl...
The Secret to Jaw-Dropping 3D Mockups for Packaging, Product, and UI Designs!
Просмотров 643Месяц назад
🎁 Special offer for our viewers: Use code RYZE at checkout for an exclusive 20% discount on Pacdora. Don't miss out on this opportunity to revolutionize your design workflow! If you are struggling to make your UI designs stand out? Feeling overwhelmed by the stunning compositions on Dribbble? Say goodbye to presentation anxiety and hello to Pacdora - your secret weapon for creating jaw-dropping...
Framer Tutorial: Coolest Framer Plugins and How to Use them!
Просмотров 1,2 тыс.Месяц назад
Framer's biggest launch is here-introducing Framer Plugins! In this video, we showcase some of the best Framer plugins that will supercharge your workflow and enhance your design process. I’ll also show you how to use these plugins in real projects, so you can see them in action. These plugins are incredibly useful, free, and I highly recommend them. Don't miss out-discover the top Framer plugi...
Framer Tutorial: The Revealing Cursor that Everyone's Talking about in less than 2 minutes
Просмотров 3 тыс.Месяц назад
Learn how to create stunning masked cursor hover effects in Framer with this comprehensive tutorial! 🖱️✨ 🔍 In this video, you'll discover: 1. Step-by-step guide to creating masked cursor hover effects 2. Common mistakes and how to fix them ❓ Questions? Feel free to reach out in the comments! Thanks for checking out this video! If you find it helpful, consider subscribing for more framer content...
Framer Tutorial: Coolest Background Animations || My Top 10 Secrets to Create Trending Web Designs!
Просмотров 3,5 тыс.Месяц назад
Unlock the power of 10 amazing design resources that top designers use to create stunning, trending websites in 2024! In this quick guide, I'll show you how to transform your site in under 2 minutes with each of these game-changing techniques: ✨ Create mesmerizing god rays effects ✨ Implement abstract animated backgrounds ✨Master pixelated scan aesthetics ✨Discover essential Framer components ✨...
Framer Tutorial: The Ultimate Portfolio Template in 60 Minutes : Land your Dream Job #nocode
Просмотров 2,6 тыс.2 месяца назад
Learn how to create a stunning, job-winning portfolio website template in Framer in just one hour! This comprehensive tutorial covers everything you need to know to start building professional-grade templates. 🔥 This is an All in One Tutorial, You'll Learn: - Website structure and layout principles - Scalable card components with variables - Fixed footer implementation - Apple-inspired sticky s...
Framer Tutorial: Orbit Animation
Просмотров 7762 месяца назад
In this video, we'll walk through the process of creating a basic orbit animation using Framer. This is a common effect you might have seen on websites. We'll cover: ✨ Setting up a basic Framer Motion animation ✨ Creating a circular orbit effect ✨ Making the animation responsive ✨ Some common mistakes to watch out for This orbit animation can be used in different ways: ➡️ Revolving user avatars...
Framer Tutorial: Make the Coolest Overlays for your website
Просмотров 1,3 тыс.2 месяца назад
Learn to create stunning and functional overlays for your website with this comprehensive Framer Design tutorial. We'll cover everything from basic to advanced techniques, ensuring you have the skills to design captivating user experiences. Key Topics: ✨ Common Overlay Types: Explore essential overlays like modals, tooltips, and pop-ups. ✨ Advanced Overlay Design: Discover how to create visuall...
Framer Tutorial: Make Responsive Websites like a Pro (Go from Zero to Hero)
Просмотров 2,2 тыс.2 месяца назад
From Basics to Building Responsive Websites Part 1: Framer Fundamentals Uncover the secrets that most tutorials don't tell you! We'll explore Framer as a powerful interface for designing responsive websites. Get ready for an in-depth understanding of: - Stacks: Learn how to use them effectively for layout organization - Frames: Discover their role in creating responsive designs - Layout Options...
Framer Tutorial : Add Cool Interactive Widgets to your Websites for Free
Просмотров 1,3 тыс.3 месяца назад
Elevate Your Website with Customizable Widgets for FREE Ever wanted to integrate your Spotify playlist, Google Calendar, or social media feed directly into your @Framer website? In this tutorial, we'll show you how to do it effortlessly with just a few clicks. Discover how to add these interactive elements to your site, enhancing user engagement and providing a more personalized experience. And...
Framer Tutorial: Add Automatic Light and Dark Mode to your site
Просмотров 5873 месяца назад
Framer Tutorial: Add Automatic Light and Dark Mode to your site
Framer Tutorial - Create Animated Gradient Borders | 3 Different Animation Styles!
Просмотров 1,7 тыс.3 месяца назад
Framer Tutorial - Create Animated Gradient Borders | 3 Different Animation Styles!
Framer Tutorial - Create a Responsive Website Navigation
Просмотров 9363 месяца назад
Framer Tutorial - Create a Responsive Website Navigation
Framer Tutorial - Build a Landing Page from Scratch
Просмотров 2,7 тыс.4 месяца назад
Framer Tutorial - Build a Landing Page from Scratch
Create Professional Style Guides for Websites - Framer Tutorial
Просмотров 2,3 тыс.4 месяца назад
Create Professional Style Guides for Websites - Framer Tutorial
5 Amazing Button Animations - Framer Tutorial
Просмотров 1,8 тыс.4 месяца назад
5 Amazing Button Animations - Framer Tutorial
Create an Interactive 3D Carousel - Framer Tutorial
Просмотров 1,6 тыс.4 месяца назад
Create an Interactive 3D Carousel - Framer Tutorial
Create, Customise and Build Multi-Step/Multi-Page Forms - Framer Tutorial
Просмотров 2,8 тыс.4 месяца назад
Create, Customise and Build Multi-Step/Multi-Page Forms - Framer Tutorial
Create a Parallax Scroll - Framer Tutorial
Просмотров 3,1 тыс.5 месяцев назад
Create a Parallax Scroll - Framer Tutorial
Advance Scroll Animation - Framer Tutorial
Просмотров 1,5 тыс.5 месяцев назад
Advance Scroll Animation - Framer Tutorial
Fixed Footer that Reveals on Scroll - Framer Tutorial
Просмотров 4,2 тыс.5 месяцев назад
Fixed Footer that Reveals on Scroll - Framer Tutorial
Create Custom Cursors in less than 5 minutes - Framer Tutorial
Просмотров 8665 месяцев назад
Create Custom Cursors in less than 5 minutes - Framer Tutorial
Scroll Animations like Apple - Framer Tutorial
Просмотров 2,2 тыс.6 месяцев назад
Scroll Animations like Apple - Framer Tutorial
3D Text Transform on Scroll - Framer Tutorial
Просмотров 7156 месяцев назад
3D Text Transform on Scroll - Framer Tutorial
Create a 3D card flip interaction - Framer Tutorial
Просмотров 3,2 тыс.6 месяцев назад
Create a 3D card flip interaction - Framer Tutorial
Waiting for your Framer video :)
Coming this Thursday!! 😍
Gonna use this, thank you
Awesome! 💪
This is awesome!
Thank you ✨
When you adjust the viewport height there was a transition missing out what you did between because the sizes of the frames in each clip are different 10:00
Just follow what I am saying, no major transition has been cut out.
Love it !
This is a gem! thank you!
Thank you. which video recorder do you use to record video?
This one is just the internal mac screen recorder
Hello, I have watched this video multiple times, but it is not working when my stack with code overide is not in first view. If it is in view port, then effect works.
Can we only create light modes and dark modes using this? How about adding different pictures in both these modes ?
You can use variables for images!
@@Ryze_Design_Tutorials Thanks! Can you elaborate a bit more on how variables could be used ??
Thanks
✨
Great tutorial. Do you know how to prevent page scrolling while preloader is active?
Yes man I found a way. Go to framer university ressources and search for the "scroll stopper" component. Then add it into your variant 1 (don't worry, he is invisible), and the make sure to make it "not visible" into your end screen variant.
To prevent page scrolling when a preloader is active in Framer, you can disable the scroll temporarily with a bit of custom code. I am not a coding expert but this is what chat gpt says. Here’s a quick method to achieve this: 1. Add a Preloader Layer: In Framer, add a preloader layer that covers the entire viewport 2. Use Code Overrides: - Go to Code > New Code File and create a new code file to add a JavaScript override. - Use the `useEffect` hook to toggle the body overflow when the preloader is active. 3. Example Code: ```javascript import { useEffect } from "react"; export function useDisableScroll(isPreloaderActive) { useEffect(() => { if (isPreloaderActive) { document.body.style.overflow = "hidden"; // Prevent scrolling } else { document.body.style.overflow = ""; // Re-enable scrolling } return () => { document.body.style.overflow = ""; // Reset scroll on unmount }; }, [isPreloaderActive]); } ``` 4. Apply the Hook: - In your preloader component, import and use `useDisableScroll(isPreloaderActive)`, passing in the active state of your preloader. With this code, scrolling will be disabled while the preloader is active and re-enabled once it disappears. This approach works well for most Framer projects and prevents the page from shifting while loading.
Fantastic! Amazing tutorial. Thank you so much!
You're very welcome!
Shit bro I was actually thinking from past few days about these cool preloader on how they works and how add them! but never gave a try to search but you just popped into my feed 🤓 thank you soooo much
So happy it came up in your feed! 💪
Please make more of these. You are a star 😊
Thank you so much! 🙏
Oh wow 🤩
Thank you 🙏
Love this! 😍
Thank you ✨
Trust me when I say this , best framer mentor you can ever meet and a great resource to learn from , stop going through other resources and just stick to this channel , I’m preety confident you can become a pro at framer ❤ because of this channel
Thank you for such wonderful words! It means a lot! ✨🙏
when i copy paste the gradient and i try to send it to back, it doesnt, it still shows in front of the letters, anyone knows why?
Try moving from the layers panel and check for the z index
How can i learn all this cool tricks
Just subscribe to the channel 😋
Pls make a video on how to add light and dark mode toggle manual interactive button inside framer....
Great idea, I'll add it to the list! 🙌
This is SO good
Thank you 🙏
How to make this responsive for all devices? Please make a video on that too.
Literally just adjust the sizes of the component frame
ryze design studio 🔛🔝
Thank you 🙏
This is so slick!
Thank you 🙏
Thanks
Thanks, I am searching a playlist for Framer, I get a best playlist for me
Thanks for this, your voice is very nice like ai generated😅
Thank you !
Nicely explained. I will be using this animation in my next project. Cheers!
Sounds amazing 🤩
My Fav! Thanks!
So glad!
how to remove horizontal scrollbar??
Saving to "Watch later" playlist to check later woohoo thanks! 🙌🎉
Hope this helps! ✨
Hi Shreya, i have gone through your other videos on your channel for Framer. Firstly, your presentation skills is excellent! As i said before i am shifting my website from WordPress to Framer in my previous comment in one of your videos (if you remember). You have really helped me a lot! Words are not enough to thank you! Your channel definitely deserves more subscribers and views, very much underrated! 😊
I'm so happy to hear you're enjoying the channel! 🎉
hi sheya please make a vdo on type write effect in framer please please
Will do!
Thanks Sheya for helping out with my Framer project and delivering so quickly!
Happy to help! ✨Thank you so much!
Thie was SO NEEDED! Thank you
🙏
where do you get the images
Different sources but mainly Dribbble 😍
When i play it on a white background it shows a black background
Make sure you removed the particle component’s bg
Very well explained! Thanks so much for this walkthrough, helped to see it with a real example too!
Thank you ✨✨
This tutorial is so much better than the other ones available on the internet, they all include some manual coding. But I have a question. Can this effect be applied over an image? I mean like, the circle revealing an image or an illustration behind it (may be some sort of mask on the cursor) or a custom cursor effect?
Additional Note: In Framer, the wrap feature functions best when the parent container has a fixed width. If the width is dynamic (based on content or viewport), the wrap behavior might not perform as expected. To ensure proper wrapping of elements, it's important to define a consistent width for the container or use Auto Layout to better control how elements stack and wrap
how do you make this SEO optimized when I try to publish my site it gave me a warning and it said it will make SEO and loading times slower
please make a type writer effect in framer
When I try moving to back ir does move on the layer but not on the view. I want to put it inside a header and I have a button that slides down, in the preview if I try clicking on it, it won't work since the particles are still on top, what can I do? T_T
Thank you for sharing 🎉
🙏
Waiting for Remix Link
Please follow the twitter link in the caption ✨
👏👏👏👏👏👏
Thank you 🙏🙏
GOLD!!
Haha yess
Fabulous
🙏🙏
I wanted to get it but there's a huge price difference... for you the monthly package is $9/month and for me it is €26/month... such a rip-off, what are they doing extra for european users that they need to charge triple the US price? whatever... nice video though! 👍