Have a project in your mind? Let’s Communicate.
Get expert estimation
Get expert estimation
Whether you are a seasoned web developer or just starting out on this IT journey, scroll animations are a valuable tool to have in your skill set. They can add a touch of life and interactivity to the website you create, which will be a great bonus in the eyes of your client and their audience. And today we’d like to share with you some insights on their implementation.
This article, along with its twin sister, is a good place to begin or continue mastering the art of animations. To inspire and guide you, we will showcase a variety of examples of our work, with step-by-step explanations of the code behind them.
While some technical knowledge may be helpful to fully understand this guide, we welcome readers of all backgrounds to explore the information our team has prepared below. So, regardless of your coding experience, we hope to share valuable insights with you. Who knows, perhaps this article will motivate you to start your own journey in web development.
When you put an element on a webpage, it’s not exactly a big deal, right? But when you add an animation effect that brings this element to life, as if an invisible hand is drawing it, many perceive it as some sort of digital magic.
Whatever elements you want to animate — artwork, illustration, or shape — you can always represent it using SVG, just like in this example:
In the code below, the stroke-dasharray property is used to create an SVG contour and is equal to the path length. The stroke-dashoffset property shifts the SVG contour by the path length. The combination of these two properties results in SVG not being drawn.
The anim element is responsible for drawing the SVG image. The 3s specified in the animation properties determine the duration of the animation, ease-in-out is a function that provides the animation’s smooth playback, the alternate value indicates that the animation changes direction in each cycle, and the infinite value corresponds to an infinite animation.
That’s how the animation code looks like:
In this code snippet, we change the value of the stroke-dashoffset animation contour shift from the path length when SVG is not drawn at all to zero and when SVG is drawn completely.
The one-screen scroll animation is an interactive effect that allows you to animate an SVG drawing based on mouse wheel scrolling. This animation occurs within a single screen or viewport, without affecting the scroll behavior of the entire page. Here’s how this looks in the code:
The event.deltaY variable allows us to track the scrolling of the mouse wheel.
Event.deltaY values greater than zero correspond to the page scrolling down.
Event.deltaY values less than zero correspond to the page scrolling up.
Let’s create the drawSvg function, which will be executed when the mouse wheel is scrolled.
In this function, the deltaY variable contains the value of each mouse wheel scroll, the wheelLength variable contains the total scroll length, and the drawLength variable contains the length of the drawn part of the image’s path. Now, let’s transfer the resulting drawLength value to CSS styles:
The if...else conditions in the drawSvg function indicate that the path element of the SVG image is drawn or erased until the image is completely drawn or completely erased from the page. After that, image drawing and changing the value of the wheel variable stops until the direction of scrolling of the mouse wheel changes.
The drawSvg function is executed when the mouse wheel is scrolled, and for this, we track the wheel event:
Scroll-bound animations are great for creating parallax effects. This enables different elements to link an element’s position to the page’s height, scroll at different speeds, create a 3D effect, and bring a touch of depth and life to your project.
Now let’s take a look at the next example — here, the SVG image looks almost the same as the previous one, but the code responsible for drawing this animation is completely different:
Pay attention to the change in CSS styles — we specify the page height equal to 200vh, whereas for the previous animation, the page height was 100vh. This is necessary in order to ensure that the page scrolls in the browser window, as this animation will not be played without scrolling the page.
In the drawSvg function, we need to initialize the following variables:
Now, we have to use the obtained values to calculate the percentage by which the element was scrolled:
The next step is to calculate the length of the drawn path part of the SVG image and pass it to the stroke-dashoffset CSS property:
The drawSvg function is executed when the page is scrolled, for this we need to track the scroll event:
Scroll-triggered SVG drawing animation refers to a dynamic visual effect that is activated when the user scrolls to a specific section of a webpage. It involves using SVG to create and animate graphical elements such as lines, shapes, and paths.
To better illustrate how this animation works, we added two additional sections to the project, which are placed above and below the section with the animation:
The smooth scrolling of the sections is achieved by implementing several CSS properties, including overflow-y with the scroll value,scroll-snap-type value for the container and scroll-snap-align for the sections — and don’t forget to specify the height of the container and sections. Another useful property of the html element is scroll-behavior with the smooth value, which allows for smoother scrolling.
CSS properties mentioned above are not directly relevant to the drawing of an SVG image during scrolling. They, however, enable a smoother and more user-friendly scrolling experience by dividing the page into sections, which positively impacts the user experience.
To incorporate the SVG image into the CSS code of the project, we will append the draw class that animates the SVG drawing from the basic example.
Adding the draw class to the path element will display the SVG contour; removing the draw class will respectively hide this contour. The key to adding and removing the draw class to the path element at the appropriate times is to constantly monitor the section’s visibility zone. When the section with the image becomes visible, we need the draw class added to the path element. Conversely, when the section is no longer visible, we need to remove the draw class.
The Intersection Observer API allows you to notify the application that an element has appeared in the visibility zone. One major advantage of this approach is that it reduces the computational load on the browser by minimizing the need for additional calculations as compared to monitoring the scroll event.
The Intersection Observer API provides numerous useful capabilities, including deferred image loading, infinite page scrolling, ad visibility tracking, and the ability to activate modifications such as animations when the elements enter the user’s viewport.
Here’s the code we used for Intersection Observer in our example:
In our Intersection Observer code, the options parameters indicate that the observer will be activated when the monitored element is at least half visible on the screen and remains within the viewport.
The drawSvg function is executed when the observer is triggered, specifically when an element appears or disappears from the viewport. In the penultimate line of code, the IntersectionObserver constructor is accessed, and both the options and drawSvg function are passed to it. Finally, in the last line, the IntersectionObserver is instructed to monitor the designated element.
Now that we’ve covered the general principles of creating scroll animations, how about we dig deeper into more complex and challenging cases?
You already know how to handle basic animations’ code, so we invite you to take it to the next level. Let’s discuss how to execute vertical skew sliders, parallax, and scroll-triggered animations.
The first challenging example in our to-learn list is a vertical skew slider that activates on scroll.
Each slide consists of two parts — text and image. When scrolling the slider, these parts move in different directions at an angle relative to each other.
The vertical skew slider brings content to life as it activates on scroll, captivating users with its smooth movements.
Take a glance at how great this interactive element looks and how easily you can create an animation triggered with the mouse wheel scroll:
In the first lines of code, we declare constants:
We declare the activeSlideIndex variable and assign it a value of 0. This means that the first slide will be displayed by default.
The moveToSlide function changes the active slide number depending on the value passed in the swap parameter. This parameter can take one of two values: +1 when scrolling the mouse wheel down, or -1 when scrolling the mouse wheel up.
Now we determine the index of the currently active slide by finding the remainder of a division operation. This approach ensures that the slide movement loops back to the beginning after reaching the end of the sequence, creating a cyclic effect. Also, we should add scrolling active class to the active slide.
While the active slide is being moved, we apply the slider-locked class to the sliderContainer element. If sliderContainer already has the slider-locked class, the moveToSlide function will not execute and will instead return. This prevents the slides from being scrolled while the active slide is being moved.
The onTransitionEnd function removes the slider-locked class from sliderContainer when the animation is complete.
The function onScroll is called when the mouse wheel is scrolled. Here, it is highly important to avoid triggering the default action. At first, using the Math.sign() method, we normalize the value of deltaY to read only the direction of scrolling, and pass it as an argument. Then, we should update the active slide through the moveToSlide function.
Now we have to add the wheel event handler to the document to track mouse wheel scrolling and call the onScroll function. The transitionend event handler is included in the sliderContainer to call the onTransitionEnd function when the animation is finished.
As a result, we will get the endlessly repeating slider that seamlessly transitions between slides as the user scrolls the mouse wheel.
Scroll-based animations are great for creating parallax effects.
Linking an element’s position to the page’s scroll height provides precise control over its properties based on the scroll height itself. In addition, it allows for scrolling various elements at different speeds, creating a 3D effect that can add dimension to any web page.
With scroll-bound animations, the scrolling experience becomes an immersive adventure, as visuals respond to your every move, creating a sense of dynamism.
To give you a better coding picture, here’s a CodePen example of the parallax effect:
The handleScroll function receives the root element :root from CSS and assigns the value of the page scroll height to the scrollTop variable.
This function is called during page scrolling, which updates the value of the scrollTop variable.
To optimize performance when calling the scrollTop function during scrolling, we can use the requestAnimationFrame method, which allows a specific function to be executed only when a browser is ready to draw the next frame. This approach can help reduce CPU load, improve browser performance, and increase scrolling smoothness.
Now, let’s check the value of the scrollTop variable used in the CSS code to shift parallax layers vertically.
Different parallax layers use different coefficients, so their displacement speeds will not be the same. The coefficients are arbitrary, but the general principle when selecting them is that more distant layers and elements move slower, while the ones closer to us move faster, creating an impression of a voluminous space.
Image effects on scroll is a type of scroll-triggered animation where images on a webpage change or transform as the user scrolls past them. This can be achieved using a variety of techniques, such as changing the image color, size, opacity, or position, adding special effects like zooming, rotating, blurring, or transitioning between different images.
Scroll-triggered animations bring a new level of interactivity to the digital landscape, where static images come alive, revealing every tiny hidden detail.
By using different tools, such as Intersection Observer, we can always determine when an element or section appears within the user’s viewport and attach any animation to that moment. Doing so will help us catch the user’s eye, making the web page more engaging and memorable to use.
In the example below, two animations are triggered when the section with the image appears on the screen: the black & white image transforms and becomes colorful.
To give you a better picture, here’s an example with parallax effect:
In this case, we should first find the target element on the page — all sections with the section class:
After, we need to indicate that the animation will start playing when the section is scrolled on the screen at least halfway:
Furthermore, you should note that Intersection Observer always considers the direction of scrolling. This does not affect threshold = 0.5; though, as half remains half regardless of the scrolling direction. But if the animation should start when the section has just appeared on the screen, we need to determine in which direction the user is scrolling the page. Fortunately, Intersection Observer can take care of these calculations.
The setAnim function takes the entries array of objects, each representing information about the element that intersects the viewport boundary, and the observer object.
The forEach() method is used inside the setAnim function to iterate through all the objects in the entries array. For each entry object in the array, the target method is called, which returns the DOM element associated with the entry objects.
Then, we’ll create a new instance of IntersectionObserver, passing the setAnim function and the threshold value to it, and observe each section in the targets array that we passed.
This way, IntersectionObserver tracks the intersection of elements with the visible area (viewport) on the page.
The for...of loop is used to call the observe() method for each target element in the targets array. This registers each element for observation and will trigger the setAnim function when the element intersects the visibility threshold (intersection).
Then, if the value of the isIntersecting property of the entry object is true, the function adds the anim class to the element using the classList.add() method. If the value of the isIntersecting property is false, the function removes the anim class from the element using the classList.remove() method.
We can add various animations to sections with the anim class and any nested elements. Also, whenever possible, it’s better to add animations using CSS as it optimizes their playback and improves code execution performance.
To animate the transformation of an image from black and white to color, we will use CSS filters. And to gradually add color to the image, we need to add an absolutely positioned pseudo-element ::after to the block with the colored image. It has the exact same size and image but with the filter: grayscale(1); property applied to it, which makes the image appear in black and white. During the animation, we change the height of the pseudo-element from 100% to 0, revealing the original colored image behind it.
To transform elements, we use properties such as perspective, rotate, translate3d, skew, scale, and others.
Animations are everywhere nowadays and there’s a good reason for that. Many users and site owners appreciate them, as these visual effects can improve usability, increase conversion rates, and create a “wow” effect.
But implementation of any animation type, be it scroll-triggered, or a vertical skew slider, requires lots of experience and a sharp eye for detail. So we advise you to constantly improve your skills, gaining knowledge and inspiration from different sources, like dev-related articles or projects on Awwwards, Dribbble, Behance, and Webflow.
And, of course, don’t forget to share this text with your developer friends! See you in the next article — have a nice day and a clean code :)