Diagonal Animated Divider

A diagonal section divider that animates on scroll.

Dependencies

• Scrolling Animations

How to

The Diagonal Animated Divider is a skewed background that rotates on scroll. 

The animated background is an element in position absolute, that inherits the size of the parent, and animated using the Scrolling Animations plugin:

<section class="position-relative z-index-1">
  <!-- 👇 ... -->
  <div class="position-absolute inset-0 bg-primary z-index-1 origin-top-left scroll-fx js-scroll-fx" data-scroll-fx="skewY, -7deg, 0deg, 0%, 50%" aria-hidden="true"></div>
</section>

The starting skewY value, set in the data-scroll-fx attribute, determines the starting inclination (-7deg in the demo). Reduce the skewY value to reduce the starting inclination.

Make sure the z-index value of the animated background is lower than the one of the section content. In the demo, we use the z-index utility classes.

In the demo, we set the background color using the background utility classes. A better approach would be using CodyFrame's color themes:

<!-- 👇 apply the .bg-transparent utility class + the data-theme -->
<section class="position-relative z-index-1 bg-transparent" data-theme="primary">
  <div class="container position-relative z-index-2">
    <!-- your content -->
  </div>

  <!-- 👇 apply the .bg utility class to this element -->
  <div class="position-absolute inset-0 bg z-index-1 origin-top-left scroll-fx js-scroll-fx" data-scroll-fx="skewY, -3deg, 0deg, 0%, 50%" aria-hidden="true"></div>
</section>

Categories

• Effects > Scroll

Bug report & feedback

Component Github page ↗