scroll-out / scroll-out

ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects!

ScrollOut

Animate on Scroll

Why should I use this?

• Animate or reveal elements as they scroll into view using CSS or JavaScript
• Super tiny JavaScript library at 1KB minified and gzipped.
• Free for commercial and non-commercial use under the MIT license.

How do I use it?

Install ScrollOut and decorate elements with the data-scroll attribute. As elements become visible, data-scroll will be set to in and when elements are scrolled out they will be set with out. Add your own CSS or JS to make a big impression when things come into view. That's it!

Getting Started

Check out the documentation.

Compatibility

The core features are compatible on all modern desktop and mobile browsers. Internet Explorer 11 is also supported.

Maintainers

Maintainer	GitHub	Twitter
Christopher Wallis	@notoriousb1t	@notoriousb1t
Stephen Shaw	@shshaw	@shshaw

License

scroll-out is licensed under the MIT license.

scroll-out's Issues

Feature request: offset & percentVisible

Some additional options that would help with versatility would be offset and percentVisible (or other better names)

Something like

ScrollOut({
  percentVisible: .4 // trigger when at least 40% of the element is visible`
  offset: 20 // all checks are offset 20px from the edge of the container/viewport
})

offset is handy for instances like a fixed header where you want it to trigger a bit later.

If say you have percentVisible: .2 then when at least 20% of the element is in the viewport, it’s visible. If you’re scrolling down and 80% of the element goes out the top, then it’s triggered to hidden

Why clamp the viewportY value for parallax?

I can see through the doc and the code that viewportX/Y values are clamped but when doing parallax, I want to see object moving while their center position isn't yet in the viewport (so value can be greater or lesser than 1/-1).

Maybe you can give possibility to clamp or not values with an option?

Feature request: Manual Update

Adding the update function to the returned instance would be useful for instances where the window may not have resized or container scrolled, but you want to manually trigger a check for if the element is in the viewport.

Useful for DOM changes, Style changes, Frameworks, etc

Position Relative doesn't get tracked correctly

Having position: relative on a parent container causes the elements inside the container to not be tracked correctly. Unfortunately I'm not very good with JS so I haven't been able to narrow down why position relative causes this issue, I did put together a JSfiddle to showcase the issue I am having.

http://jsfiddle.net/n9fa0hxt/4/

CSS Variable Namespacing

From an offline conversation with @davidkpiano, @shshaw

Add an option

{ namespace: true } // default false

to ScrollOut to add a prefix of so to css variables. This should prevent naming conflicts as css variables become more widespread in libraries.

typings absent from npm package

I saw this is mostly written in Typescript (Awesome choice!). But I noticed that the typings aren't distributed with the npm package. Is there a reason for leaving them out?

Change behavior of cssProps to accept a list of properties

• When true, all cssProps will be set on the elements
• When false, all cssProps will be ignored
• When an array of string, only set props in the list

Data-scroll "in" by default, working in wrong direction.

I'm having a problem with this script. If the page is loaded, then ALL data-scroll elements are classed as "in" even though these are not seen on the screen yet. Scrolling from top to the bottom won't give any transitions. But when i finally scroll past to the data-scroll element, it changes to the "out" (as it is supposed to). Script seems to work in the opposite direction of the page, because when scrolling from bottom to the top, then data-scroll element changes from "out" to "in" and transition works.

Any clues?

How can you convert the CSS Props values into pixel values?

The current values work well for scaling and fading as they are 0-1 but I was looking to blur an image based on its viewport X value so I would like to go from filter: blur(0) - filter: blur(10px)

Add compatibility to README or Documentation

Without browsing through all of the source, I'm not sure what browser compatibility looks like for the library. Does it work on IE9/10/11? etc. Would be really handy to have a list of minimum browsers on the home page to help know if it can be used.

Multiple options (with Vue)

Hi. Thanks for this lib. I like the way it works.
I have this.
I use Vue and I need to setup 2 types of elements behaviours.
Something like:

       this.so = ScrollOut({
          scope: this.$el,
          targets: '[data-scale]', // It's for once played elements
          once: true
        })
        ScrollOut({
          targets: '[data-parallax]', // It's for some parallax effect
          cssProps: { 
            viewportY: true
          }
        })
}

The problem is

In this case my Once Played elements work incorrect. Random ones just stay in 'out' parameter when page reloaded (and when window scrolls). Some of them do not nailed by 'data-scroll'. ☹️

But if I left one ScrollOut({…}) it seems to work fine.

Is that any way to use multiple options to use different effects?
Thank you in advance.
I'm designer. Please, don't judge me. 😇

Add onUpdate() callback each time scroll ticks

Add a callback that fires each time the css properties are being recalculated.

Why Scroll out not work with svg tag. Ex: g tag

Hi! I am working with svg and i have an issue. I try to add data-scroll to group tag (g) in svg to animate it. But Scroll out seems not work with svg

Add feature to detect if element scroll in from bottom and scrolling out at the top

I want Elements to scroll in from the bottom with translateY(10%) but when they reach the top I want them to translate to -10%. Couldn't figure how to do it with the current version. Would love to have that feature.

Elements not appearing on initial page load

Every once in a while elements that are in the viewport do not appear when the page is loaded. Elements that are out of view will appear on scroll as expected but the initial elements stay "unscrolled".

I have tried calling ScrollOut in both the window load and DOMContentLoaded events but experience the same result.

Has anyone else encountered this?

Different animation every 2nd section

So right now the reveal animation makes a section slide in from the left. But how would i make it so every 2nd section slides in from the right side?
Can't seem to find anything about it in the documentation

How to use scroll-out in Angular 7?

I found this library, and it's really interesting in term of size. I used the library with plain normal HTML, CSS, and JS, as a result, it works perfectly fine. However, it want to use it in my Angular 7 project, and it doesn't work. It seems like the library is not execute any code.
Here are my steps of adding this lib to the project.

1. Installation

npm i scroll-out

2. Import libs

.....
import ScrollOut from 'scroll-out'
import {AfterContentInit, Component, ElementRef, OnDestroy, OnInit} from '@angular/core';
.....

3. Add code to the MyComponent

import ScrollOut from 'scroll-out'
import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit} from '@angular/core';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss'],
  animations: []
})
export class MyComponent implements OnInit, AfterContentInit, OnDestroy {
     data = [...];
      so: any;
     constructor(private el: ElementRef) {}
    
    ngAfterContentInit() {
        this.so = ScrollOut({
             scope: el.nativeElement
        });
    }
  
    ngOnInit() {

    }

    ngOnDestroy(): void {
        this.so.teardown();
    }
}

4. In my HTML ./detail.component.html

<ul>
   <li *ngFor="let item of data"  data-scroll>{{item.stuff}}</li>
</ul>

5. In my SCSS './detail.component.scss'

[data-scroll] {
  transition: opacity 1s;
}
[data-scroll="in"] {
  opacity: 1;
}
[data-scroll="out"] {
  opacity: 0;
}

Finally, I did follow the guide in Use with Frameworks

If you have any sample project of scroll-out with @angular, please kindly share us.

Scroll-out and Smooth-scrollbar compatibility

I tried to use Scroll-out with smooth-scrollbar but it does not seem to work (even with scrollingElement). Any idea?
Example: https://codepen.io/febba/pen/jdJgaa

data-scroll doesn't works on inline elements

When I add data-scroll to a inline element the value is always out.

CSS Variable for if the element is overlapping the start or end of the viewport

@shshaw, continuing our conversation here:

For scroll out, an intersection variable could work like you described

--intersect-y: -1; // top of viewport
--intersect-y: 0; // fully visible
--intersect-y: 1; // end of viewport

Then you can multiple in your calc() Would also allow for more of a binary approach to specific styles

I think this could work, are you cool with the names --intersect-y / --intersect-x? That would translate to [data-scroll-intersect-x] and in the context passed to callbacks, it would be intersectX/Y

Targeting multiple elements

Is it possible to target multiple elements on the same page for different animations? For example el1 fades in and el2 slides in. Or do all elements have to have the same effects?

Not working in Angular 9. Am I making any mistake

app.component - Copy.txt
app.component - Copy.txt

It is only working when page is load not on scroll . I am using Animated.css with your library

Limit decimal places on CSS Vars

Currently css variables are written as is. It may improve performance and predictability to limit decimals to the thousandth decimal place 0.001 to reduce how often the dom changes due to css variable changes.

This is particularly important for variables such as --visible-y that are updated frequently during scrolling

How can I use scroll-out in React(Gatsby)?

When I run gatsby build, it shows window is not defined.

`WebpackError: ReferenceError: window is not defined

• index.js:55 Object../node_modules/scroll-out/lib/index.js
  [lib]/[scroll-out]/lib/index.js:55:1

• bootstrap:19 webpack_require
  lib/webpack/bootstrap:19:1

• bootstrap:19 webpack_require
  lib/webpack/bootstrap:19:1

• index.js:1 Module../src/pages/index.js`

Add callback onVisible

From a conversation with @shshaw.

We should add a way to do a callback when an element goes in and out of view (not only a classname)

Usage:

ScrollOut({ 
  element: Node, 
  onChange: function(isVisible){ } ,
  onVisible: function() {},
  onHidden: function() {}
});

Enhance resize events + once: true not working on iOS Safari

once: true gets ignored by iOS Safari latest. Gets updated all the time an element scrolls into viewport.

It's because iOS Safari triggers a resize event once the browser bars disappear. So this line is the problem:

// Hook up document listeners to automatically detect changes.
win[ON](RESIZE, index);

If you change it to this it works as expected:

// Hook up document listeners to automatically detect changes.
win[ON](RESIZE, update);

Is there any reason why you are calling index() here instead of update()?
I think this is even more performant anyway.

Limited functionality in Edge

I don't think this is as much an issue with scroll-out as it is with Edge's lack of (or limited) support of var() inside calc() but since this is one of, if not the, primary use case for the library and most of the demos are broken in Edge I thought I'd share some notes.

• The main problem is documented pretty well in this post on Codepen
• Opacity is the only property that changes in the Scaling Gallery on Scroll demo
• All demos using Splitting.js are either broken or partially functioning too since these often use var() and calc() to calculate a delay based on a character's position in the string.
• It seems that using the variables on their own (without calc) is the only way they work in Edge (even when using calc in locations that don't need a unit like opacity and transform: scale();)

Can you confirm this is a limitation of Edge instead of something being broken in the library?

If it is an Edge limitation,

1. Are there ways you recommend working around it to get the intended behavior of rules like: transform: rotateX(calc(180deg * var(--visible-y)));?
2. It would be helpful to have a note about these "gotchas" on the Compatibility section in the docs. Although technically true, the "ScrollOut is compatible with all modern browsers and Internet Explorer." line could be misleading.

Thanks for any help!

Edit: I haven't tried this yet so I'm not certain it's as bullet-proof as I'm guessing it will be. It seems the obvious answer to this is to switch from using the provided CSS variables for animation to the event handlers in javascript to animate elements directly or have them set a :root variable that has already done whatever calc() is currently handling in CSS since this is the one scenario that Edge seems to be able to handle.

offsetY not available?

Got a report:

this is about a bug in Scroll-out, offsetY not showing, it's missing from line 185 of the library.
cssProps: { offsetY: true, <--- the variable will never appear, missing line of code in the library

Scroll percent variables (ex. --scroll-percent-y) do not update properly on Safari

Device Information:

• Safari Version 12.1.1
• Device: MacBook Pro (Retina, 13-inch, Early 2015)
• MacOs Mojave 10.14.5 (18F132)

Package Version:

"scroll-out": "^2.2.7"

Application code snippet:

static initScrollLogic() {
    // init scroll out object
    ScrollOut({
      cssProps: {
        scrollPercentY: true,
      },
    });

    /* Calling function that handles the scroll
      animation of the 'Beagles' text in the sidebar */

    beaglesNameAnimationFn(config);
  }

Issue Summary:

On safari (desktop), the scroll percent variables do not seem to update properly, and remain at 0 (ex. --scroll-percent-y: 0).

I'm am not seeing this issue on other browsers. I've tested it on Chrome and Firefox and everything seems to work as expected.

Below is a screen shot of what I'm seeing on my end. As you can see if you take a look at the style attribute on the html tag, the styles and data attribute are all added to the document properly (style="--name-diff: 44.0409%; --scroll-percent-y: 0;").

I'm not sure if this is related to this issue or not (#16).

Please let me no if you need anymore information. Thanks in advance!

Issue on Vuejs with TypeScript

Hi, I got an issue when trying to use this ScrollOut with Vue with TypeScript. I used version 2.2.7. I followed guide on the documentation but it got errors on vue like below

[Vue warn]: Error in mounted hook: "TypeError: scroll_out_1.default is not a function"

Maybe someone has experienced on it, appreciate if someone can help.

Add viewport css prop to signify the current position of an element in the viewport.

From an offline discussion with @shshaw

--viewport-y: 1; // out of viewport on the bottom
--viewport-y: 0.5: // center of viewport
--viewport-y: 0; // out of viewport on the top

where does [data-scroll="on"] goes to?

Hi,

when I tried to reproduce the sticky-header example it did not work. Maybe because I am not able to split html CSS an JS correctly. Everything works as long as I exclude [data-scroll="on"]. Not as expected, but it worked. After all I head a look in to the scroll-out.js

All I can find is the "in" and "out" but no "on"
Where is my mistake?

Thanks a ton
Thorsten

More animation css codes please

I get slideinup animation with following code as you described in your demo.

.scroll {
  opacity: 0;
  will-change: transform, scale, opacity;
  transform: translateY(6rem) scale(0.93);
  transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.scroll[data-scroll="in"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

ScrollOut({
targets: '.scroll'
});

I would like to have more css codes for animation. Can you point me to some css codes for animations like bounce, fade, flip, rotate, zoom etc

Configuration using data attributes

First off: Thank you for this! Really easy to get setup and works wonders!

I'm under the impression that most of the setup can be done using data attributes. Such as <div data-scroll data-scroll-once="true" data-scroll-threshold="0.9">.

If it's already supposed to work, could you point me in the right direction? If not, could it be added?

Again, thank you for the fine work!

Once I call the teardown method, scroll-out will never work even I init it again

I write a nextjs project, and init scroll-out in one page's componentDidMount method and teardown in componentWillUnmount method. When I first visit the page, it works well, but the second time i visit this page, scroll-out not work any more. After i lookup the source code, i find that clearTask never be set to zero.

Feature Request: Per element callback

It'd be great to target a specific element for more dynamic uses (frameworks, components, etc) and allow for callbacks to trigger instead of class changes.

Scroll-Out({ 
  element: Node|NodeList|Array|String, // Node, list of nodes, or selector to find nodes
  // Callback functions, triggers per each element
  onVisible: function(element){ }
  onHidden: function(element){ }
  onChange: function(element, isVisible) { } 
});

Add compiled/dist version?

We need to include a "browser ready" version to make it easy for non-bundle users to test it out and to make it easy to use on Codepen with unpkg.com.

1. Would you rather have a /dist/ folder, or just scroll-out.js in the base dir?
2. Should this be minified, or should we have a separate scroll-out.min.js?

Issue with Vue Framework

This is script structure in my HTML

<div class="foo" data-scroll></div>
<script src="vue.js"></script>
<script src="scroll-out.js"></script>
<script>
ScrollOut({
  /* options */
});

// some vue app script
new Vue({
	  el:'#app',
	  components: { 'mobile-nav' : mobileNav },
	  // menu nav
	  data: {
	  	showNav: false,
	  }
  })
<script>

Refresh my browser but still nothing happen to data-scroll attibute. Any Idea?

I read the guide about how to using it with framework, but i have no idea where exactly to put the script

thanks

How do I know percentage of current element that was scrolled?

I have a set of sections ~150vh each. How do I know percentage of scrolled space within current section? --viewport-y not seems to be helpful here as it gives values relatively to viewport center. or can anyone suggest how do I achieve parallax for with this variable? I planned to give transitionY to the image based on the --viewport-y but seems I need scroll position within current element from 0 to 1

onShown when 0.2 of element visible but onHidden when fully hidden?

I need to run some js make a chart animate in. Then I want the threshold of 0.2 (ish) but when it scrolls out of view I dont want to reset the chart until the element is completely hidden.

I managed to set threshold but from what I can see you cant to have different thresholds depending on if element scrolls in to view vs when it scrolls out of view

Is this possible with scrollout or can it be added?

Scroll Tracking not working in iframe on Mobile Safari

When using Mobile safari in an iframe, scroll tracking does not appear to work. I think the scrolling element might be different in that particular scenario.

Cannot read property 'filter' of undefined

Need to make sure elements is an array for this line:
https://github.com/scroll-out/scroll-out/blob/master/src/main.js#L63

Not sure what triggered the error specifically in my instance, but I noticed it coming up on the Splitting docs.

Question: Trigger animation on page load

I might be missing this in the documentation, but is it possible to trigger the animations once the page loads? Right now I have elements that are being watched by Scroll Out that are already in the viewport when the page loads. I would like them to animate in as if they were moving into the viewport, I hope that makes sense.

I can email you the site if you need to see an example.

Elements are registering in when they should be out.

I have this integrated with a Shopify theme, and some of the elements that I am targeting using a specific class are registering in the viewport when they are out of the viewport.

Any idea why?

Data-scroll

Vue Directive

Hi, thanks for the great package, I was wondering if its possible to create a Vue-directive (v-scrolout) instead of having to do a mounted function for every element in the page

   mounted: function() {
      ScrollOut({
         scrollingElement: ".flow",
         targets: ".item_img"
      });
   }

for example I tried this but it doesn't work

Vue.directive('scrollout', 
    function(el) {
      ScrollOut({
         scrollingElement: ".flow",
         targets: el._prevClass
      });
    }
);

Appreciate any help, thanks

Not working for me

I am trying to add scroll effect to my site here. What I did is add js file to head as scroll.js. I have animate.css in the head already.
I add data-scroll attribute to every element I want. Added following code in js file.

<script>
 ScrollOut({
  onShown: function(el) {
    // remove the class
    el.classList.remove("animated");

    // force reflow
    void el.offsetWidth;

    // re-add the animated cl
    el.classList.add("animated");
  }
});
</script>

animate on scroll not working, did I miss any step?

EDIT
I did like this,

var el = document.querySelector(".test");
el.setAttribute("data-scroll", "");
 ScrollOut({
   once: false,
  onShown: function(el) {
    // remove the class
    el.classList.remove("animated", "zoomIn");

    // force reflow
    void el.offsetWidth;

    // re-add the animated cl
    el.classList.add("animated", "zoomIn");
  }
});

Now first section gets animated on scroll. But remaining section targets not working.

How to add ScrollOut js to Nuxtjs

I need your help to add scrollOut js in Nuxt js project. I am getting window not defined error.

I have followed Nuxt's guidlines of adding a plugin like
if (process.client) { require('external_library') }
However this isn't working for me even after adding the plugin in the nuxt.config.js file

import ScrollOut from "scroll-out";

export default {
  methods: {
    textAnim() {
      TweenMax.set("#logo, .hidetext, #about-text", { visibility: 'visible' })
      const tl = new TimelineMax();
        tl.from("#logo path", 1, { stroke: "white", drawSVG: "0" });
        tl.to("#s_1_", .5, { fill: "white", stroke: "none" }, "-=.3")
        tl.to("#k_1_", .5, { fill: "gray", stroke: "none"}, "-=.3")
        tl.staggerFrom(".hidetext", 1, { y: "130%", ease: Power4.easeOut }, 0.5);
        tl.from("#about-text", 0.5, { alpha: 0, y: 50, ease: Power1.easeOut }, "-=.5");
    }
  },
  mounted() {
    ScrollOut({
      targets: "h3, [data-splitting], ul li",
      threshold: .5
    });
    this.textAnim();
  },
  components: {
    Logo
  }
};

Also in my package.json file I see "nuxt": "^2.0.0", version. I created the project using create-nuxt-app.

Any help is really appreciated.

Thanking you

Scroll-out treats [data-scroll = "in"] as [data-scroll="out"] but not the other way around!

If I change the out to in it straight up stops working.

Please help me!

example https://gyazo.com/be64e39ff9a8d81e416f74b9ab84802e
find my code: https://github.com/TheBlackVoid/portfolio-v3

Directional Awareness

It would be helpful in addition to in and out to provide a data attribute that indicates which direction the scroll is going, something like;

// when scrolling down
<div data-scroll="in" data-direction="to-end"></div>

// when scrolling up
<div data-scroll="in" data-direction="to-start"></div>

This would aid in making CSS effects that act differently when scrolling up vs down while the element is in view.

Thoughts @shshaw ?