setup the Separator Style in block-styles.js
wp.blocks.registerBlockStyle( 'core/separator', { name: 'blues-box', label: 'Blue', } );
setup the gsap
function initSeparator() { gsap.utils.toArray("hr.is-style-blues-box").forEach(container => { gsap.from(container, { width: 0, ease: "none", scrollTrigger: { trigger: container, pin: false, // markers: true, scrub: 1.5, start: "top bottom", end: "top 80%", } }); }); } window.addEventListener('load', function(){ initSeparator(); });
Add the SCSS
// fix the default width from 100px hr.wp-block-separator.is-style-blues-box:not(.is-style-wide):not(.is-style-dots) { width: 100%; } hr.wp-block-separator.is-style-blues-box { height: 5px; background-color: $color-primary; background: linear-gradient(to left, $color_tertiary, $color_quaternary); border: none; opacity: 1; max-width: $max-width-default; }