Animation when visible on the page

Design Design for Developers Tutorial
1

@andrewcohen sorry for so many questions!

How do you get it so when you get to a certain section of a webpage animations start?

Thanks

2

I don’t know the exact code to do this, but I assume you’d have to have a way to detect when a certain element is within the viewport and then add a class that triggers the animation. There might be some prewritten javascript out there for doing that (maybe a jQuery plugin).

It might look something like this

$(window).on("scroll", function() {
  var $element = $(".some-element");

  if (withinViewport($element)) {
    $element.addClass("start-animation");
  }
});

Then you’d just need to write the withinViewport() function.

3

@andrewcohen, @davidpdrsn do you have to use a plugin for this or is it easy enough to implement?

4

There probably is some plugin out there that does this, but it also shouldn’t be too hard to implement yourself.

5

@scott You’re definitely on the right track with this. As @davidpdrsn said there are numerous plugins, etc. out there so it’s kinda up to you how you wanna go. Check out this post on CSS Tricks and write the JS yourself, it shouldn’t be too hard :smile: Slide In (as you scroll down) Boxes | CSS-Tricks - CSS-Tricks