Quick addClass option

[ghost]

Hello,

I'm testing ScrollReveal 4 in order to integrate it to some websites and I have small question (maybe this is a feature request) ^^

To make some custom animations, I often need to add a custom CSS class on element when I scroll to it. I know that ScrollReveal can handle this using options.beforeReveal and options.afterReveal callbacks, but it's quite annoying to reset all effects and to write some custom JavaScript in those methods just to add a class to an element.

When I need to do that, my js looks like this:

ScrollReveal().reveal("#main .section", {
  duration: 0,
  opacity: 1,
  distance: "0px",
  cleanup: true,
  afterReveal: function(el) {
    $(el).addClass("animate");
  }
});

As adding class is a really common need, I would like to be able to do something like this:

ScrollReveal().reveal("#main .section", { effects: false, class: "animate" });

The effect: false is a simple declaration to make sure no effects are applied to that element (to avoid redefining opacity, distance, delay, etc....)

The class: 'animate' would be the class applied to the element when you scroll to it.

What do you think about this idea?

Best regards, Alex

[jlmakes]

Hi Alex,

Thanks for taking the time to share your thoughts!

This has actually come a few times before, and you can read more about it in #394 — including details on a monkey patch you can use today.

---

I love that you put thought into this, and proposed a solution, so I'd like to provide a more in-depth answer as to why this hasn't been included in ScrollReveal to date:

So much of ScrollReveal's code is dedicated to helping developers create animations, because finding the right look and coordinating various animations can be quite time consuming. What's more, ScrollReveal let's you do this dynamically — changing/combining animations in response to user actions, time of day, randomness, etc.

More to the point, if want to create your own CSS, you don't need the 1000 lines of JavaScript that ScrollReveal uses to do all this for you… you likely only need ~50 lines of code to check when elements enter the viewport and toggle your classes.

I would be remiss if I encouraged developers to use my library, knowing it was only slowing their websites down with unused code — and vice versa, I would be adding complexity for a use case that most consumers of the library aren't using.

---

tl;dr If you don't want ScrollReveal's help creating animation styles, you're better off using a more lightweight solution for detecting element visibility. I still ❤️ you though: here's a monkey patch.