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 a section and change their position to bottom.
Assign a unique ID to that section (e.g., #myShapeDiv).
Step 2
The easiest way to add GSAP code is to use the Supa Code Block element, which is available free with the Assets4Breakdance plugin.
Select the two dependencies: GSAP and ScrollTrigger.
Step 3
Still in the Supa Code Block element, add this custom CSS and JavaScript:
#myShapeDiv .section-shape-divider svg {
transform-origin:bottom;
will-change: transform;
}
transform-origin:bottom;
will-change: transform;
}
gsap.to("#myShapeDiv .section-shape-divider svg", {
scrollTrigger: {
trigger: "#myShapeDiv",
scrub: 1,
start: "bottom bottom",
end: "bottom center"
},
scaleY:0,
});
scrollTrigger: {
trigger: "#myShapeDiv",
scrub: 1,
start: "bottom bottom",
end: "bottom center"
},
scaleY:0,
});
