[Svelte actions + GSAP]

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

 

 

[GSAP Shockingly Green install on Netlify]

Of course I have answered my own question. I added GSAP=xxxxto my machine's .zshrc file, restarted the shell, and it all worked fine. It also seemed to fix my error on Netlify, though I'm not sure how that was the solve.

[GSAP Shockingly Green install on Netlify]

I can't seem to figure out how to install GSAP's private modules on Netlify. I've followed the CI instructions as given in the dashboard and on Netlify's site. I want to avoid using the .tgz file as this is a public repository.

 

I encounter the 403 Forbidden - GET https://npm.greensock.com/@gsap%2fshockingly - bad authorization header. Please login again  error every time I try to install locally or when I push code to Netlify. My .npmrc file is as written, with an accompanying local .env file and a environment variable set-up on Netlify:

 

engine-strict=true

//npm.greensock.com/:_authToken=${GSAP}

@gsap:registry=https://npm.greensock.com/