- Add support for customizing starting element opacity (from kierzniak, see issue #33)
- Implement RequestAnimationFrame (from pazguille, see issue #46)
- Refactor how
styleBank
functions (from georgelee1, see issue #38)
- Add support for elements with
position: fixed
(See issue #35) - Revise
genCSS()
method to create less greedy styles. (See issue #37)
- Fixed a serious bug with
enter top
andenter left
not correctly recognizing the pixel distance declared with themove
keyword. Fixes #13 and #31 (Thanks for catching this Sherban and Danycerone.)
- scrollReveal.js now has a
dist
folder containing the AMD/CommonJS compatibile library. - Gulp has been integrated, facilitating the build process.
- Basic testing using Testling has been put in place.
- scrollReveal is now implemented using the
data-scroll-reveal
attribute, NOTdata-scrollReveal
.
- scrollReveal no longer destroys the existing
style
attribute on revealed elements, but instead, now appends the necessary reveal animation styles after any existing styles. (Fixes #18)
Note: scrollReveal will still override any existing transition or transform in the
style
attribute.
- removed unnecessary styles (with
-moz-
&-o-
) from css transitions & transforms - added top-line comment, intending it to be kept after minification
- Added CHANGELOG
- Improved README
scrollReveal no longer automatically instantiates on the DOMContentLoaded
event. It now requires that you instantiate it manually.
<!-- Everything else… -->
<script src='{your_JavaScript_path}/scrollReveal.js'></script>
<script>
window.scrollReveal = new scrollReveal();
</script>
You can now pass your own starting defaults object to the scrollReveal constructor.
<script>
// The starting defaults.
var config = {
enter: 'bottom',
move: '0',
over: '0.66s',
delay: '0s',
easing: 'ease-in-out',
viewportFactor: 0.33,
reset: false,
init: true
};
window.scrollReveal = new scrollReveal( config );
</script>
Due to popular demand, the reset
keyword was added. Now, you can configure your animations to replay every time they enter the viewport:
example:
<script>
window.scrollReveal = new scrollReveal( {reset: true} );
</script>
See it in action: The demo page has been updated with the
reset: true
property.
Now you can replace the move
keyword with easing keywords to control the easing of your reveal animation.
example:
<div data-scrollReveal="after 0.33s, ease-out 24px"> Foo </div>