Origin Reveal Option doesn't works?

[D4RKAR117]

Environment

• Operating System: Windows 10 pro x64 v 1803
• Browser Version: Opera v55.0.2994.61
• ScrollReveal Version: release 4.0.4 using cdn

Hello, after a while I come back with another issue, I'm trying to display a page on github pages using your amazing script, it works to a certain extent, the problem is that the "origin" option does not apply the effects it should, possibly I'm doing something wrong but I've tried several times with different options like local scripts, changing styles and events, but it does not work, another minor thing is that by following your recommendations to avoid flickering in the load of the page if the css visibility option is hidden it is added !important like visibility: hidden !important; will not work the reveal, it is something uncomfortable sometimes, attached screenshots the my javascript script

This is the file that executes the reveals, the commented options disable them to verify that they were not the cause of the problem, but it does not matter if they are active or inactive

This other screenshot shows the structure of my index.html file, I use all the scripts in the head section

And this one is the CSS styles file that I use with the recommendations of your script and without the property: !Important

Even if you want to verify the files yourself you can check the docs folder of my repository, which is published in the github pages

Keep up the good work friend, I have made this script one of the essential elements when creating web pages.

[jlmakes]

Thanks for the kind words.

There is nothing wrong with options.origin in my test; as noted in the docs:

You will need a non-zero value assigned to options.distance for options.origin to have any visible impact on your animations.

[D4RKAR117]

ooohhh deam sorry man i feel a idiot right now

[jlmakes]

It's no problem, sometimes the issue is just one missing ; that's how it goes.

Also your visibility: hidden code is missing the html.sr hook for all of your classes; you have this:

html.sr .top-reveal, .bot-reveal, .right-reveal, .left-reveal {
  visibility: hidden;
}

But you'd want something like this:

html.sr .top-reveal,
html.sr .bot-reveal,
html.sr .right-reveal,
html.sr .left-reveal {
  visibility: hidden;
}

Make sure to include the html.sr hook in them all.

[D4RKAR117]

Oh thank you I had not noticed, and about the attribute: !Important, you think it's something important? sometimes some classes do not allow you to apply the hidden cuz it override the principal

[jlmakes]

I'm not sure I understand, where is the !important coming from?

[D4RKAR117]

I refer to this friend

html.sr .top-reveal,
html.sr .bot-reveal,
html.sr .right-reveal,
html.sr .left-reveal {
  visibility: hidden !important;
}

Whenever this attribute is important in the hidden, the animations will never start, and it is uncomfortable because sometimes the hidden is overwritten by another style

[jlmakes]

I understand.

ScrollReveal doesn't use !important when it applies visibility: visible during animation, so if you use !important in your html.sr style, it overrides ScrollReveal. (No animations can be seen.)

If you'd like, you can make ScrollReveal use !important by adding it in your source here: https://github.com/scrollreveal/scrollreveal/blob/2f70956cca0a65afdd808d3036f3f111fd564862/dist/scrollreveal.js#L620-L622

[D4RKAR117]

Great friend, I will use it, and I would like to request something, options that change depending on the size of the viewport, sometimes some effects are better in mobile than in PC and vice versa, something like the responsive breakpoints but for your script.

Keep up the good work

[jlmakes]

ScrollReveal doesn't support media queries, but it does offer options.desktop and options.mobile. It’s based on the browser's user agent string, but it will let you create unique experiences for both, e.g:

// .items on mobile...
ScrollReveal().reveal('.items', {
  mobile: true,
  desktop: false,

  duration: 250,
  scale: 0.9
});

// .items on desktop...
ScrollReveal().reveal('.items', {
  mobile: false,
  desktop: true,

  duration: 400,
  scale: 0.8,
  reset: true
});

[D4RKAR117]

If in fact if I have used them but I think it would be even better to have more flexibility with that kind of options, it would offer even more personalization, but even so it is very cool ;), thanks and sorry for the inconvenience

[jlmakes]

No problem, happy coding!