ScrollTrigger - Triggers classes on html elements based on the scroll position

  •        63

Triggers classes on html elements based on the scroll position. It makes use of requestAnimationFrame so it doesn't jack the users scroll, that way the user / browser keeps their original scroll behaviour. Animations run when the browser is ready for it. The init call takes 3 parameters, the first is a default set of options. The last two are the bindTo and scrollIn parameters. These are optional.

https://github.com/terwanerik/ScrollTrigger#readme
https://github.com/terwanerik/ScrollTrigger

Tags
Implementation
License
Platform

   




Related Projects

ui-scroll - Unlimited bidirectional scrolling over a limited element buffer

  •    Javascript

The common way to present to the user a list of data elements of undefined length is to start with a small portion at the top of the list - just enough to fill the space on the page. Additional rows are appended to the bottom of the list as the user scrolls down the list.The problem with this approach is that even though rows at the top of the list become invisible as they scroll out of the view, they are still a part of the page and still consume resources. As the user scrolls down the list grows and the web app slows down.

WOW - Reveal CSS animation as you scroll down a page

  •    Javascript

Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library. Follow @mattaussaguel for updates as WOW evolves.

kissui.scrollanim - CSS3 scroll animation library

  •    CSS

This library is a part of Kissui project. You can also download and include files manually from the latest releases.

angularjs-scroll-glue - An AngularJs directive that automatically scrolls to the bottom of an element on changes in it's scope

  •    Javascript

An AngularJs directive that automatically scrolls to the bottom of an element on changes in its scope. More information can be found in the live demo.

scrollMonitor - A simple and fast API to monitor elements as you scroll

  •    Javascript

The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element's visibility and location relative to the viewport. If your scroll container is an element other than the body you can create a container that creates watchers. The scroll monitor was designed to be very fast. On each scroll event the DOM is only touched twice, once to find the document height and again to find the viewport top. No variables are declared, nor are any objects, arrays, or strings created. Watchers are very cheap. Create them liberally.


jQuery.Marquee - jQuery plugin to scroll the text like the old traditional marquee

  •    Javascript

A 5.56 KB (minified) jQuery plugin to scroll the text like the old traditional marquee. Note: people who been asking me how to use this plugin with content being loaded with Ajax, please read notes about this update.

vue-chat-scroll - Automatic scroll-to-bottom directive for vue.

  •    Javascript

A plugin for Vue.js 2 that scrolls to the bottom of an element when new content is added within said element. Check out our lovely demo. Just include ./dist/vue-chat-scroll.js after Vue itself.

Scene.js - JavaScript & CSS timeline-based animation library

  •    Typescript

Scene.js is a JavaScript & CSS timeline-based animation library. It supports two plays Javascript and CSS animation. It provides effect presets that can give animation effects or make animation easier.

Morphext - A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate

  •    HTML

A jQuery plugin for creating text-based carousels, rotating small or large pieces of text one after the other, just like a slider does with images... This can be a great tool for displaying catch phrases, mission statements, tag lines, and so on. If you would like to achieve a similar effect with more flexibility (e.g. out animation) and with HTML objects rather than text phrases (e.g. unordered list items), please check out Morphist.

scroll-into-view-if-needed - Element

  •    Javascript

This used to be a ponyfill for Element.scrollIntoViewIfNeeded. Since then the CSS working group have decided to implement its features in Element.scrollIntoView as the option scrollMode: "if-needed". Thus this library got rewritten to implement that spec instead of the soon to be deprecated one. You can find the library on window.scrollIntoView.

micron - a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power

  •    CSS

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript. Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

stroll.js - CSS3 list scroll effects

  •    HTML

A collection of CSS list scroll effects. Works in browsers with support for CSS 3D transforms including a special touch-enabled mode for iOS & Android 4.x. Curious about how this looks in action? Check out the demo page.

animatescroll.js - A Simple jQuery Plugin for Animating Scroll

  •    HTML

AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the id or classname of the element where you want to scroll to. It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more. Supports more than 30 unique Scrolling Styles.

radiobox

  •    CSS

A tiny set of CSS3 animations designed for your radio inputs. Include dist/css/boing/boing.min.css instead, if you want to use only the Boing animation, for example.

sentineljs - Detect new DOM nodes using CSS selectors (650 bytes)

  •    Javascript

SentinelJS is a tiny JavaScript library that lets you detect new DOM nodes using CSS selectors (650 bytes). SentinelJS uses dynamically-defined CSS animation rules (@keyframes) to hook into browser animationstart events when a new node matching a given CSS selector is added to the DOM. In general this should be more performant than using a Mutation Observer to watch the entire document tree for changes and iterating through all new child nodes recursively. SentinelJS performs one hash key lookup on calls to the animationstart event so the performance overhead is minimal. If you define the animation-name property on a CSS rule that overlaps with the selector in your SentinelJS watch function then only one of those animations will be called which could cause unexpected behavior. To get around this you can trigger SentinelJS watches from your CSS using custom animation names (see below).

Parallax-ImageScroll - JQuery and amd compatible plugin to create a parallax effect as seen at spotify

  •    Javascript

JQuery and amd compatible plugin to create a parallax effect with images. Heavily inspired by the spotify.com website. The plugin is really simple to use with some options to tweek. It makes use of css3 transform for animation where supported and falls back to top and left positioning for ancient browsers.

vue-scrollto - Adds a directive that listens for click events and scrolls to elements.

  •    Javascript

For vue 1.x use vue-scrollTo@1.0.1 (note the capital T) but keep in mind that the old version depends on jquery. vue-scrollto uses window.requestAnimationFrame to perform the animations, thus giving the best performance.

checkbox

  •    Javascript

A tiny set of CSS3 animations meant for your checkbox inputs. Include dist/css/yo.min.css instead, if you want to use only the Yo animation, for example.

jScrollPane - Pretty, customisable, cross browser replacement scrollbars

  •    HTML

jScrollPane is a jQuery plugin which allows you to replace a browser's default scroll bars (on an element which has overflow: auto) with a HTML structure that can be easily skinned using CSS. Please feel free to make Bug reports against project but if you are making Issue in this project please read below.