Register gutenberg block style, in block-styles.js
wp.domReady( () => { wp.blocks.registerBlockStyle( 'core/separator', { name: 'animated-separator', label: 'Animated Separator', } ); } );
Add GSAP in gsap.js
// when separator comes into view 20% from the bottom animate width from 0 function initSeparator() { gsap.utils.toArray("hr.is-style-animated-separator").forEach(container => { gsap.from(container, { width: 0, ease: "none", scrollTrigger: { trigger: container, pin: false, scrub: 1.5, start: "top bottom", end: "top 80%", } }); }); }
Add the SCSS in _gutenberg-styles.scss
hr.wp-block-separator.is-style-animated-separator { height: 5px; background-color: $color-primary; background: linear-gradient(to left, $color_tertiary, $color_quaternary); border: none; opacity: 1; max-width: 80%; }