On scroll animation utilities, elements entering viewport + parallax effects. This library uses GSAP and Scrolltrigger.

Visit our demo page

CDN links

| Description | URL | | ----------------------- | --------------------------------------------------------------------- | | CSS | https://unpkg.com/byc-animations/bundled/byc-animations.min.css | | JS | https://unpkg.com/byc-animations/bundled/byc-animations.min.js |

<script>
	let animations
    animations = new BycAnimations();
</script>

Package manager (NPM)

npm install byc-animations

Getting Started

Javacript

import BycAnimations from 'byc-animations';

const animation = new BycAnimations();

Instance settings

| Option | Type | Default | Description | | ----------------------- | ---------------------- | --------------- | --------------------------------------------------------------------------- | | animateStart | string | top 70% | First value represents the part of the trigger which will initiate the animation once it meets the second value. The second value represents a location in the viewport. | | animateEnd | string | '' | First value represents the part of the trigger which will trigger the animation once it meets the second value. The second value represents a location in the viewport. | | animateMarkers | boolean, object | false | Enable visual markers for animate-content during development to see exactly where the start/end/trigger points are. Customization options abound, like markers: {startColor: "green", endColor: "red", fontSize: "12px"} | | inViewClass | string | in-view | HTML class to apply on an element once its in the viewport. | | outViewClass | string | out-view | HTML class to apply on an element once its outside the viewport. | | parallaxStart | string | top bottom | First value represents the part of the trigger which will initiate the animation once it meets the second value. The second value represents a location in the viewport. | | parallaxEnd | string | '' | First value represents the part of the trigger which will trigger the animation once it meets the second value. The second value represents a location in the viewport. | | parallaxMarkers | boolean, object | false | Enable visual markers for parallax during development to see exactly where the start/end/trigger points are. Customization options abound, like markers: {startColor: "green", endColor: "red", fontSize: "12px"} | | parallaxScrub | boolean, number | true | Boolean: if true, links the animation's progress directly to the ScrollTrigger's progress. Number: The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. | | smoothScroll | boolean | true | Set to false to disable lenis smooth scrolling. | | scrollDirection | string | vertical | Scroll direction: vertical or horizontal | | scrollGestureDirection | string | vertical | Your gesture direction on your trackpad/magic mouse or your touch devices. vertical, horizontal or both | | scrollDuration | number | 1.2 | The duration of scroll animation (in seconds). | | scrollEasing | function | Math.min(1, 1.001 - Math.pow(2, -10 * t)) | The easing function to use for the scroll animation, our default is custom but you can pick one from Easings.net. | | scrollInfinite | boolean | false | Enable infinite scrolling. | | scrollTouchMultiplier | number | 2 | Multiply touch action to scroll faster than finger movement. | | scrollWheelMultiplier | number | 1 | Multiply wheel action to scroll faster than wheel movement. | | scrollWrapper | HTMLElement, Window | window | The element that will be used as the scroll container. |

Styles

SASS

Import the SASS file

@import "byc-animations/dist/byc-animations";

You can override the following variables (need to be done before importing the BYC-animation SASS files):

| Variable | Default | Description | | -------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------- | | $animate-easing | ease-in-out | Default transition easing value
| $animate-delay | 0s | Default delay value
| $animate-duration | 0.35s | Default transition duration value |
| $animate-opacity-duration | 0.35s | Default opacity duration value
| $animate-opacity-start | 0 | Default opacity start value
| $animate-opacity-end | 1 | Default opacity end value
| $animate-border-radius | 0 | Default border-radius value on reveal pseudo-elements | $animate-background-color | #FFFFFF | Default background-color value of reveal animation | $animate-foreground-color | #F4F4F4 | Default foreground-color value of reveal animation | $animate-reveal-delay | 0.35s | Default reveal delay value
| $animate-reveal-duration | 0.4s | Default reveal duration value
| $animate-slide-duration | 0.65s | Default slide duration value
| $animate-slide-offset | 50px | Default slide offset value
| $animate-zoom-start | .5 | Default zoom start value | | $animate-zoom-end | none | Default zoom end value |

CSS

| Variable | Default | Description | | -------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------- | | --#{$prefix}-animate-easing | ease-in-out | Default transition easing value
| --#{$prefix}-animate-delay | 0s | Default delay value
| --#{$prefix}-animate-duration | 0.35s | Default transition duration value |
| --#{$prefix}-animate-opacity-duration | 0.35s | Default opacity duration value
| --#{$prefix}-animate-opacity-start | 0 | Default opacity start value
| --#{$prefix}-animate-opacity-end | 1 | Default opacity end value
| --#{$prefix}-animate-border-radius | 0 | Default border-radius value on reveal pseudo-elements | --#{$prefix}-animate-background-color | #FFFFFF | Default background-color value of reveal animation | --#{$prefix}-animate-foreground-color | #F4F4F4 | Default foreground-color value of reveal animation | --#{$prefix}-animate-reveal-delay | 0.35s | Default reveal delay value
| --#{$prefix}-animate-reveal-duration | 0.4s | Default reveal duration value
| --#{$prefix}-animate-slide-duration | 0.65s | Default slide duration value
| --#{$prefix}-animate-slide-offset | 50px | Default slide offset value
| --#{$prefix}-animate-zoom-start | .5 | Default zoom start value | | --#{$prefix}-animate-zoom-end | none | Default zoom end value |

Markup

<div data-animate="fade">Lorem ipsum</div>
<p data-animate="slide" data-animate-delay=".15">Dolor sit amet consecatur</p>

Element attributes for animate-content function

| Attribute | Type | Description | | ------------------------------------ | ------------------------ | ---------------------------------------------------------------------------------------- | | data-animate | string (fade, reveal, slide, zoom) | Detect if element is in viewport. Add classes .in-view and .out-view. Applies selected animation (CSS). | | data-animate-effect | string (fade, reveal, slide, zoom) | Batch method: Detect if targeted elements are in viewport. Add classes .in-view and .out-view. Applies selected animation (CSS). | | data-animate-batch | string | (Optional) Batch method: Use on wrapper elements and specify which children's class to target. It will apply the desired data-attributes on those. | | data-animate-repeat | boolean | (Optional) Allow to repeat animation every time element enters viewport | | data-animate-start | string | (Optional) Override default start position. First value represents the part of the trigger which will initiate the animation once it meets the second value. The second value represents a location in the viewport. Ex: top center | | data-animate-end | string | (Optional) Override default end position. First value represents the part of the trigger which will trigger the animation once it meets the second value. The second value represents a location in the viewport. Ex: center 20% | | data-animate-trigger | string | (Optional) Override default trigger element. Ex: #page-title | | data-animate-easing | string | (Optional) Override default easing. Ex: ease-out or cubic-bezier(0.550, 0.055, 0.675, 0.190) | | data-animate-delay | number | (Optional) Set transition-delay on element. Value in seconds.
| data-animate-duration | number | (Optional) Override default transition duration CSS property. Value in seconds. | | data-animate-opacity-duration | number | (Optional) Override default transition duration CSS property of opacity. Value in seconds. | | data-animate-opacity-start | number | (Optional) Override default opacity CSS property at the beginning of the animation. Value from 0.0 - 1.0 | | data-animate-opacity-end | number | (Optional) Override default opacity CSS property at the end of the animation. Value from 0.0 - 1.0 | | data-animate-border-radius | string | (Optional) Specific to reveal animations, border-radius value in any unit (px, %, rem, em) | | data-animate-background | string | (Optional) Specific to reveal animations, background-color of the ::before pseudo-element | | data-animate-foreground | string | (Optional) Specific to reveal animations, background-color of the ::after pseudo-element | | data-animate-reveal-delay | number | (Optional) Specific to reveal animations, delay transition between the background and foreground pseudo-elements. Value in seconds. | | data-animate-reveal-duration | number | (Optional) Specific to reveal animations, override default transition duration of background and foreground animations. Value in seconds. | | data-animate-slide-duration | number | (Optional) Override default transition duration CSS property of translateY. Value in seconds. | | | data-animate-slide-offset | string | (Optional) Override default translateY value for "slide" transition. Can be in px or % | | data-animate-zoom-start | number | (Optional) Override default scale CSS property at the beginning of the animation. Value is a number or a percentage | | data-animate-zoom-end | number | (Optional) Override default scale CSS property at the end of the animation. Value is a number or a percentage |

Element attributes for parallax function

| Attribute | Type | Description | | ---------------------------- | ------------------------ | ---------------------------------------------------------------------------------------- | | data-parallax-from | string | Define the starting values to animate "from". Ex: { "opacity": "1", "translateY": "0" }| | data-parallax-to | string | Define the end values to animate "to". Ex: { "opacity": "0.25", "translateY": "-350px" } | | data-parallax-start | string | (Optional) Override default start position. First value represents the part of the trigger which will initiate the animation once it meets the second value. The second value represents a location in the viewport. Ex: top center | | data-parallax-end | string | (Optional) Override default end position. First value represents the part of the trigger which will trigger the animation once it meets the second value. The second value represents a location in the viewport. Ex: center 20% | | data-parallax-scrub | boolean, number | (Optional) Boolean: if true, links the animation's progress directly to the ScrollTrigger's progress. Number: The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. | | data-parallax-trigger | string | (Optional) Override default trigger element. Ex: #page-title |

Instance methods

| Method | Description | Arguments | | ---------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | destroy(animate, scroll) | Destroys the scroll events. | animate (boolean): Destroy all scroll triggers, true by default.scroll (boolean): Destroy lenis scroll, true by default. | | refresh() | Recalculates the positioning of all of the ScrollTriggers on the page; this typically happens automatically when the window/scroller resizes but you can force it by calling .refresh() | | | scrollTo(target, options) | Scroll to target. | target: goal to reach number: value to scroll in pixelsstring: CSS selector or keyword (top, left, start, bottom, right, end)HTMLElement: DOM element target: goal to reach offset (number): equivalent to scroll-padding-toplerp (number): animation lerp intensityduration (number): animation duration (in seconds)easing (function): animation easingimmediate (boolean): ignore duration, easing and lerplock (boolean): whether or not to prevent the user from scrolling until the target is reachedforce (boolean): reach target even if instance is stoppedonComplete (function): called when the target is reached | | start() | Resumes the scroll | | | stop() | Pauses the scroll | |