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)
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,
});
scrollTrigger: {
trigger: "#shapediv",
scrub: 1,
start: "bottom bottom",
end: "bottom center"
},
height: 0,
});
Step 3
There is no step 3!