animare/lib/commonjs/plugins/scrollAnimation.js

Advanced animation library for modern JavaScript.

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.scrollAnimation=scrollAnimation;var _types=require("../types.js");var _utils=require("./utils.js");/**
 * Makes the scroll progress control the timeline.
 *
 * @param options - The options for configuring the scroll-controlled animation.
 * @returns A function to remove the scroll event listener.
 *
 * @example
 * const myAnimation = animare( ... );
 *
 * // The element to track when entering and exiting the viewport
 * const element = document.getElementById('element');
 *
 * const unsubscribe = scrollAnimation({
 *   timeline: myAnimation,
 *   element: element
 * });
 *
 * unsubscribe(); // Removes the scroll event listener
 */function scrollAnimation(options){const element=options.root??document;const handler=()=>onScroll(options);element.addEventListener('scroll',handler,{passive:true});return()=>element.removeEventListener('scroll',handler);}function onScroll(_ref){let{timeline,element,root=document.documentElement,axis=_types.ScrollAxis.Vertical,start=_types.ScrollElementEdge.Top,end=_types.ScrollElementEdge.Bottom,startOffset=0,endOffset=0}=_ref;const isVertical=axis===_types.ScrollAxis.Vertical;const viewPortSize=isVertical?root.clientHeight:root.clientWidth;const scrollPosition=isVertical?root.scrollTop:root.scrollLeft;const startPosition=calcElementPosition(element,root,start)+startOffset;const endPosition=calcElementPosition(element,root,end)+endOffset;const isEntered=startPosition<=scrollPosition+viewPortSize;const isExited=endPosition<scrollPosition;let percentage=0;if(!isEntered){percentage=0;}else if(isExited){percentage=1;}else{const distance=viewPortSize-(startPosition-endPosition);percentage=(0,_utils.normalizePercentage)((scrollPosition+viewPortSize-startPosition)/distance);}timeline.seek(timeline.timelineInfo.duration*percentage);if(!timeline.timelineInfo.isPlaying)timeline.playOneFrame();}function calcElementPosition(element,root,edge){if(edge===_types.ScrollElementEdge.Top)return element.offsetTop-root.offsetTop;if(edge===_types.ScrollElementEdge.Bottom)return element.offsetTop-root.offsetTop+element.offsetHeight;if(edge===_types.ScrollElementEdge.Left)return element.offsetLeft-root.offsetLeft;if(edge===_types.ScrollElementEdge.Right)return element.offsetLeft-root.offsetLeft+element.offsetWidth;return element.offsetTop;}