Master Scroll Animations with GSAP & ScrollTrigger | Create a Stunning Website with HTML, CSS, & JS

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 47

  • @glennwarindu4580
    @glennwarindu4580 2 месяца назад +2

    Damn I love how you animated the page,FYI I modified this website and changed it to a coffee shop and it came out perfectly

    • @DesignSynth
      @DesignSynth  2 месяца назад

      Thank you! I'm really glad you loved the animation! That’s awesome that you modified it for a coffee shop-it sounds like a great project! I'd love to see how it turned out!

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

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

  • @Kingthai_2024
    @Kingthai_2024 Месяц назад +1

    Hey !! We have like the animation and the cool font you have used in this, we are searching for website's developer for my upcoming fashion startup. I will glad if u make these type for clothing brand !! 😊

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

      Thank you so much for your kind words! 😊 I'm really glad to hear that you liked the animation and the font I used. I’d be more than happy to work with you on your upcoming fashion startup's website!
      Please feel free to share the details of your requirements - whether it’s the overall style, features, or specific elements you’re looking for in your clothing brand’s website. Once I have a better idea of what you need, we can move forward with the design and development.
      You can reach me directly at razia786rb123rb@gmail.com, and we can discuss your project further. I look forward to hearing from you and collaborating on something amazing for your brand!

  • @rehanzohan-t4f
    @rehanzohan-t4f 3 месяца назад

    Superb

    • @DesignSynth
      @DesignSynth  3 месяца назад

      Your feedback means a lot. Thank you!

  • @CricketFanClubvm1wy
    @CricketFanClubvm1wy 3 месяца назад +1

    Bhai mast hai .
    Please source code or images dedo ..
    Please it's a request

    • @DesignSynth
      @DesignSynth  3 месяца назад

      The complete source code is available in the description. Kindly watch the entire video, and don't forget to like, share, and subscribe!

  • @srinathpriyankara9694
    @srinathpriyankara9694 Месяц назад +2

    how to responsive this site? please give a video

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

      Thanks for expanding my channel! I will make a tutorial on Responsive Design soon.

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

    amazing

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

      Thank you! 😊 Glad you liked it!

  • @procoder09
    @procoder09 3 месяца назад

    can we connect

  • @zohaibimran7821
    @zohaibimran7821 3 месяца назад

    That's nice ☺️🙂

  • @boddushivasai
    @boddushivasai 2 месяца назад

    i have a one doubt sir. i want to that id="chocolate" teen when user scroll then come to next page in C shape its means curve shape first bottom right then left side please solve my doubt.

    • @DesignSynth
      @DesignSynth  2 месяца назад

      Thanks for your question! If you want an element with id="chocolate" to move in a C-shaped curve as the user scrolls, you can achieve this using CSS animations and JavaScript to control the scroll event. You'll need to animate the position of the element based on the scroll progress, adjusting both the horizontal and vertical positions to create the curve.
      I'll be happy to create a detailed tutorial on this! Stay tuned for the video, and I'll walk you through the steps to create that effect. Let me know if you have more questions!

  • @plackalciril
    @plackalciril 3 месяца назад +1

    Is it free to use for my personal projects?. if yes where can i get these assets?

    • @DesignSynth
      @DesignSynth  3 месяца назад

      Yes, you're welcome to use these assets for your personal projects! Assets link: drive.google.com/file/d/1VdSfkDgMY_r3pfs-w1Q2eHrZQ5xxsmxt/view?usp=sharing

    • @kazaukesuzuki
      @kazaukesuzuki 3 месяца назад

      @@DesignSynth can i have access as well for my personal use

    • @viveksaini9809
      @viveksaini9809 3 месяца назад

      Everyone tech provides code for learning but you are not providing that this is not helping for learner

    • @plackalciril
      @plackalciril 3 месяца назад

      ​@@DesignSynth Thank you so much

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

      @plackalciril My apologies for the delayed response! 🙏 Thank you so much for your kind words. I'm thrilled to hear you enjoyed the content! If you ever need any help or have questions, I’m here to support. Thanks for being part of #DesignSynth!

  • @mathavan7209
    @mathavan7209 3 месяца назад

    🔥🔥🔥🔥

    • @DesignSynth
      @DesignSynth  3 месяца назад

      🔥 Thanks! Glad you liked it!

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

    Grate Work, But this is not mobile responsiveness.

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

      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!

  • @zohaibimran7821
    @zohaibimran7821 3 месяца назад

    🎉🎉🎉🎉

  • @mintz347
    @mintz347 2 месяца назад

    cann I make that for free? last msterial down after atermelon video bellow?

    • @DesignSynth
      @DesignSynth  2 месяца назад

      I appreciate your interest in the project! While I would love to provide everything for free, I’ve set a goal of 5,000 views on the video before sharing the source code. This helps support the channel and allows me to continue creating more content. Thanks for understanding and for your support-it really makes a difference

  • @CricketFanClubvm1wy
    @CricketFanClubvm1wy 3 месяца назад

    Bhai please description mei daaldo assets.

    • @DesignSynth
      @DesignSynth  3 месяца назад

      The complete source code is available in the description. Kindly watch the entire video, and don't forget to like, share, and subscribe!

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

    It's possible to add auto play? 🤔

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

      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 23 дня назад

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

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

      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 17 дней назад

      @@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...🙄

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

    HI THERE! CAN YOU MAKE IT RESPONSIVE

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

      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 20 часов назад

      @@DesignSynth sure please let me know the date

  • @Python902
    @Python902 3 месяца назад

    new hn hum to basic kha sy kre

    • @DesignSynth
      @DesignSynth  3 месяца назад

      I'm creating a basic tutorial for you, so you can get started easily. I'll share it with you soon!

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

    Not responsive

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

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