Design Synth
Design Synth
  • Видео 69
  • Просмотров 45 009
Responsive Scroll Animation with GSAP & ScrollTrigger | Build a Stunning Website with HTML, CSS & JS
Learn how to create a stunning responsive website with scroll animations using GSAP & ScrollTrigger! In this step-by-step tutorial, we’ll guide you through designing a fully responsive website with smooth animations, interactive effects, and professional styling using HTML, CSS, and JavaScript. Whether you're a beginner or a pro, this video will help you master responsive web design with GSAP.
📌 What You’ll Learn:
•Responsive design techniques for any screen size.
•Using GSAP & ScrollTrigger for animations.
•HTML & CSS tips for modern layouts.
•JavaScript for interactive web elements.
💡 Key Highlights:
•Fully responsive scroll animations.
•Smooth transitions and interactive effects.
•Perfect for p...
Просмотров: 800

Видео

How to Create a Stunning Furniture E-Commerce Website | HTML, CSS & JavaScript Tutorial
Просмотров 69814 часов назад
🎨 Learn to build a modern and responsive furniture e-commerce website using HTML, CSS, and JavaScript! In this step-by-step tutorial, we'll guide you through creating a professional UI/UX design with clean layouts, animations, and user-friendly features. Perfect for designers and developers looking to enhance their portfolio! 🔗 Source Code: drive.google.com/file/d/1CE3eQPei-S_ABITZF_jcuDx5ZoaNz...
Stunning Header with Scroll Animation using GSAP & Scroll Trigger | HTML, CSS & JS Tutorial
Просмотров 504День назад
In this tutorial, you’ll learn how to create an engaging website with scroll animations using GSAP and ScrollTrigger. We'll walk you through building smooth and dynamic animations that trigger as you scroll through the page, enhancing your website's user experience. This step-by-step guide covers everything from setting up your project with HTML, CSS, and JavaScript to leveraging the power of G...
How to Create a Modern Responsive Plant Website Using HTML, CSS & JavaScript | Step-by-Step Tutorial
Просмотров 95314 дней назад
Learn how to build a beautiful, responsive plant website from scratch using HTML, CSS, and JavaScript. This step-by-step tutorial guides you through creating a nature-inspired design with eye-catching visuals, smooth animations, and mobile-friendly layouts. Perfect for beginners and web design enthusiasts looking to create a modern plant-themed website. Watch now and bring your website ideas to...
Build a Modern Online Bookstore E-Commerce Website with HTML, CSS & JavaScript | Full Tutorial
Просмотров 56314 дней назад
Source Code:drive.google.com/file/d/1pQ_-fQMY9AtcqCaSa13UylxQRlBbp3cO/view?usp=sharing In this complete tutorial, learn how to create a professional online bookstore e-commerce website using HTML, CSS, and JavaScript. This step-by-step guide covers everything from designing a user-friendly interface to adding interactive features like book search, category filters, and an animated shopping cart...
Build a Stunning Flight Booking Landing Page with HTML and CSS | Step-by-Step Tutorial
Просмотров 1,9 тыс.21 день назад
Source Code:drive.google.com/file/d/12DRSnUca4TtPvJ43hIwFBHhX4OByqK4R/view?usp=sharing In this step-by-step tutorial, you'll learn how to create an eye-catching flight booking landing page using only HTML and CSS. We’ll go through building a beautiful, responsive design that’s perfect for travel and airline websites. From designing a modern hero section with stunning visuals to structuring key ...
Create a Spooky Paper-Themed Halloween Website Header with GSAP | HTML, CSS, & JS Tutoria
Просмотров 92221 день назад
Bring your website to life this Halloween with a unique, paper-themed header! 🎃 In this tutorial by Design Synth, we’ll create a spooky Halloween website header design that’s perfect for the season. Using only HTML and CSS, we’ll craft a fun, ghostly paper-cut effect with eerie animations to give your site a festive edge. 🔗 Source Code: drive.google.com/file/d/1UC6jIn_JpPUqjI0ne8WeFcP_xrP9x7R9/...
Create a Cozy Autumn-Themed Website with Falling Leaves Effect | HTML, CSS & JavaScript Tutorial
Просмотров 676Месяц назад
In this tutorial, learn how to create a stunning autumn-themed website with a beautiful falling leaves effect using HTML, CSS, and JavaScript. I'll guide you through each step of building this seasonal design, from setting up the warm color palette to animating the leaves to drift gently across the screen. Perfect for adding a cozy, fall-inspired touch to any website, this project is ideal for ...
How to Create a Responsive E-Commerce Website Using HTML, CSS & JavaScript | Step-by-Step Tutorial
Просмотров 809Месяц назад
In this tutorial, you’ll learn how to create a stunning responsive e-commerce website using HTML, CSS, and JavaScript from scratch! This step-by-step guide will cover how to design a fully functional online store layout, including product pages, shopping cart functionality, and a responsive navigation menu that adapts seamlessly to different screen sizes. By the end of this video, you’ll have b...
Create a Stunning Movie Website with HTML, CSS & JavaScript | Step-by-Step Movie Website Tutorial
Просмотров 1,1 тыс.Месяц назад
source code:drive.google.com/file/d/1k_x6VwRgdaZT9DC0PsOI5SgHdrXyp6_n/view?usp=sharing In this step-by-step tutorial, learn how to create a professional movie website using HTML, CSS, and JavaScript. This tutorial is perfect for beginners and intermediate developers who want to design a modern, eye-catching website for movies or entertainment. You'll learn essential web design techniques, from ...
Build a Stunning Responsive Camping Website | HTML, CSS & JavaScript Tutorial
Просмотров 2 тыс.Месяц назад
In this video, you'll learn how to create a fully responsive camping website using HTML, CSS, and JavaScript. This tutorial will guide you step-by-step through building a modern, functional design that looks great on any device. From the layout to the navigation menu, hero section, and interactive features, we cover everything you need to create a stunning website for camping or outdoor adventu...
How To Make a Quiz App Using JavaScript: Step-by-Step Guide | Build Quiz App with HTML, CSS & JS
Просмотров 223Месяц назад
Source Code: drive.google.com/file/d/1gRVyN_dyf175Q5DDh8_gd_aiSAty_CPY/view?usp=sharing Welcome to this in-depth tutorial where you'll learn how to create a fully functional Quiz App using HTML, CSS, and JavaScript. This step-by-step guide will show you how to build an interactive quiz app from scratch, complete with multiple-choice questions, a score tracker, and dynamic feedback. Whether you'...
How to Create a GSAP Animation Header Section | Simple and Easy GSAP Tutorial for Beginners
Просмотров 435Месяц назад
Source Code:drive.google.com/file/d/1mkEfnhzV3c50AMh7ZztOsRSW-hj9FcD6/view?usp=sharing In this video, I'll show you how to create a stunning animated header section using GSAP (GreenSock Animation Platform) in a simple and easy way. This beginner-friendly tutorial will help you add smooth and engaging animations to your website header, enhancing user experience with just a few lines of code. If...
Build Responsive Egypt Travel Website with Parallax Effect | HTML, CSS & JavaScript | Part 2
Просмотров 638Месяц назад
Source Code: drive.google.com/file/d/1AC_lulS2MYIdJP2_WW4ZUbN6_bKFU0QY/view?usp=sharing In this tutorial, we'll build a Responsive Egypt Travel Website using HTML, CSS, and JavaScript, featuring a stunning parallax effect for an engaging user experience. This is Part 1 of the series, where we design the travel landing page with smooth scrolling animations, immersive visuals, and a modern layout...
Build Responsive Egypt Travel Website with Parallax Effect | HTML, CSS & JavaScript | Part 1
Просмотров 358Месяц назад
Images Used: 📸 drive.google.com/file/d/11T-W8aaIn1jW0iztYlh0svKkEzk627Ew/view?usp=sharing Welcome to Part 1 of our exciting two-part series on building a stunning and fully responsive Egypt travel website! In this tutorial, we’ll guide you through creating a professional travel landing page using HTML, CSS, and JavaScript. You’ll learn how to design an engaging and visually appealing website th...
Creating Awesome Travel Website Using HTML, CSS & JS | HTML CSS JavaScript Projects for Beginner
Просмотров 632Месяц назад
Creating Awesome Travel Website Using HTML, CSS & JS | HTML CSS JavaScript Projects for Beginner
Stunning Scroll Animations with GSAP & ScrollTrigger | Build Dynamic Websites with HTML, CSS, & JS
Просмотров 1,2 тыс.2 месяца назад
Stunning Scroll Animations with GSAP & ScrollTrigger | Build Dynamic Websites with HTML, CSS, & JS
How To Make Quiz App Using JavaScript | Build Quiz App With HTML CSS & JavaScript | Step-by-Step
Просмотров 6442 месяца назад
How To Make Quiz App Using JavaScript | Build Quiz App With HTML CSS & JavaScript | Step-by-Step
Stunning Hoverable Login Form with Full-Screen Color Animation & Validation | HTML, CSS, JavaScript
Просмотров 2432 месяца назад
Stunning Hoverable Login Form with Full-Screen Color Animation & Validation | HTML, CSS, JavaScript
☕ Build a Complete Responsive Coffee Website Using HTML, CSS and JavaScript Pure HTML CSS JS Project
Просмотров 8362 месяца назад
☕ Build a Complete Responsive Coffee Website Using HTML, CSS and JavaScript Pure HTML CSS JS Project
☕ Responsive Coffee Shop Website Design Tutorial | HTML, CSS & JavaScript | Step-by-Step Guide
Просмотров 1,3 тыс.2 месяца назад
☕ Responsive Coffee Shop Website Design Tutorial | HTML, CSS & JavaScript | Step-by-Step Guide
🎧Create a Stunning Headphone Website |Modern Header & Hero Section| HTML, CSS & JavaScript Tutorial💻
Просмотров 5652 месяца назад
🎧Create a Stunning Headphone Website |Modern Header & Hero Section| HTML, CSS & JavaScript Tutorial💻
Create a Stunning Responsive Navigation Bar with Cool Color Effects Using HTML, CSS & JavaScript💻✨
Просмотров 1462 месяца назад
Create a Stunning Responsive Navigation Bar with Cool Color Effects Using HTML, CSS & JavaScript💻✨
How to Make a Responsive Website Using HTML, CSS, and JavaScript with GSAP Animation Tutorial
Просмотров 4322 месяца назад
How to Make a Responsive Website Using HTML, CSS, and JavaScript with GSAP Animation Tutorial
How to Make an Modern Animated Website Using HTML, CSS & JS | Create a Food Website Tutorial
Просмотров 2772 месяца назад
How to Make an Modern Animated Website Using HTML, CSS & JS | Create a Food Website Tutorial
How to Make an Awesome Modern Website Using HTML, CSS & JS | Create a Food Website Tutorial
Просмотров 3352 месяца назад
How to Make an Awesome Modern Website Using HTML, CSS & JS | Create a Food Website Tutorial
How to Make an Animated Website Using HTML, CSS, & JavaScript | Header Design Tutorial
Просмотров 2243 месяца назад
How to Make an Animated Website Using HTML, CSS, & JavaScript | Header Design Tutorial
How to Make an Animated Website Design Using HTML & CSS | Step-by-Step Tutorial
Просмотров 4713 месяца назад
How to Make an Animated Website Design Using HTML & CSS | Step-by-Step Tutorial
How to Make a Modern Website with HTML & CSS | Header and Hero Section Design Tutorial
Просмотров 2573 месяца назад
How to Make a Modern Website with HTML & CSS | Header and Hero Section Design Tutorial
How to Create a Responsive Product Card Using HTML & CSS | Step-by-Step Web Design Tutorial
Просмотров 663 месяца назад
How to Create a Responsive Product Card Using HTML & CSS | Step-by-Step Web Design Tutorial

Комментарии

  • @YNL-f1d
    @YNL-f1d День назад

    THANK YOU

    • @DesignSynth
      @DesignSynth 22 часа назад

      You're very welcome! 😊 I'm so glad you found the tutorial helpful. I truly enjoy creating these videos and sharing knowledge with others. If you have any questions or suggestions for future tutorials, feel free to let me know. Happy coding! 🚀

    • @YNL-f1d
      @YNL-f1d 18 часов назад

      @@DesignSynth Yes, the truth is, I am programming my own website that I can market and publish my works, and what I have managed to do at the moment is the design of the website, but in the body of the website, I do not know what to do and how to present this idea properly

  • @Achrafhakim-o1f
    @Achrafhakim-o1f 2 дня назад

    Good job but this shit is not yours bruv

    • @DesignSynth
      @DesignSynth День назад

      Thank you for your comment! I want to clarify that I created this project, including the images and designs, entirely on my own. You can check the upload date on my channel for verification. I always put a lot of effort into ensuring my tutorials are original. I appreciate your understanding and support!

  • @gourabsamanta3590
    @gourabsamanta3590 2 дня назад

    Please make it responsive.....

    • @DesignSynth
      @DesignSynth День назад

      Thank you for your suggestion! I’m glad you liked the project. I’ll definitely consider making it responsive in future updates or tutorials. Stay tuned for more content, and I appreciate your feedback!

  • @gourabsamanta3590
    @gourabsamanta3590 2 дня назад

    You are really awesome...i love you content.....and this is one of the greatest login page i have ever seen

    • @DesignSynth
      @DesignSynth День назад

      Thank you so much for your kind words and support! ❤️ It means a lot to hear that you love my content and enjoyed the login page design. Your encouragement motivates me to keep creating more awesome tutorials! 😊

  • @gourabsamanta3590
    @gourabsamanta3590 2 дня назад

    Source code please

    • @DesignSynth
      @DesignSynth 2 дня назад

      Thank you so much for your support! 😊 The source code is explained step by step in the tutorial to make it easier to follow. If you need the code, you can find it in previous of the series. Feel free to reach out if you have any questions!

  • @PrashantPant-dy2su
    @PrashantPant-dy2su 3 дня назад

    wow sir provide me source code

    • @DesignSynth
      @DesignSynth 2 дня назад

      Thank you for your kind words! 😊 The source code is covered in the tutorial to help you understand the process step by step. If you’re looking for a specific part, be sure to check previous of the video series for the code and details. Let me know if you need any assistance!

  • @Haurihidyh
    @Haurihidyh 3 дня назад

    Don't you have github? I want the source code too 😭

    • @DesignSynth
      @DesignSynth 2 дня назад

      Thanks for your patience! 😊 I’ll be sharing the source code very soon, so stay tuned! In the meantime, feel free to follow along with the video for a step-by-step guide. Let me know if you have any questions!

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

    🐰🐇

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

      🐰 Aww, so cute! Thanks for sharing! 😊

  • @QamarAli-v1v
    @QamarAli-v1v 6 дней назад

    Congratulations on reaching 1,000 subscribers! 🎉👏 Your hard work and creativity are truly inspiring. Here's to many more milestones ahead! 🚀✨

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

      Thank you so much for your kind words and support! 🎉🙏 It means a lot to me. Here's to reaching new heights together! 🚀✨

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

    Your designs are truly unique and impressive! Keep up the great work!

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

      Thank you so much for your kind words! It truly means a lot to me and keeps me motivated to create more unique designs. I’m glad you enjoy them!

  • @DuaZahra-f7x
    @DuaZahra-f7x 6 дней назад

    Very amazing and interesting! Best of luck! 😊👏

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

      Thank you so much for your support and encouragement! It truly means a lot. 😊👏

  • @rehanzohan-t4f
    @rehanzohan-t4f 6 дней назад

    👍

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

      Thank you so much! That really means a lot! 😊❤️ I’m glad you’re enjoying the creativity!

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

    Nice designs

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

      Thank you so much! Glad you liked them!

  • @trimikRoy-n4e
    @trimikRoy-n4e 6 дней назад

    Wow,, this amazing 😮

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

      Thank you so much! I’m glad you think so! 😊

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

    HI THERE! CAN YOU MAKE IT RESPONSIVE

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

      Hi there! Thanks for asking. I’ll be releasing a responsive tutorial video very soon, so stay tuned! 😊 I’ll make sure it’s easy to follow and helpful for everyone. 🚀

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

      @@DesignSynth sure please let me know the date

  • @Miran99923
    @Miran99923 8 дней назад

    Is it responsive now?? I want something like this for seat cover can you make it

  • @MohsinMughal-e4y
    @MohsinMughal-e4y 9 дней назад

    Your designs are really amazing and unique❤👌

    • @DesignSynth
      @DesignSynth 8 дней назад

      Thank you so much for your kind words! ❤ I'm so glad you enjoy my designs-your support means the world to me! 🙌😊

  • @rehanzohan-t4f
    @rehanzohan-t4f 10 дней назад

    Well done👍

  • @irondesagitario
    @irondesagitario 11 дней назад

    thank you very much for sharing your work

    • @DesignSynth
      @DesignSynth 10 дней назад

      Thank you so much for your kind words! ❤️ Your support means a lot to me. Watching the full video helps me improve and continue creating valuable content, so I’d truly appreciate it if you could when possible.

  • @rehanzohan-t4f
    @rehanzohan-t4f 13 дней назад

    Great job🎉👍

    • @DesignSynth
      @DesignSynth 13 дней назад

      Thanks a lot! Glad you liked it! 🎉🙌

  • @zamyrmoreno3959
    @zamyrmoreno3959 13 дней назад

    Es interesante tu trabajo

    • @DesignSynth
      @DesignSynth 13 дней назад

      ¡Gracias! Me alegra que te parezca interesante.

  • @MohsinMughal-e4y
    @MohsinMughal-e4y 13 дней назад

    You are the best Design Synth

    • @DesignSynth
      @DesignSynth 13 дней назад

      Thank you so much! That means a lot to me! 😊🙌

  • @DuaZahra-f7x
    @DuaZahra-f7x 13 дней назад

    Your creativity is truly next level😘

    • @DesignSynth
      @DesignSynth 13 дней назад

      Thank you so much! That really means a lot! 😊❤️ I’m glad you’re enjoying the creativity!

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

    Its really beautifull and responsible too, you're such an inspo

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

      Thank you so much! 😊 I'm really glad you find it beautiful and responsible - it means a lot! Your support is such a motivator. 💪✨

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

      @@DesignSynth i mean responsive lol😄

    • @DesignSynth
      @DesignSynth 10 дней назад

      Haha, I just realized I wrote 'responsible' too! 😅 Thank you for pointing that out! I'm so glad you noticed the responsiveness of my design. Your feedback really motivates me to keep improving. 😊✨

  • @AhsanMughal-w1u
    @AhsanMughal-w1u 17 дней назад

    Its really amazing 😍🤩🎉❤

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

      Thank you so much! 😊 I'm really glad I could help bring your vision to life.

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

    Thanks Razia

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

      You're very welcome! Sundu 😊.Happy designing!

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

    🔥🔥🔥🔥🔥

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

      Glad you enjoyed it! 🔥🔥

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

    Grate Work, But this is not mobile responsiveness.

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

      Thank you so much for the feedback! 😊 I'm glad you liked the design. I'll be creating a complete responsive tutorial very soon to ensure it looks great on mobile too! Stay tuned!

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

    🎃🔥🔥🔥🔥🔥

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

      You're amazing for saying that! 😊 So glad it brought a smile to you! ❤

  • @shakilabdusshohid7348
    @shakilabdusshohid7348 19 дней назад

    Not responsive

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

      Thank you for pointing that out! I will release a tutorial soon to make sure it looks great on all devices. Appreciate your feedback!

  • @jeyaPriya-l1x
    @jeyaPriya-l1x 21 день назад

    i need the code and the website link

  • @muhammadahtisham274
    @muhammadahtisham274 23 дня назад

    You're creativity is on next level but please make full websites.. I'mean other design other pages also !!!

    • @DesignSynth
      @DesignSynth 21 день назад

      Thank you so much for the compliment! I truly appreciate your interest in seeing full website tutorials. I've noticed that many viewers download the source code without watching the entire video, so I try to keep tutorials focused on specific sections or features. However, I'm considering ways to create full websites while keeping it engaging. Thanks again for your feedback-I'll keep it in mind!

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

    Thanks sir but slider not work

    • @DesignSynth
      @DesignSynth 21 день назад

      Thank you for watching! I’m glad you’re interested in the tutorial. 😊 If the slider isn’t working as expected, please double-check each step to ensure everything matches the tutorial. Feel free to ask if you need further help - I'm here to make it as easy as possible to follow along!

  • @ArslanMughal-sv6pp
    @ArslanMughal-sv6pp 24 дня назад

    It's really amazing 🎉

    • @DesignSynth
      @DesignSynth 21 день назад

      Thank you so much! 🎉 I'm thrilled you liked it! Let me know if there’s anything specific you’d like to see next. 😊

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

    bro plz source code link

    • @DesignSynth
      @DesignSynth 21 день назад

      Hey! 😊 The source code link is included in the video description, so feel free to check it out there. Let me know if you have any questions!

  • @Surkor
    @Surkor 25 дней назад

    This is really good! 😮🤯❤️‍🔥 How long did it take you? 🤔

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

      Thanks so much! 😊 Just 1 day! Once I started, I couldn’t stop! ❤️‍🔥

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

      @DesignSynth Wow, that's impressive! I've started to learn how to code a couple of weeks ago so I hope one day I'll be as fast as you. 😅🤍

    • @DesignSynth
      @DesignSynth 21 день назад

      @Surkor Thank you! 😊 Coding can feel like a big journey, but every little step you take builds up so much skill over time! 🚀 Keep going, and soon you'll surprise yourself with how fast you get too. If you ever have questions, I’m here to help! Happy coding! 🤍💻

    • @Surkor
      @Surkor 21 день назад

      @@DesignSynth Thank you so much! 😊🤍

  • @siddheshrandive1233
    @siddheshrandive1233 26 дней назад

    your are top coder

    • @DesignSynth
      @DesignSynth 26 дней назад

      Thank you so much! That means a lot. Just trying to keep learning and sharing - glad it's helpful!

  • @AnayaFatima-m3h
    @AnayaFatima-m3h 26 дней назад

    Such a useful project 👏.... Thank you sis🫡❤

    • @DesignSynth
      @DesignSynth 26 дней назад

      Aww, thank you! 😊 I'm really glad you found it helpful. More tutorials coming soon! 🙌❤

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

    ohhh Mam it's really cool. i really appreciate your work

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

      Thank you so much! 😊 I'm really glad you enjoyed it and found it cool! It’s comments like yours that inspire me to keep creating. If there's anything else you’d like to see or learn about, feel free to let me know!

    • @muhammadahtisham274
      @muhammadahtisham274 26 дней назад

      @DesignSynth please can you make more pages of this Halloween website using Gsap ... I really like this one ... I want to mention it in my portfolio as a project... Make more pages plzz!

    • @DesignSynth
      @DesignSynth 26 дней назад

      Thank you so much for the support! 🎃 I’m really glad you liked the Halloween website and that you want to feature it in your portfolio! Although Halloween is over, I think a full project with more GSAP effects could still look amazing. I’ll keep this idea in mind for future tutorials-maybe even for other seasonal themes. Let me know if there’s a specific type of page or effect you’d like to see! 👻

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

    Do you make this website yoursel?

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

      Yes, I created this website myself! 😊 I designed and coded the entire site, and I also made the images using Canva to bring everything together. It’s a hands-on project from start to finish, and I'm glad you noticed!

    • @PiuminiPathiraja
      @PiuminiPathiraja 15 дней назад

      @@DesignSynth Damn! That's impressive!! Best of luck with your future projects 👾🔥

  • @gorickego1882
    @gorickego1882 29 дней назад

    It's possible to add auto play? 🤔

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

      Apologies for the delayed response; I had a network issue. Yes, adding autoplay to this design is possible! You can use JavaScript to trigger the animations automatically without any manual input. For instance, you could create a function that periodically triggers the animations or incorporates a setInterval function to move elements automatically.

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

      @@DesignSynth an example of a function that periodically triggers the animations or incorporates a setInterval function would be great 😅

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

      Certainly! Here's an example of how to set up a setInterval function to autoplay the animations. In this case, we'll create a function that triggers each animation periodically. This example assumes you have animations set up for elements like #can, #chocolate, and #almond and that you want them to run every few seconds. Here’s some sample code: function autoplayAnimations() { const interval = 3000; // Set interval in milliseconds setInterval(() => { gsap.to("#can", { top: "95%", left: "12%", rotate: "30deg", duration: 1 }); gsap.to("#chocolate", { top: "160%", left: "23%", duration: 1 }); // Add additional animations here as needed }, interval); } // Call the function to start autoplaying animations autoplayAnimations(); This code runs every 3 seconds (3000 milliseconds), animating the elements using gsap.to(). You can adjust the interval to change how frequently the animations trigger. Let me know if you need help with anything else! 😅

    • @gorickego1882
      @gorickego1882 21 день назад

      @@DesignSynthok but I would like to keep the page scrolling while the animation is running. In the example you sent me, the animation starts without scrolling the page...🙄

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

    amazing

    • @DesignSynth
      @DesignSynth 29 дней назад

      Thank you! 😊 Glad you liked it!

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

    Can u pls provide the source code. Thank you!

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

      Hi! Thanks for watching the tutorial 😊 The source code is available in the description below. Let me know if you have any questions!

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

      @@DesignSynth It was a great design you got yourself a new subscriber

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

      @@DesignSynth Also i m a new at creating websites can u help me to build it

    • @DesignSynth
      @DesignSynth 29 дней назад

      Absolutely, welcome to the world of web design! 😊 Whether you're just getting started or need help with a specific part of your website, I’m here to help. Check out my tutorials on HTML, CSS, and JavaScript - they’ll guide you through every step! And feel free to ask questions anytime! 👨‍💻✨

    • @DesignSynth
      @DesignSynth 29 дней назад

      Thank you so much! 😊 I'm thrilled you enjoyed the design! Welcome to the #DesignSynth community! 🎉 Can't wait to bring more exciting tutorials your way! 🚀

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

    Everything is ok but please share the images in the description.

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

      Thanks for letting me know! It looks like I missed adding the link to the images. I'll update the description with the link right away. 😊 Appreciate your patience!

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

    You're doing such an incredible job-very nice

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

      Thank you so much! I really appreciate your kind words.