Svelte actions + GSAP

[sawyerclick 3 Likes (Newbie)]

Hey, folks! My team over at The DataFace has this nifty Svelte action powered by GSAP that we've been using for the past few projects. It blends a few approaches that we've seen in the forums. I thought we'd share the wealth with a few key examples in this repl. We have a more complex version that handles timeline positioning that I can share once it's refined.

 

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger);

export default (node, { type, children, scrollTrigger, ...args }) => {
	let targets = children ? node.children : node;
	let timelineArgs = scrollTrigger ? { scrollTrigger: { trigger: node, start: 'top center', ...scrollTrigger } } : {};
	let timeline = gsap.timeline(timelineArgs)[type](targets, { ease: 'power2.out', overwrite: true, ...args });

	return {
		update(params) {
			timeline.duration(params.duration);
		},
		destroy() {
			timeline.killTweensOf(targets);
		}
	}
};

 

 

[GreenSock 18,255 Likes (Superhero)]

Thanks for sharing, @sawyerclick!

[wojg 0 Likes (Newbie)]

This is great, thank you...just in time for a new project. Please share the complex version when/if you can!