Lenis
Lenis is an open-source library built to standardize scroll experiences developed by Studio Freight. Lenis is built-in the BYC animations library.
See instance methodsSmooth scroll
Scroll to
[data-animate]
The AnimateContent javascript class is responsible for facilitating animations on HTML elements by utilizing the GreenSock Animation Platform (gsap) and the ScrollTrigger library. It offers a structured approach to animate elements on a webpage based on specific data attributes assigned to them.
The default CSS properties generated by those data-attributes are personalizable through CSS or SASS variables. Those properties are also adjustable to specific elements by using data-attributes.
There are two ways to use the AnimateContent function. Either by specifiying your data-attributes to a specific element or by applying those to a wrapper element to apply the same animation to his children. See slide example below.
Slide animations
Use data-animate="slide" to apply a translateY and an opacity transition to an element. Adjust the translateY through CSS / SASS variables or with data-animate-slide-offset. Adjust the timing with data-animate-slide-duration.
Applying data-attributes to specific elements:
Applying data-attributes to a wrapper:
Fade animations
Use data-animate="fade" to apply an opacity transition to an element. Use data-animate-opacity-start, data-animate-opacity-end and data-animate-opacity-duration to adjust the fade animation of a specific element.
Zoom animations
Use data-animate="zoom" to apply a transform: scale() transition to an element. By default the animation start with opacity: 0; but like the example here you can use data-animate-opacity-start="1" to remove this effect.
Reveal animations
Use data-animate="reveal" to apply a reveal animation. This animation creates pseudo-elements to apply a background and a foreground color over an element. Use data-animate-background and data-animate-foreground to change the default colors. Use data-animate-reveal-delay and data-animate-reveal-duration to adjust the timing. Change the direction of the reveal animation with the attribute data-animate-reveal-translate-y.
[data-parallax]
The Parallax javascript class is responsible for creating animations on HTML elements based on the GreenSock Animation Platform (gsap) and the ScrollTrigger library. We achieve smooth animations using the gsap fromTo function. Customization of those animations are allowed by specifying data attributes on elements. This function allows a diverse types of animation, but the most notable is the Parallax Effect.
Parallax markers (per-element)
Add data-parallax-markers to enable markers for a specific element regardless of the global setting.