GSAP animated separator

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

Search the site


Address

123 Main Street
Town
City
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899

Email: ben@gomopress.com


Copyright 2023. Blah blah blah Company Limited