super-simple-scroll-animations

v1.0.3

Published

2 years ago

Intersection observer-based CSS scroll animations

Downloads

0High
0Medium
0Low

craigbaldwin

css js intersection-observer scroll-animations

Super Simple Scroll Animations (SSSA)

npm badge

SSSA uses intersection observers to detect when an element becomes visible, adding an is-visible class which triggers a CSS-powered animation. Optionally it can remove the class to trigger an exit animation.

Its aim was to provide a lightweight, dependency-free, and extensible approach to detecting when an element comes into view and animating it.

Usage

JavaScript

Import

import superSimpleScrollAnimations from 'super-simple-scroll-animations';

superSimpleScrollAnimations(0.3, false).init();

SSSA accepts two parameters:

threshold - Decimal to indicate at what percentage of the target's visibility the observer's callback should be executed, default 0.3
enableExitAnimations - When enabled it removes the is-visible when the element exits the viewport, default false

Inline

<script>
  window.sssa = {
    threshold: 0.3,
    enableExitAnimations: false,
  };
</script>

<script src="sssa.min.js"></script>

You will need to declare window.sssa.threshold and window.sssa.enableExitAnimations to change the defaults when using the script inline.

HTML

Elements you wish to be animated should have the attribute js-sssa added. When an element with js-sssa comes into view the is-visible class will be added to it.

<!-- Element will fade in when it passes the threshold -->
<div class="foo" js-sssa="fadeIn">
  Lorem ipsum dolor sit amet...
</div>

<!-- Sub-elements will fade in when parent passes the threshold -->
<ul class="foo" js-sssa>
  <li data-sssa="fadeIn">Lorem ipsum dolor sit amet...</li>
  <li data-sssa="fadeIn">Lorem ipsum dolor sit amet...</li>
  <li data-sssa="fadeIn">Lorem ipsum dolor sit amet...</li>
</ul>

Staggering the animations

To stagger the animations you will need to add a transition-delay property to your elements, either using CSS or inline.

In the example below we use Vue; it's assumed you're using a templating language to handle iteration.

<ul js-sssa>
  <li
    v-for="(person, index) in people"
    :key="index"
    :style="`transition-delay: ${(0.15 * index)}s;`"
    data-sssa="fadeIn"
  >
    {{ person }}
  </li>
</ul>

CSS

The module comes with a set of default animations, the animation used is determined by the value of the attribute added to the element.

@import '~super-simple-scroll-animations/css/sssa';

Movement is achieved using transform: translate(). Properties are transitioned using the CSS transition property. All transitions use cubic-bezier(0.42, 0, 0.58, 1) easing and a duration of 0.6s.

fadeIn - Fades in.
fadeDirectionUp - Moves up as it fades in.
fadeDirectionDown - Moves down as it fades in.
fadeDirectionLeft - Moves left as it fades in.
fadeDirectionRight - Moves right as it fades in.

Adding your own animations

Simply add the below CSS for each custom animation you want, replacing fade and opacity with your own animation name and property to transition.

.sssa-enabled [js-sssa=fade],
.sssa-enabled [data-sssa=fade] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

[js-sssa=fade].is-visible,
.is-visible [data-sssa=fade] {
  opacity: 1;
}

The .sssa-enabled class is added to the <body> element on load ensuring that users with JavaScript disabled are not presented with invisible elements.

Browser compatibility

| Chrome | Edge | Firefox | IE | Opera | Safari --- | --- | --- | --- | --- | --- | 51+ | 15+ | 55+ | X | 38+ | 12.1+

See MDN's page on intersection observer for full details.

For Internet Explorer support you will need to use a polyfill.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme