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

Поділитися
Вставка
  • Опубліковано 26 гру 2024

КОМЕНТАРІ • 19

  • @PlantitaLabs
    @PlantitaLabs Місяць тому

    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!

  • @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!

  • @sadohkoo
    @sadohkoo 6 місяців тому

    Super helpful video, thanks!

  • @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!

  • @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!

  • @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 UA-cam 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.