Blog
Monday January 18, 2021 By Dave
Create Beautiful Scrolling Animations With the CSS Clip-Path Property


In a previous tutorial, we realized find out how to create a grayscale-to-color impact on scroll. To implement it, we took benefit of contemporary front-end options like CSS Grid, the clip-path property, and the Intersection Observer API.

At the moment, we’ll use these instruments and the information gained from that tutorial to construct one other cool scroll impact. As we scroll, web page components will sequentially seem with a slide animation. It is a frequent scroll impact that you just would possibly see on portfolio web sites.

What We’ll be Constructing

With out additional intro, let’s take a look at what we’ll be constructing:

Notice: Make sure you learn the aforementioned tutorial as we’ll seize some code snippets from it.

1. Start With the HTML Markup

We’ll begin with a wrapper part factor that may include nested parts. Every sub-section may have one of many following three doable layouts:

  • A picture on the left, textual content on the fitting.
  • Large textual content on the fitting.
  • Textual content on the left, the picture on the fitting.

Right here’s a visible illustration of those layouts:

The grid layouts

It’s value noting that for all layouts, we’re going to make use of the identical Pixabay picture. You would possibly keep in mind that we’ve already used it in one other scroll tutorial.

The required markup:

2. Outline the Types

Developing subsequent, we’ll write down an important features of our kinds. For this demonstration, we received’t focus on the reset guidelines as they aren’t something essential. So, straight to the purpose:

  • We’ll outline the grid, grid-alternate, and big-text courses to seize the totally different layouts. The primary two reap the benefits of CSS Grid, whereas the final one units a most width with margin-left: auto.
  • Simply to observe with a brand new CSS perform, we’ll use clamp() to create fluid typography.
  • Every determine factor may have a completely positioned ::earlier than pseudo-element. That factor will act as a picture overlay and be animated first.
  • All animated components will initially be hidden because of the clip-path property. Once more, to essentially perceive how this property works, take a look at this tutorial.
  • To chain the animations, we’ll cross applicable values to the transition-delay property of every factor. Be happy to make them dynamic by utilizing CSS variables.
  • On screens as much as 1000px huge, all components will likely be stacked. Moreover, on picture sections, the picture will at all times come earlier than the textual content.

Listed here are the corresponding kinds based mostly on these assumptions:

3. Animate on Scroll

As we scroll, we’ll animate solely the picture sections (i.e. those who have the grid class). Extra particularly, we’ll animate the next components with this order:

  • The ::earlier than pseudo-element of the determine factor (the one with the darkish background).
  • The picture.
  • The picture caption.
The sequential animations

When a minimum of 50% of every determine factor enters the viewport, it’ll obtain the is-animated class. In any other case, it’ll lose this class and develop into hidden.

So when the half a part of a determine is throughout the viewport, the related little one components will seem sequentially from totally different instructions. First, the ::earlier than pseudo-element will seem from the fitting, then the picture from the left, and eventually its caption from the fitting.

The JavaScript code that we’re going to want is taken from the grayscale-to-color impact tutorial. We simply should match totally different components:

Listed here are the related CSS guidelines that create the sequence of animations:

Notice: As a substitute of the clip-path property, we might equally have used remodel to perform the identical impact. Take a look at the third instance of this tutorial for more information.

Conclusion

That’s it, of us! At the moment we went via a method for sequentially revealing components on scroll by profiting from superb new front-end instruments. Most significantly, we constructed this impact with out utilizing any libraries.

Hopefully you’ll be capable to enrich your pages with an identical impact.

As a facet notice, earlier than deciding to make use of these options on a mission that requires assist for older browsers, test the browser assist at caniuse.com.

Right here’s a reminder of what we constructed:

If in case you have ever used the clip-path property to construct one thing useful, tell us! As at all times, thanks quite a bit for studying!



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *