Animated Shape Dividers on Scroll

With a few lines of code, magically done with GSAP , we can easily animate the shape dividers, which can make a pretty cool effect, especially for a hero section.

This is a section
with a Shape Divider

and this is a section
without Shape Divider

Step 1

Add one or several shape dividers to one of your section and change their position to bottom.
Add a unique ID to that section (ex : #shapedivsection)

Shape Divider Item settings

Step 2

Add this Javascript code. As it needs GSAP, the best and easiest way is to use the GSAP Block element, which is available with the Assets4Breakdance plugin.

gsap.to("#shapedivsection .section-shape-divider svg", {
scrollTrigger: {
trigger: "#shapediv",
scrub: 1,
start: "bottom bottom",
end: "bottom center"
},
height: 0,
});

Step 3

There is no step 3!