Jump to content


Svelte actions + GSAP

Recommended Posts

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'


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) {
		destroy() {



  • Like 1
  • Thanks 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.