Changelog¶ ↑
3.3.5 - _2017, February 18th¶ ↑
Includes patchwork up to 3.3.5.
Features¶ ↑
-
{#273}[https://github.com/jlmakes/scrollreveal.js/issues/273] New Callbacks:
beforeReveal(el)
-
{#273}[https://github.com/jlmakes/scrollreveal.js/issues/273] New Callback:
beforeReset(el)
Example:
// Let’s see all 4 together now... sr.reveal('.foo', { beforeReveal: (el) => console.log('Reveal started...'), afterReveal: (el) => console.log('Reveal complete.'), beforeReset: (el) => console.log('Reset triggered...'), afterReset: (el) => console.log('Reset complete.') })
Fixes¶ ↑
-
Functionality: The default
config.container
now recognizes selectors (Fixes #289) -
Compatibility: Added missing trailing semi-colon (Fixes #278)
3.2.0 — 2016, July 8th¶ ↑
Includes patchwork up to 3.1.5.
Features¶ ↑
-
Reveal Node Lists: Add support for
Node List
objects as the first parameter ofreveal()
var elemList = document.querySelectorAll('.selector'); sr.reveal(elemList);
-
Version Check: Easily check which version of ScrollReveal you’re running.
sr.version // e.g. returns 3.2.0
Fixes¶ ↑
-
Compatibility: Replace automatic module wrapper with a manual solution (Fixes #253)
-
Functionality: Fix
config.distance
values whenconfig.origin
istop
orleft
.(Fixes #270) -
Functionality: Correctly record the interval argument for
sync()
(Fixes #268) -
Functionality: Fix animation sequence with
config.reset
(Fixes #241)
Improvements¶ ↑
-
Compatibility: Add
requestAnimationFrame
fallback. (Resolves #267) -
Functionality: Remove
console.log()
from minified distribution (Fixes #235)
3.1.0 — 2016, February 22nd¶ ↑
Includes patchwork up to 3.0.9.
Features¶ ↑
-
Sequences: New 3rd argument in
reveal()
to automate sequenced animation setup.<!-- example.html --> <div class="sequenced"> Foo </div> <div class="sequenced"> Bar </div> <div class="sequenced"> Bun </div>
// scripts.js sr.reveal('.sequenced', { reset: false }, 1000);
-
Container Selectors: Add support for
string
selectors to defineconfig.container
window sr = ScrollReveal({ container: '.container' }); // or sr.reveal('.foo', { container: '.fooContainer' });
-
Reveal Nodes: Add support for
Node
objects as the first parameter ofreveal()
// What you’re used to... sr.reveal('.myElem'); // New! Pass a Node (works great with React!) var myElem = document.querySelector('.myElem'); sr.reveal(myElem);
Fixes¶ ↑
-
Functionality: Add missing support for
config.mobile
(Fixes #216) -
Functionality: Return correct value when checking element visibility. (Fixes #193, #196)
-
Functionality: Improve runtime for chained
reveal()
calls. (Fixes #212) -
Compatibility: Debug Internet Explorer 9. (Fixes #230)
-
Compatibility: Debug Chrome on iOS. (Fixes #196)
-
Compatibility: Explicitly reference
window
object. -
Compatibility: Adjust AMD configuration for Webpack (Fixes #209)
Improvements¶ ↑
-
Functionality: Overwrite (instead of destroy) existing transition styles. (Resolves #197)
-
Functionality: Fail silently with
console.log
instead ofconsole.warn
-
Performance: Refactored initialization when using
sync()
-
Performance: Improve accuracy of callback timers.
3.0.0 — 2015, December 15th¶ ↑
Note: Version 3 is not backwards compatible with version 2.
Reimagining ScrollReveal for vastly improved flexibility and maintainability! :bow:
Breaking Changes!!¶ ↑
-
config
object has been completely overhauled.-
config.enter
renamedconfig.origin
-
config.wait
renamedconfig.delay
-
config.delay
renamedconfig.useDelay
-
config.over
renamedconfig.duration
-
config.move
renamedconfig.distance
-
config.viewport
renamedconfig.container
-
config.vFactor
renamedconfig.viewFactor
-
config.complete
renamedconfig.afterReveal
-
Time values are now expected in milliseconds (instead of
string
)-
e.g.
config.wait = "0.5s"
is nowconfig.delay = 500
-
-
config.scale
expects value typenumber
(instead ofObject
)-
e.g.
config.scale = { direction: 'up', power: '10%' }
is nowconfig.scale = 0.9
-
-
config.rotation
axis values requirestring
with unit type (instead ofnumber
)-
e.g.
config.rotation.x = 10
is nowconfig.rotation.x = "10deg"
-
-
-
ScrollReveal constructor is now capitalized.
-
e.g.
window.sr = ScrollReveal();
-
-
data-sr
attribute and all keywords are no longer used. Instead, use classes and JavaScript.
Example using version 2.3.2 (deprecated)
<!-- old.html --> <div data-sr="enter bottom over 2s and wait 1s"> Bad Foo </div> <div data-sr="enter bottom over 2s and wait 1s"> Bad Bar </div>
// old.js window.sr = scrollReveal(); sr.init();
Example using version 3.0.0
<!-- new.html --> <div class="myReveal"> Good Foo </div> <div class="myReveal"> Good Bar </div>
// new.js window.sr = ScrollReveal(); sr.reveal('.myReveal', { origin: 'bottom', duration: 2000, delay: 1000 });
Features¶ ↑
-
JavaScript API: All new developer interface. (Resolves #1, #122)
-
Easily configure (and re-configure) multiple reveal sets
-
Makes working with aysnchronous content a breeze
-
Drastically cleaner markup
-
-
Horizontal Scrolling: Add support for horizontal scrolling. (Resolves #184)
-
New Callback:
config.afterReset
— triggers when an element completely resets.
Improvements¶ ↑
-
Performance: 44% smaller, only 2.8KB minified and g-zipped.
-
Functionality: Reveals now resolve to the element’s computed opacity, instead of
1
. (Resolves #185) -
Functionality: The reliability of callback timers has been greatly improved.
2.3.2 — 2015, June 15th¶ ↑
The latest stable build of version 2. See Legacy Documentation (v2.x)
Note: There were some issues publishing this version on Bower, and so
v2.3.2
was patched tov2.3.3
to get it back on Bower. There is no meaningful difference between the two.
Features¶ ↑
-
Support instantiation without
new
keyword. (Pull request #148)
window.sr = new scrollReveal(); // or... window.sr = scrollReveal();
2.3.0 — 2015, April 25th¶ ↑
Features¶ ↑
-
New Keyword
opacity
— control animation starting opacity. (Resolves #95)-
e.g.
data-sr="opacity 0.5"
-
-
New Keywords
vFactor
,vF
— control element view factor. (Resolves #94, #142)-
e.g.
data-sr="vF 0.3"
)
-
(Hardly) Breaking Changes!¶ ↑
-
Removed
hustle
keyword, admit it—you didn’t even know it existed.
2.2.0 — 2015, March 18th¶ ↑
Features¶ ↑
-
New Keywords
spin
,roll
,flip
— control rotation during animation. (#138)-
e.g.
data-sr="roll 20deg"
-
Special thanks to {@satrun77}[https://github.com/satrun77] (#119)
-
2.1.0 — 2014, November 25th¶ ↑
Includes patchwork up to 2.0.5.
Fixes¶ ↑
-
Functionality: Add missing custom viewport event bindings
-
Functionality: Add tablets to mobile device user agent regex (Fixes #81)
-
Functionality: Better handle previously initialized nodes (Fixes #98)
-
Functionality: Refactor animator. (Fixes #96)
-
Compatibility: Update Bower and NPM
/dist
paths
Improvements¶ ↑
-
Performance: Remove
data-sr
attributes from the DOM that have already registered (Resolves #100) -
Functionality: Requires CSS Transition support. (Resolves #109)
2.0.0 — 2014, October 17th¶ ↑
A significant re-write of the public beta, based on 8 months of feedback! :bow:
Breaking Changes!!¶ ↑
-
data-scroll-reveal
attribute renamed todata-sr
. -
wait
andafter
keywords were redundant;after
has been removed.“`html <!– Don’t do this anymore… –> <div data-scroll-reveal=“after 1s”> Bad </div>
“`
Features¶ ↑
-
New Keyword:
scale
— control size during animation.-
e.g.
data-sr="scale up 20%"
-
-
Delay Types: Control when elements will
wait
usingconfig.delay
-
e.g.
onload
,once
, andalways
-
-
Mobile Support:
config.mobile
— easily enable/disable ScrollReveal on mobile devices. -
Custom Viewports:
config.viewport
— accepts any DOM node as the parent container. -
New Callback:
config.complete
— triggers after an element completes its reveal.