jlmakes / scrollreveal

Animate elements as they scroll into view.

Animate elements as they scroll into view.

Installation

Browser

A simple and fast way to get started is to include this script on your page:

<script src="https://unpkg.com/scrollreveal"></script>

This will create the global variable ScrollReveal

Be careful using this method in production. Without specifying a fixed version number, Unpkg may delay your page load while it resolves the latest version. Learn more at unpkg.com

Module

$ npm install scrollreveal

CommonJS

const ScrollReveal = require('scrollreveal')

ES2015

import ScrollReveal from 'scrollreveal'

Usage

Installation provides us with the constructor function ScrollReveal(). Calling this function returns the ScrollReveal instance, the “brain” behind the magic.

ScrollReveal employs the singleton pattern; no matter how many times the constructor is called, it will always return the same instance. This means we can call it anywhere, worry-free.

There’s a lot we can do with this instance, but most of the time we’ll be using the reveal() method to create animation. Fundamentally, this is how to use ScrollReveal:

<h1 class="headline">
	Widget Inc.
</h1>

ScrollReveal().reveal('.headline')

🔎 See this demo live on JSBin

---

The full documentation can be found at https://scrollrevealjs.org

If you’re using an older version of ScrollReveal, you can find legacy documentation in the wiki

---

License

For commercial sites, themes, projects, and applications, keep your source code private/proprietary by purchasing a Commercial License.

Licensed under the GNU General Public License 3.0 for compatible open source projects and non-commercial use.

Copyright 2023 Fisssion LLC

scrollreveal's Issues

Scrollreveal inside overflown element?

Hello, is it possible to use the script inside an overflown element?

Great work btw! Love the ease of the plugin!

Elements are not fading in correctly since v.0.0.4

Hey Julian,

thank you for creating scrollReveal, it's an awesome library :)
I've encountered a small problem when trying to fade in page elements by using "reset: false".

Please have a look at both JSFiddles below:

scrollReveal v.0.0.4 does not work: http://jsfiddle.net/sonnypgs/4S6E7/5/
scrollReveal v.0.0.3 works fine: http://jsfiddle.net/sonnypgs/8rYaA/7/

I think it is related to commit 7354d66.

Why do my animations reveal only once?

http://jsfiddle.net/bfbda8t7/

This is the fiddle, as you can see both contents (mainContent and secondContent) are being revealed only once, even if I scroll miles downwards and come back up, they aren't revealed again.

As this awesome plugin depicts, an element is revealed every time it is in the viewport, mine just reveals once.

Styling bug on demo site

Hovering over the ‘Fork me on GitHub’ banner draws a green column above the h1. Only tested on Chrome on OS X.

JS calls

Hi there !

First (but not least) you've done a great job ! Thanks to everyone who contributed to this.

I just spotted one detail that should be fixed IMHO : in order to meet web standards compliance and, at a time where page speed is important, to make ExpireHeaders (specifically ExpireByType) working properly on scrollreveal ressources :

I think that, instead of

<script> ... js code here ... </script> 
// or 
<script src="stuff.js"></script>

it should be written

<script type="text/javascript"> ...</script> 
// and 
<script type="text/javascript" src="stuff.js"></script>

Just a little detail but which may have its importance. :)

Congrats again & bye ;)

Using ScrollReveal with Angular

So, I have been trying to use the script along with angular. The partials(views) that get called in the "ng-view" div, can't animate,because the app has already been bootstraped.

I have tried several things to make js code run after a view is called, and it executes, but the ScrollReveal code doesn't. Is there some kind of conflict if it's used in a partial file?

Thank you.

Reveal finishes with text moving few pixels / Reset

Hey, love scrollreveal great job,
i was testing the script for my future project i noticed once the reveal is over the text gets a weird movement it moves 2 - 4px to the left i changed the direction / px it is entering from still same but if it has more than 300 characters it is hardly noticeable.

Also im not able to get the Reset to work with the inline or in the config tried with the reset example from documentation.

Thanks for work done till now great job.

cdn

cdnjs

I want to see the project in the CDN.
If you need changes in the repository, I will offer them in a separate branch.
If the author of the project agree, I can do this.
If you want to add the library to other cdn, I'll be happy to arrange this too.
Maybe I made ​​a mistake and have already used CDN. I have not found them. Please enter them in the readme.

Uncaught TypeError: object is not a function

I'm getting this error:

Uncaught TypeError: object is not a function

from Google Chrome, from the line:

window.scrollReveal = new scrollReveal(config);

I've put it as the last thing before the closing body tag as instructed. It's not causing any problems as far as I can tell, but I'm not well versed with javascript so I just wanted to double check. I'm using Turbolinks if that might effect anything.

Inline 'reset' does not work

Per your readme:

<!-- Note: The reset keyword works by itself. -->
<div data-scroll-reveal="reset"> Foo </div>

I have:

<div ... data-scroll-reveal="reset enter top">...</div>

But the object does not reset...

Activating scroll reveal after window.onload

Hello. First off, thank you for this awesome plugin. :)
I am trying to use scroll reveal on a couple of images which are on my home page. Now if I do it normally I don't see any animation because the image itself takes a lot of time to load. So I am using window.onload to load all images on my page and then show the content. But when I do this I don't see any animation. Is there any way to trigger off the animation/scrollreveal after window.onload? Thanks! :)

adding options to execute a function on viewport

scroll reveal is great but i think there is some features still missing,

1. adding more animations like rotating and css 3d transform.
2. also, when a object is in the viewport the scrollreveal.js, works pretty well, but it should add a option for callback. so when a div gets revealed, i can call other functions as well.

// example...
$('.div_reveal').scrollreveal(function () {
    // now execute some code on the div revealed by the script
});

it is the same way as jquery waypoint works, but it would be a great optional feature for also adding css3 animations other complicated animations and options.

We should be able to get callbacks after revealing

A canvas is already loading its animation outside the screen, I'd want it to start when it's visible --> would that be possible ?

Using scrollReveal elements on a Bootstrap carousel

Great plugin! I love it and I am trying to combine it with a bootstrap carousel slider.
The bootstrap carousel provides a hook so I can check when a sliding action is occuring

$('#bscarousel').on('slide.bs.carousel', function () {
    var slidno = carouselData.getActiveIndex();
}

I would like to have the scrollReveal actions to start after each slide is loaded. Is there a way of activating the scrollReveal actions after a bootstrap slide transition?
Thanks

The move action only works with "bottom", with the other directions it doesn't change anything

Hi,

This is really an amazing plugin! I have just a problem with the move property, it only works with bottom. Is it an issue in the plugin?

Also in Safari, you should add in the read me that one has to add the css property -webkit-backface-visibility: hidden; if you don't want to see flicker on the transitioned elements.

Extra space on right of page bootstrap 3 mobile

Ok I got this working perfectly and I love it, amazing plugin. But I am having a small issue with bootstrap 3, for some reason when you go below 767 pixels I get extra margin space on the right of the whole page. I double checked my whole layout to try and figure what is causing this but I cannot figure it out. I am not really doing anything.

If someone can help out, my live site is here: http://aliensix.com/mytheme2/

Image shows my issue.

Scrollwheel scroll generates white artifacts

On the demo page, when I scroll using the scroll wheel, I will see a flash of white (rectangular shape) in the direction I'm scrolling. When scrolling down near the bottom of the page it will be the viewport width (1900 px in my case). The height depends on the speed of scrolling.

It seems to be a browser rendering issue -- whenever I try to take a screenshot, it looks fine in the shot itself. Only in chrome, version 36.0.1985.125 m

Touch event preventing CSS transitions?

It seems like the touch drag scrolling event will stop the animation while touching.
Is this the default behaviour of CSS3? And is there any workaround for this issue?

JavaScript API

Hey Julian,

This project looks great, just curious if you are planning on also including a javascript API for those of us who like to keep html and js separate?

Animation Repeat

How about adding a repeat that can scroll again when scroll to the position.

<h1 data-scrollreveal="enter from the top and move 50px over 1.33s repeat"> 
    Foo 
</h1>

Objects disappearing after second init();

Hello,

I noticed there's a bug when calling init() for the second time.

I have 2 async ajax calls, I never know which one is first, so my code looks a bit like this

if ( typeof( window.scrollReveal ) != 'object' ) {
  window.scrollReveal = new scrollReveal( { init: false } );
  window.scrollReveal.init();
} else {
window.scrollReveal.init();
}

Now I'm not sure if it has something to do with the animations being mid-way when the second init hits, but the items from the first init animate in, and after complete, their opacity is set to 0 and they disappear.

I have a feeling that it has something to do with the reveal-complete attribute only being set after the animate, and the second init runs before the attribute is set.

I've tried using the v2.0.0-RC branch (ie. Mockingbird) but I'm running into different problems which I'm now debugging.

Thanks!

Parallax Background issue with Chrome

Hi
Love this scrollReveal, especially the ease of use.

I'm having one particular issue while in Google Chrome. Seems the Parallax sections in my page go blank while the scrollReveal animations are playing and reappear when animations are finished. It works fine in IE and Firefox. Any ideas? Need more information?

Thanks
David

An idea - will be great if this beautifull plugin will support infinite scroll.

Than it will be a real piece of art. What do you think about that?

Left and top distance

Hey. Awesome AWESOME plugin. Really cool of you to take the time making it and sharing it with the world like this. Real simple to use too, and the added bonus of being able to use actual words and sentences? Genius!

Just thought you should know of a small issue. If the direction is selected as left or top, the distance isn't taken into account. It moves the same (24 px). I believe that can be seen in your demo as well.

Anyway, that's the only thing I can find wrong with it, so great job on your part.

Inline styles are removed

I am setting some background images on divs; looks like those inline styles are wiped out.

Disable on small screen

Is there a way to only apply it on large screen and disable it on tablets or phones?

License

Make sure you include a license in this project — I noticed you have it at the bottom of the README, but it's good practice to also put it in a LICENSE.txt file at the repo root.

Enter 'scale'

It'd be great if you could add a 'scale' reveal which transforms from scale(0).

Reveal not working on refresh

Hello there,
I'm having trouble using this rather simple-to-use library : the revealing only appeared once on first load, then didn't show up at all. Here's what I used : http://koroeskohr.github.io/scrollRevealTests/tests/scrollReveal/

Maybe I'm just blind, I'd like some help!
Awesome work, keep it up!

TypeError: object is not a function

I am facing the issue. open demo page -> open chrome console and type "window.scrollReveal = new scrollReveal()", you will get the error "TypeError: object is not a function"

This error happens when turbolinks trigger on page load as well

Animation Easing

What do you think about adding support for other transition timings? You have ease in the genCSS function. I could add some other common timings.

• ease-in
• ease-in-out
• ease-out
• linear
• step-start

If that sounds interesting, let me know how you'd like to map the declarative language. I have a rough concept for how this might look.

Keep ease as the default, and let users explore the other timings when they're ready.

So the "move" keyword would represent the default ease timing.

enter from the top and move 50px over 1.33s

And the rest would be declared something like:

enter from the top and move 50px over 1.33s and ease-in
enter from the top and move 50px over 1.33s and ease-in-out
enter from the top and move 50px over 1.33s and ease-out
enter from the top and move 50px over 1.33s and linear
enter from the top and move 50px over 1.33s and 5 steps

Or:

enter from the top and ease-in 50px over 1.33s
enter from the top and ease-in-out 50px over 1.33s
enter from the top and ease-out 50px over 1.33s
enter from the top and move linear 50px over 1.33s
enter from the top and move in 5 steps 50px over 1.33s

move 66px and enter and ease-in from the bottom after 1s
move 66px then enter from the bottom after 1s in 5 steps
...

Going with a default keeps things nice and clean for people who don't want to mess with timings.

For reference, the MDN docs on CSS transform timing functions.

smooth scroll for mouse wheel

only the FF have a smooth scroll to work with the mouse wheel - especially in Chome looks scroll animation very bad

Change data attribute to `data-scroll-reveal`

So the standard way of using data- attributes is to have them as all lower case and separated by dashes. By using data-scrollReveal, this plugin breaks convention. This also has practical implications. The html5 api for interacting with data attributes specifies that while dataset keys can be camelCase, they are transformed to dash case before being selection. For example:

var el = document.createElement('div');
el.dataset.scrollReveal = 'foo';
document.body.appendChild(el);

...results in the following in the html:

<div data-scroll-reveal='foo'></div>

As such, where camelCase can and should be used with dataset selections in the javascript, the html data attribute should be dash cased. Alternately, if you wanted to keep scrollReveal as a single word, if you drop the camelCase, you can use data-scrollreveal instead.

How can I make stuff only fade in?

Hi,

How can I make stuff only fade in?

Thanks in advance.
Santiago

Animation occurs more than once?

how can I stop scroll revealing after first scroll? I just need to show the section revealing for the first look. then it should be fixed

Bug with full page.js + scroll reveal.js

Hello,
you're plugin is just awesome! But i have a problem when i use the plugin with "full page.js" by alvarotrigo. In fact, you're plugin doesn't work when i add fullpage.js to my website page. Have you got a solution? thank you a lot

Malformed json

Hi, there is a problem with bower and scrollReveal.js

I was using previous version '0.2.0' -> which is currently unavailable.. 😢

I tried to deploy to heroku and it crashed, next i tried to download the latests version, but when i do

bower install scrollReveal.js 

it says
:
bower EMALFORMED Failed to read /tmp/user/bower/scrollReveal.js-15746-GOnlRE/bower.json

Additional Animations

I was thinking that you should consider adding a basic fade in, then it occurred to me that there are many more entrance and exit animations you can explore. Take a look at http://daneden.github.io/animate.css/
Maybe add support for custom defined animations.

scrollReveal not working with content loaded via ajax

Hi,
I try to use scrollReveal in my wordpress website. You can see it here www.wytworniaprojektu.eu (this is develop version). As you cas see I use Advanced Ajax Page Loader plugin. And this is my problem. Scroll Reveal work only once. I reload code of scrollReveal.js (see inside console log) but nothing happen.

Any idea?

Sorry for my english.

Issue with hovers

hover effect on a link or elements to which scroll reveal is applied does not work.
Any fix for this?

Trigger on button click

Hi, just wondering if it's possible to have the scroll triggered on a button click. So by default loads say 10 items/rows. On button click, loads 10 more, etc...

Reveal only when scrolling down?

I want to animate the objects when the scrolling is towards down from the top of the page.
I don't to animate the objects when scrolling is done from bottom to top of the page.

var lastScrollTop = 0;

jQuery( window ).scroll(function( event ){

  var st = jQuery( this ).scrollTop();

  if ( st > lastScrollTop ) var isreset = true;
  else                      var isreset = false;

  lastScrollTop = st;

  var config = {
    after: '0s',
    enter: 'bottom',
    move: '24px',
    over: '0.66s',
    easing: 'ease-in-out',
    viewportFactor: 0.30,
    reset: isreset,
    init: false
  };

  window.scrollReveal = new scrollReveal( config );
  scrollReveal.init();  
});

But it's not working.

How can i achieve this kind of scenario ?

Thanks in advance.

Option to disable delay on mobile

First of all, a big thanks! Great work Julian! My question... could there be a way to lose the delay when viewed on mobile. On a site I used scrollReveal with 3 columns and delay. Viewed on a mobile when only one item shows at a time (not in columns but underneath eachother) the delay becomes annoying. Maybe with a css class?

Reveal happening late

I am trying to use this script to fade in WordPress blog posts as they come into view.

One issue I find is that when we reach the end of a post (when scrolling slowly) the one below is not immediately fading into the view. Therefore there is a possibility of visitors thinking that there's no further content below.

I have recorded a video explaining this: http://youtu.be/iflP2atnL1U

Any ideas?

It is possible to control this when using Waypoints using the 'offset' parameter. I wrote about this here: http://sridharkatakam.com/scroll-animations-wordpress-using-animate-css-jack-box-waypoints/

Custom event on viewport visible?

A great addition to scrollReveal would be the ability to trigger your own JS events on viewport visibility.

Does not work with Smarty/CS Cart

I have been trying to get the script to activate in the new online shop that I am working on, but I cannot get the scroll reveal to trigger.

For example here: http://www.velocite-bikes.com/velocite-selene-2.0-ultegra-en-2.html

The bottom elements: OS headtube, Torsion focus, 7005-T6 alloy are set up with a rather obvious reveal (just in case I miss it)

data-scroll-reveal="wait 2.5s and then ease-in-out 100px" but it does not trigger.

The script loads and I have attempted to incorporate the scrollReveal.init(); suggestion, but to no avail.

Thus, please help me get the script to work on my site. How can I configure it to work and trigger as expected?

Thanks,

V

After reveals, extra blank area is added to right of body

This is quite strange, especially for such an awesome plugin.

I have three boxes that reveal. When they're done, an un-inspectable area appears to the right of the page, enforcing a horizontal scroll bar. I say un-inspectable, because if you try to inspect the area that's been added, it inspects the <html> tag instead.

What's even weirder is that this only occurs when I am navigating to and from the page on question. However, if I press F5 on this page, it doesn't add the empty space.

Here's an image:

Note: This only seems to happen in WebKit (or Blink) browsers. Firefox and IE run everything perfectly — and interestingly enough, this plugin (very similar to scrollReveal) does exactly the same thing!

Provide minified version and UMD wrapper

A minified version, of course, if what most people will want to use in production, so it's a good idea to provide that. The umd wrapper will allow more flexibility between different environments. This simple wrapper would allow the script to be instantly plugged in to both AMD (require.js) and commonjs (browserify, node, component) environments, and if neither of these are present, will attach to window as it does currently by default.

I have a PR I'm about to open that introduces gulp as a build tool to generate umd-wrapped and minified versions of the script. This will also fit in nicely with the test suite I've been working on.

fullPage.js — All data-sr elements (even out of view) are starting instantly.

Hi,

First of all, i would like to say this script is awesome, I'm loving it but it seems to doesn't work with fullPage.js from Alvarotrigo because it starts all scrolls elements on the loading of the page, so when i'm moving on other slides, all of the elements are already loaded.

So maybe you could add an option like data-sr='enter left and move 50px on Slide1 hover. (In this example, Slide1 is an ID or class.)

Hope you can resolve this :)

Managing Releases

Hey Julian,

Just also noticed that you have a callout to the early unstable versioning in your readme. I often have this same issue, and eventually ended up writing this little piece, which I add as a note across my projects when pre v1.0.

http://markup.im/#q4_cRZ1Q

It's been a great way to make it clear if/when breaking changes will occur in the code for people during early dev. Thought you might want to include it?