billyZduke

GreenSock | Docs | Plugins | InertiaPlugin | static.getVelocity()

Might want to add this info to the InertiaPlugin docs, as they currently contain only the "bad" example.

//npm.greensock.com/:_authToken={token} //registry.npmjs.org/:_authToken={token} @gsap:registry=https://npm.greensock.com

FYI, I am currently experiencing this exact issue: the need to import and register CSSPlugin using React/Gatsby and GSAP 3.6.1 (w/ Shockingly Green bonuses). I've been trying on and off for some time now to rewrite the Makisu jQuery plugin as a React component, and today have been getting tons of errors that "rotateX" was not a valid property, until I explicitly imported CSSPlugin and registered it. No idea why, but the issue only occurs for me in this component, I have plenty of other elements being tweened via gsap using rotateX that are still working fine in other contexts... Weird. EDIT: Having gotten it closest to working yet, I made a codesandbox here: objective-hamilton-c8hpc - CodeSandbox. The question now is why I can't get the section unrolling animations to overlap, either by using delay or by inserting at specific times...

This fix worked for MorphSVGPlugin, but now I'm getting a similar error for the gsap core: Cannot read property 'querySelectorAll' of undefined 624 | }, 625 | //takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects. > 626 | toArray = function toArray(value, leaveStrings) { | ^ 627 | return _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call(_doc.querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : []; 628 | }, 629 | shuffle = function shuffle(a) { EDIT: I think I got it, just made sure all gsap calls to element selectors are occurring within useEffect or inside (typeof window !== 'undefined') if blocks. Gatsby's SSR is still behaving super inconsistently, but that's their problem, not yours...

I deleted the entire node_modules folder and both lockfiles before running yarn and npm install commands... it doesn't seem that any other versions of gsap should have survived that... In poking around further, I noticed you now offer methods to download the private packages from npm.greensock.com, which I did get to work with yarn (following directions in another thread), but not with npm (which I still apparently need because Netlify is unavoidably using npm ci at some point during the build process). This is where I'm at now, with .npmrc set up with my token, trying to run npm i: 403 Forbidden - GET https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.6.1.tgz - You must be logged in to install/publish packages. npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy, or npm ERR! 403 on a server you do not have access to.

Having similar issue attempting Netlify deploy... npm ERR! Invalid: lock file's gsap@3.6.0 does not satisfy gsap@file:src/assets/gsap/bonus.tgz Changed that tarball file name, moved it inside src, prefixed with "file:", made sure it isn't .gitignored, still getting the above. Using yarn in general, but Netlify seems to want a package-lock.json no matter what, so I'm also running npm i just to get that... I'm hoping this doesn't mean I need to manually edit the lock file...

When I first tried integrating gsap into my react project, I gave this a shot: https://github.com/bitworking/react-gsap It claims to function with styled-components, but it doesn't, really, or at least didn't for me, I had to wrap my styled components in plain HTML ones to get this to work. That alone made it too much of a pain to continue working with...

Personally, I've found that using regular CSS selectors with gsap in React (also using Gatsby over here) is a hell of a lot easier than messing with refs. You still need to include all the to's and set's and such inside of useEffect hooks (otherwise no elements would have been rendered yet to select), but I have yet to encounter a case where refs worked where selectors didn't... Also wondering about the difference between the following two methods, if any: const Component = () => { let ref = null return ( <div ref={ e => (ref = e) } /> ) } const Component = () => { const ref = useRef(null) return ( <div ref={ ref } /> ) }

Is there a way to make this work in React with the functional component useEffect hook? I tried just putting the above block of code into the hook, but no dice... I get TypeError: Cannot read property 'createElementNS' of undefined

As the forums have helped me out numerous times this week, I figured I'd share a little "minimal demo" somewhat similar to the one in this thread: a small piece of what I've been working on. I know you guys prefer codepen, but codesandbox lets you use multiple files, so that's where I put it. The web panel on the right will seem blank until you mouse over it, then the magic happens. Both position and blur of the elements are being animated relative to the mouse position using gsap.ticker.add(). (Lots of seemingly elaborate math in there, but that's mostly just formulas pulled from elsewhere on the web, relating to calculating the sizes and arrangement of circles...) https://codesandbox.io/s/romantic-cohen-27o1c

I had overwrite set to 'auto', when I set it to true the wonkiness goes way up, it doesn't even appear to be playing anymore. No, wait... true may have done it. I've also got it initially paused and played by scrolltrigger, and I think that was where the additional wonkiness was coming from.

I'm having what I think may be a similar problem, perhaps you can weigh in... I will try to get a minimal codepen ready for you, the problem is that my timeline is several thousand lines long, lives in React, and incorporates dozens of image assets. The timeline is basically just an extended linear animation, a banner ad, per se, that is 135 seconds long, no user interaction is necessary (although it would be nice to allow for pause and repeat buttons, but I'll worry about those later). All I want it to do is to play through and repeat from the beginning, but on any iteration but the first, things are messed up and do not behave the same as they do the first time through. I noticed in particular that any tween set to repeat -1 would not be firing on the repeat playthroughs, so I went through and calculated exactly how many repeats I'd need of each of those and explicitly set them, but this didn't seem to consistently apply the desired effect to every single case. It seems like I shouldn't have to do anything special to make this happen, the documentation seems to indicate that repeating a timeline without change should be the default behavior. If I try invalidating the timeline on repeat, that helps the repeater tweens but screws up the initial positioning of a bunch of other elements. The behaviors seem so random and unpredictable that I've tried just recording a screen capture of the entire animation to use in place of the actual GSAP timeline, but the video quality just isn't as sharp as the original.

Gahh. Well, it was a React issue... The things I was trying to move are components, and though I was putting the className on them, INSIDE the component it was not passing that className to the actual HTML element getting rendered. My bad.

I recreated your pen, yeah, negative works AND from: 'end' work. Unfortunately, it would be difficult to extract a minimal demo from what I'm working on right now (with a timeline that's almost 2,000 lines of JS at this point). If it makes a difference, I am working in React, using Gatsby, and have the timeline set up in a useEffect hook... I will try some more things and get back to you, thanks for the prompt response!