sawyerclick

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

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.

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/