changelogs.md


jlmakes/scrollreveal

Repository  -  API  -  Source

3.3.6

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)

3.2.0

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)

3.1.0

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.

3.0.0

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.

2.3.2

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

2.3.2

February 3, 2003

Features

  • Support instantiation without new keyword. (Pull request #148)
window.sr = new scrollReveal();
// or...
window.sr = scrollReveal();

2.3.0

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

Features

  • New Keywords spin, roll, flip — control rotation during animation. (#138)

2.1.0

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

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

Good
```

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.