Features

• The reveal() method now supports native arrays as target argument.

Includes patchwork up to 3.3.6.

Features

• #273 New Callbacks: beforeReveal(el)
• #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: Element visibility detection has been improved. (Fixes #352)
• Functionality: The default config.container now recognizes selectors (Fixes #289)
• Compatibility: Added missing trailing semi-colon (Fixes #278)

Includes patchwork up to 3.1.5.

Features

• Reveal Node Lists: Add support for Node List objects as the first parameter of reveal()

  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 when config.origin is top or left.(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)

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 define config.container

window sr = ScrollReveal({ container: '.container' });
// or
sr.reveal('.foo', { container: '.fooContainer' });

• Reveal Nodes: Add support for Node objects as the first parameter of reveal()

// 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 of console.warn
• Performance: Refactored initialization when using sync()
• Performance: Improve accuracy of callback timers.

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 renamed config.origin
  • config.wait renamed config.delay
  • config.delay renamed config.useDelay
  • config.over renamed config.duration
  • config.move renamed config.distance
  • config.viewport renamed config.container
  • config.vFactor renamed config.viewFactor
  • config.complete renamed config.afterReveal
  • Time values are now expected in milliseconds (instead of string)
    • e.g. config.wait = "0.5s" is now config.delay = 500
  • config.scale expects value type number (instead of Object)
    • e.g. config.scale = { direction: 'up', power: '10%' } is now config.scale = 0.9
  • config.rotation axis values require string with unit type (instead of number)
    • e.g. config.rotation.x = 10 is now config.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.

The latest stable build of version 2. See Legacy Documentation (v2.x)

Features

• Support instantiation without new keyword. (Pull request #148)

window.sr = new scrollReveal();
// or...
window.sr = scrollReveal();

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.

Features

• New Keywords spin, roll, flip — control rotation during animation. (#138)
  • e.g. data-sr="roll 20deg"
  • Special thanks to @satrun77 (#119)

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)
  • Bug source: setTimeout in for-loop does not print consecutive values
• 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)

A significant re-write of the public beta, based on 8 months of feedback! :bow:

Breaking Changes!!

• data-scroll-reveal attribute renamed to data-sr.
• wait and after keywords were redundant; after has been removed. ```html

Features

• New Keyword: scale — control size during animation.
  • e.g. data-sr="scale up 20%"
• Delay Types: Control when elements will wait using config.delay
  • e.g. onload, once, and always
• 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.