You can create scroll-bound animations from scratch, but if you're doing something complex it's likely that you'll want to use a library to create them. An example of a library that uses requestAnimationFrame to power scroll animations is Lax.js. Used in combination with window.scrollTop.
#Css animations update#
requestAnimationFrame: Can be used as a generally more performant alternative to the scroll event to update elements before browser repaints.
An example of a library that uses the scroll event to power scroll animations is ScrollMagic. Used for scroll-triggered animations and scroll-bound animations to update the page.
Scroll event: the scroll event fires each time a user scrolls the page.Scroll-bound animations can be powered by a few different technologies: Scroll-bound animations are almost always made using JavaScript. This means that the user can control the speed of a scroll-bound animation by changing the speed at which they scroll, but they cannot change the speed of a scroll-triggered animation because it is a predetermined length of time. A scroll-triggered animation may be 2 seconds long and a scroll-bound animation might be 200px long. The duration of a scroll-triggered animation is a length of time, whereas the duration of a scroll-bound animation is a distance. The further the square moves, the more it is scaled up. The example below uses ScrollMagic, a scroll animation library, to keep track of the distance that the square has been scrolled. The scroll position acts as a timeline for the animation: the faster the user scrolls, the faster the animation executes. The progress of the animation is determined by how far the user scrolls. Scroll-bound animationsĪ scroll-bound animation is an animation that is directly bound to the scroll position. I wrote a guide to the top 10 scroll-triggered animation libraries that you can check out to help. If you want to create scroll-triggered animations using a library, it's important to pick the right one for your needs. Scroll-triggered animation libraries are not all the same: they can use a variety of technologies and offer different features. There are lots of options for this, including Sal.js, AOS, and Josh.js. You can also use a scroll animation library to use JavaScript to add and remove classes to elements when they are scrolled into view. It's recommended to use CSS for scroll-triggered animations, but you can also create the animation using JavaScript. When the element enters the viewport, a CSS transition or animation is triggered by adding a class to the element with JavaScript. The JavaScript is used to track the position of an element and trigger the animation.
#Css animations how to#
If that's what you want to create, check out this post: How to trigger a CSS animation on scroll. Scroll-triggered animations are created using a combination of CSS and JavaScript or in some cases JavaScript only.
0 kommentar(er)
