← Back to Upcase

Animation when visible on the page


(Scott Hollinshead) #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


(David Pedersen) #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.


(Scott Hollinshead) #3

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


(David Pedersen) #4

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


(Andrew Cohen) #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: http://css-tricks.com/slide-in-as-you-scroll-down-boxes/