GSAP animated Separator

	wp.blocks.registerBlockStyle( 
		'core/separator', {
			name: 'blues-box',
			label: 'Blue',
		}
	);

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();
});

// 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;
}