Motion Section

Motion Section is a nestable section that also contains a Content element. All your elements have to be put inside this Content element. SVG edges hang outside the section and morph with scroll velocity. Match the edge color to the background of the adjacent section(s).
HTML tag: HTML tag of the element.
Custom tag: used when HTML tag is set to custom.

Width: width of the section.
Height: height of the section.
Background: background of the section.
Color: text color of the Content element.

Color: fill of the SVG edges. Match this fill to the background of the adjacent section(s).
Height: height of each edge.
Position: which edges are drawn: top & bottom, bottom or top.

Velocity threshold: scroll speeds below this value are ignored.
Velocity max: scroll speed that maps to the maximum bend.
Bend: how far the edge dips or rises from the flat line.
Morph duration: duration of the edge morphing with scroll.
Spring duration: duration of the spring back to the flat line.
Spring: how snappy the spring is when the edge returns.
Disable in the Builder: if enabled, the animation will be disabled at the builder.

Motion Section uses ScrollTrigger Library to know when the section is in view so the edges can react to scroll velocity. Learn more about ScrollTrigger here.
Start: determines when the section becomes active. “top bottom” means when the top of the section hits the bottom of the viewport.
End: determines when the section stops being active. “bottom top” means when the bottom of the section hits the top of the viewport.

– Tamu