The modern way to add animation on scroll with Javascript and CSS

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

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

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

    Thanks so much! Had been procrastinating adding on-scroll animations to my html/css website because I thought it would take longer to learn, but you made this sooo simple for me to learn and implement! ty ty

  • @freeguy2418
    @freeguy2418 Год назад +1

    Awesome content build up from past videos, continue the same. Loved your courses

    • @SuperHi
      @SuperHi  Год назад +1

      That's the plan!

  • @bambindien3327
    @bambindien3327 Год назад +1

    Many thanks from Germany. It was fun to follow and to code. Def. practice-oriented und all time usefull !!

    • @SuperHi
      @SuperHi  Год назад

      Great to hear! Glad you enjoyed it, thanks all the way from Brooklyn!

  • @sadohkoo
    @sadohkoo 5 месяцев назад

    Super helpful video, thanks!

  • @hellothere8547
    @hellothere8547 Год назад +2

    thank you! would it be possible to see a video that applies math to create an effect?
    I really like your video where you use the logistic function to cap the scroll animation, and the “snapping to a grid” technique on hover. I also noticed how you used a matrix to control fr units in a recent video. super cool seeing math applied and u are a great teacher!

    • @SuperHi
      @SuperHi  Год назад +2

      Great suggestion! Math and physics are usually a big part of motion effects and there's a bunch of little tips and tricks we've built up over a long time, I'll have a think about how best to do a vid or two on them though!

  • @MeezanTheFairBloke
    @MeezanTheFairBloke Год назад

    Cool tutorial! Thanks

    • @SuperHi
      @SuperHi  Год назад

      Glad it was helpful!

    • @MeezanTheFairBloke
      @MeezanTheFairBloke Год назад

      @@SuperHi Just check around 1:56, missed an edit there 🤣🤣

    • @SuperHi
      @SuperHi  Год назад +1

      Oopsies! Not sure how I missed the gap there haha! I've just cut it out so others don't have to see that!

  • @janaszaks
    @janaszaks Год назад

    Hey! Great tutorial, as always. Tried implementing it in Shopify, but it advised me on using 'defer' or 'async' attributes in the script tags. What do you think about that?

    • @SuperHi
      @SuperHi  Год назад +1

      Hey! Yes, so you can add in a defer into script tags if they're in the head of the page so that they delay the script from running until all the content is ready (otherwise the JS doesn't know what the content is!) - it's mostly equivalent to the way that we're doing it at the bottom of the body tag. There's some small advantages in doing it that way, especially if you have very large script tags - for smaller script tags (e.g. under 500kb, and our scripts are way under), the difference is negligible so I'm just keeping them at the bottom for clarity of teaching!

  • @starrstone2593
    @starrstone2593 Год назад

    Hi Rik, I'm new to coding. Is there a reason why you're not using the SuperHi code editor when you code?

    • @SuperHi
      @SuperHi  Год назад +2

      We were finding more people on RUclips specifically were using VS Code so wanted to save the majority of people watching a step!

  • @vimeopictures5170
    @vimeopictures5170 Год назад

    Hey, I want to take your course. I am a newbie and use Shopify , WordPress, and Squarespace to build websites. Can I apply your teaching on these websites? Also, what platform do you guys use to host your website in the course?

  • @dimtodim
    @dimtodim Год назад +1

    why u dont use motion one ?

    • @SuperHi
      @SuperHi  Год назад +2

      You can do! The way that Motion One works under the hood is using the same Intersection Observer style code as here, so our way is more flexible to us and also less code as we're not needing to import a library as well.