ScrollScene

ScrollScene is an extra layer on top of ScrollMagic as well as using IntersectionObserver to achieve similar effects.

Examples

View the online Storybook.

Install

yarn add scrollscene scrollmagic

or

npm install scrollscene scrollmagic

If plan to use only the ScrollObserver, currently you can

yarn add scrollscene && yarn add -D scrollmagic

to avoid import errors.

Import

ScrollScene (uses ScrollMagic)

import { ScrollScene } from 'scrollscene'

ScrollObserver (uses IntersectionObserver)

import { ScrollObserver } from 'scrollscene'

ScrollMagic (with SSR catch)

import { ScrollMagic } from 'scrollscene'

or

import { ScrollMagicSsr } from 'scrollscene'

ScrollMagic and ScrollMagicSsr are the exact same thing.

Options

ScrollScene Options (uses ScrollMagic)

| option | Description / Example | | ---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | breakpoints | breakpoints: { 0: false, 768: true } is used to set responsiveness of the new ScrollMagic.Scene, mobile-first. | | controller | controller: { vertical: false }. Add anything from new ScrollMagic.Controller(options). | | duration | duration: '100%' OR duration: { 0: '50%', 768: '100% } is used to set responsiveness of the new ScrollMagic.Scene, mobile-first. OR set as a dom node (HTMLElement) duration: triggerElement and the scene will last as long as the height of the element. | | gsap | Init a Gsap timeline with gsap: { timeline: myTimeline, reverseSpeed: 2, yoyo: true, delay: 2 }. | | offset | Used to change the ScrollMagic offset. | | scene | scene: { loglevel: 1 }. Add anything from new ScrollMagic.Scene(options). | | toggle | Toggle a className on an element with toggle: { element: containerRef.current, className: 'lets-do-this' }. The element key does not accept string; eg: .className. Use a dom node selector instead. | | triggerElement | triggerElement: document.querySelector('#element') is used to set the element you wish to trigger events based upon. Does not accept string; eg: .className. Use a dom node selector instead. Optional: If left blank, will use top of page. | | triggerHook | Used to change the ScrollMagic triggerHook. | | methods | You can actually apply all the ScrollMagic.Scene methods to ScrollScene, like const scrollScene = new ScrollScene({...}); scrollScene.Scene.on('enter', ()) or setPin. See all the options here: http://scrollmagic.io/docs/ScrollMagic.Scene.html. The same goes for ScrollMagic.Controller, scrollScene.Controller.destroy(true), but be careful if you're using the built-in globalController. |

ScrollObserver Options (uses IntersectionObserver)

| option | Description / Example | | -------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | breakpoints | breakpoints: { 0: false, 768: true } is used to set responsiveness of the new ScrollMagic.Scene, mobile-first. | | | gsap | Init a Gsap timeline with gsap: { timeline: myTimeline, reverseSpeed: 2, yoyo: true, delay: 2 }. | | observer | observer: { rootMargin: '-50% 0%' } is used to pass extra options to pass the IntersectionObserver, like root, rootMargin, or threshold (to override the thresholds option). observer: { rootMargin: '0px', threshold: 1.0 } | | offset | Used to change the rootMargin easy. offset: '-10% will be rootMargin: '-10% 0%'. This is a bit wonky and needs more testing. | | thresholds | thresholds: 1 is to set the number of thresholds you want. thresholds: 100 = [0, 0.1, 0.2, ... 0.98, 0.99, 1]. It's easy to use whenVisible. | | toggle | Toggle a className on an element with toggle: { element: containerRef.current, className: 'lets-do-this' }. The element key does not accept string; eg: .className. Use a dom node selector instead. | | triggerElement | triggerElement: document.querySelector('#element') is used to set the element you wish to trigger events based upon. Does not accept string; eg: .className. Use a dom node selector instead. | | useDuration | useDuration: true to use the percentage of element visibility to scrub the gsap timeline. Similar to ScrollMagic Duration on a Gsap timeline, but not quite the same if the element is longer than the viewport height, thus the element visibility will never reach 100%, thus the gsap timeline will never reach 100%. | | destroyImmediately | destroyImmediately: true to destroy the scene immediately after firing once the element is visible. |