1.0.7 • Published 6 years ago

@lgoemaere/animascroll v1.0.7

Weekly downloads
8
License
MIT
Repository
github
Last release
6 years ago

AnimaScroll

Create animate anchor in an easy way.

AnimaScroll let you animate the anchor by passing some datas directly on your link, or with the constructor. You also can trigger the scroll manually without using a link thanks to the Animation class.

Why using it ?

  • Wrote in pure Vanilla JS, it doesn't require jQuery.
  • Maintains native use of html anchors.
  • Keeps url up to date with the hash history.
  • Makes anchors more accurate by taking into account fixed elements.
  • High flexibility with the programmatic scroll.
  • Good browsers supports. (IE10 +).
  • It using requestAnimationFrame for better animations performance.

Demos

See demos for each use cases.

Codepen: AnimaScroll with HTML declaration

Codepen: AnimaScroll with constructor

Getting started

npm

Install it as a depency with the following command:

npm i @lgoemaere/animascroll

script tag

Import AnimaScroll on your page. Use the min file in the ./package/dist folder.

<script src="AnimaScroll.min.js"></script>
<script src="main.js"></script>

Constructor

The Animascroll constructor is contains in the Anima namespace.

AnimaScroll

new Anima.AnimaScroll({ link, duration, timingCurve, shiftBy });
ParameterTypedefaultDescription
linkobjectnullThe link element.
durationnumber0The scroll animation duration.
timingCurvestringlinearThe timing curve function. Check the list here.
shiftBystringnullThe selectors of the elements whose height must be substracted from the scrolling distance.

Usage

HTML Declaration

You can use AnimaScroll by declaring it in the DOM like :

<a 
	href="#anchor"
	data-anima-link
	data-anima-duration="400"
	data-anima-timing-curve="easeInQuad"
	data-anima-shiftBy=".header, .banner"
>My cool link</a>
<!-- My site content -->
<div id="anchor"></div>
<!-- My site content -->

Only data-anima-link attribute is required.

With constructor

Or you can declaring it with the constructor and then init using the init method.

const link = new Anima.AnimaScroll({
	link: document.querySelector('.my-link'), // Required.
	duration: 400, // Optional.
	timingCurve: 'easeInQuad', // Optional.
	shiftBy: '.header, .banner' // Optional.
});
link.init();

Methods

  • init(): Initialize the link.
myAnimaScroll.init();

Callbacks

Note: Always call the callbacks BEFORE the init() method.

  • onComplete() :

Called after the scrolling animation is complete.

myAnimaScroll.onComplete = () => {
	// Scroll is complete.
};
  • onProgress(animationProgress, animationRange) :
ParameterTypeDescription
animationProgressnumberReturn the animation progress which is between the current scroll position and the anchor element.
animationRangenumberReturn position of the animation in the range between 0, 1.

Called while the scrolling animation is processing.

myAnimaScroll.onProgress = (animationProgress, animationRange) => {
	// Scroll is processing.
};

Programmatic scroll

If you want to trigger a scroll action you can call the Animation class in the Anima namespace.

Constructor

Animation

new Anima.Animation({ fromValue, toValue, duration, direction, timingCurve });
ParameterTypedefaultDescription
fromValuenumbernullThe starting scroll position.
toValuenumbernullThe ending scroll position.
durationnumbernullThe scroll animation duration.
directionstringscrollYThe scroll direction, can be vertical (scrollY) or horizontal (scrollX).
timingCurvestringlinearThe timing curve function. Check the list here.

Usage

You can trigger an animation scroll by declaring the constructor and then run animation by using the run() method :

const animation = new Anima.Animation({ 
	fromValue: 0,
	toValue: 1000,
	duration: 400,
	direction: 'scrollY',
	timingCurve: 'easeInOutCubic'
});
animation.run();

Methods

  • run(): Launch the animation.
myAnimation.run();
  • stop(): Stop the animation.
myAnimation.stop();

Callbacks

Note: Always call the callbacks BEFORE the run() method.

  • onComplete() :

Called after the scrolling animation is complete.

myAnimation.onComplete = () => {
	// Scroll is complete.
};
  • onProgress(animationProgress, animationRange) :
ParameterTypeDescription
animationProgressnumberReturn the animation progress which is between the fromValue and toValue.
animationRangenumberReturn position of the animation in the range between 0, 1.

Called while the scrolling animation is processing.

myAnimation.onProgress = (animationProgress, animationRange) => {
	// Scroll is processing.
};

Timing curves functions

Below are the timing curves options that you can use:

  • linear - no easing, no acceleration.
  • easeInQuad - accelerating from zero velocity.
  • easeOutQuad - decelerating to zero velocity.
  • easeInOutQuad - acceleration until halfway, then deceleration.
  • easeInCubic - accelerating from zero velocity.
  • easeOutCubic - decelerating to zero velocity.
  • easeInOutCubic - acceleration until halfway, then deceleration.
  • easeInQuart - accelerating from zero velocity.
  • easeOutQuart - decelerating to zero velocity.
  • easeInOutQuart - acceleration until halfway, then deceleration.
  • easeInQuint - accelerating from zero velocity.
  • easeOutQuint - decelerating to zero velocity.
  • easeInOutQuint - acceleration until halfway, then deceleration.
1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago