Ryze Design Studio
Ryze Design Studio
  • Видео 53
  • Просмотров 95 426
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...
Просмотров: 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
Animate 3D objects in @splinetool
Просмотров 2616 месяцев назад
Animate 3D objects in @splinetool

Комментарии

  • @ShubhamSaket.
    @ShubhamSaket. 2 дня назад

    Waiting for your Framer video :)

  • @samratbasak771
    @samratbasak771 4 дня назад

    Gonna use this, thank you

  • @innovistafeedingsolutionsp553
    @innovistafeedingsolutionsp553 4 дня назад

    This is awesome!

  • @antonyraphy2860
    @antonyraphy2860 6 дней назад

    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

    • @Ryze_Design_Tutorials
      @Ryze_Design_Tutorials 5 дней назад

      Just follow what I am saying, no major transition has been cut out.

  • @sritamabagchi849
    @sritamabagchi849 12 дней назад

    Love it !

  • @MrMuffinDreamSMP
    @MrMuffinDreamSMP 14 дней назад

    This is a gem! thank you!

  • @sharzilalve6694
    @sharzilalve6694 14 дней назад

    Thank you. which video recorder do you use to record video?

  • @aashish_lal_s
    @aashish_lal_s 16 дней назад

    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.

  • @si_isonyt
    @si_isonyt 17 дней назад

    Can we only create light modes and dark modes using this? How about adding different pictures in both these modes ?

    • @Ryze_Design_Tutorials
      @Ryze_Design_Tutorials 16 дней назад

      You can use variables for images!

    • @si_isonyt
      @si_isonyt 16 дней назад

      @@Ryze_Design_Tutorials Thanks! Can you elaborate a bit more on how variables could be used ??

  • @dushyantthakur4373
    @dushyantthakur4373 17 дней назад

    Thanks

  • @HermannLJ
    @HermannLJ 17 дней назад

    Great tutorial. Do you know how to prevent page scrolling while preloader is active?

    • @julesrobichon7981
      @julesrobichon7981 17 дней назад

      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.

    • @Ryze_Design_Tutorials
      @Ryze_Design_Tutorials 17 дней назад

      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.

  • @gusnwanya
    @gusnwanya 18 дней назад

    Fantastic! Amazing tutorial. Thank you so much!

  • @tonystarkmowa
    @tonystarkmowa 18 дней назад

    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

  • @christaylor2500
    @christaylor2500 18 дней назад

    Please make more of these. You are a star 😊

  • @finalrenderstudios1122
    @finalrenderstudios1122 18 дней назад

    Oh wow 🤩

  • @innovistafeedingsolutionsp553
    @innovistafeedingsolutionsp553 18 дней назад

    Love this! 😍

  • @ralphstieve8762
    @ralphstieve8762 18 дней назад

    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

  • @fantazero4618
    @fantazero4618 20 дней назад

    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?

  • @tonystarkmowa
    @tonystarkmowa 22 дня назад

    How can i learn all this cool tricks

  • @ngedits.5155
    @ngedits.5155 23 дня назад

    Pls make a video on how to add light and dark mode toggle manual interactive button inside framer....

  • @finalrenderstudios1122
    @finalrenderstudios1122 24 дня назад

    This is SO good

  • @rajnomadheart
    @rajnomadheart 24 дня назад

    How to make this responsive for all devices? Please make a video on that too.

  • @samratbasak771
    @samratbasak771 24 дня назад

    ryze design studio 🔛🔝

  • @InnovistaConsulting
    @InnovistaConsulting 24 дня назад

    This is so slick!

  • @dushyantthakur4373
    @dushyantthakur4373 27 дней назад

    Thanks

  • @dushyantthakur4373
    @dushyantthakur4373 28 дней назад

    Thanks, I am searching a playlist for Framer, I get a best playlist for me

  • @dushyantthakur4373
    @dushyantthakur4373 28 дней назад

    Thanks for this, your voice is very nice like ai generated😅

  • @thetrojan_horse8020
    @thetrojan_horse8020 Месяц назад

    Thank you !

  • @shamirk.a7172
    @shamirk.a7172 Месяц назад

    Nicely explained. I will be using this animation in my next project. Cheers!

  • @jeromysmith8854
    @jeromysmith8854 Месяц назад

    My Fav! Thanks!

  • @nakshatramane7196
    @nakshatramane7196 Месяц назад

    how to remove horizontal scrollbar??

  • @AkinsRealm
    @AkinsRealm Месяц назад

    Saving to "Watch later" playlist to check later woohoo thanks! 🙌🎉

  • @BhaskaraVijay
    @BhaskaraVijay Месяц назад

    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! 😊

  • @experiment_worlds
    @experiment_worlds Месяц назад

    hi sheya please make a vdo on type write effect in framer please please

  • @satwadhidas7250
    @satwadhidas7250 Месяц назад

    Thanks Sheya for helping out with my Framer project and delivering so quickly!

  • @finalrenderstudios1122
    @finalrenderstudios1122 Месяц назад

    Thie was SO NEEDED! Thank you

  • @MaxBat-k8c
    @MaxBat-k8c Месяц назад

    where do you get the images

  • @quotesdior686
    @quotesdior686 Месяц назад

    When i play it on a white background it shows a black background

  • @shroots88
    @shroots88 Месяц назад

    Very well explained! Thanks so much for this walkthrough, helped to see it with a real example too!

  • @verysidd
    @verysidd Месяц назад

    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?

  • @khamzateedira9021
    @khamzateedira9021 Месяц назад

    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

  • @MaxBat-k8c
    @MaxBat-k8c Месяц назад

    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

  • @experiment_worlds
    @experiment_worlds Месяц назад

    please make a type writer effect in framer

  • @angieguridihoran8723
    @angieguridihoran8723 Месяц назад

    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

  • @finalrenderstudios1122
    @finalrenderstudios1122 Месяц назад

    Thank you for sharing 🎉

  • @LetsUpWithNOCODE
    @LetsUpWithNOCODE Месяц назад

    Waiting for Remix Link

  • @LetsUpWithNOCODE
    @LetsUpWithNOCODE Месяц назад

    👏👏👏👏👏👏

  • @alexinaustralia
    @alexinaustralia Месяц назад

    GOLD!!

  • @hariskhanzada7507
    @hariskhanzada7507 Месяц назад

    Fabulous

  • @paul_subtirel
    @paul_subtirel Месяц назад

    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! 👍