Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

billyZduke

ShockinglyGreen
  • Content Count

    15
  • Joined

  • Last visited

Community Reputation

1 Newbie

About billyZduke

  • Rank
    Member
  1. //npm.greensock.com/:_authToken={token} //registry.npmjs.org/:_authToken={token} @gsap:registry=https://npm.greensock.com
  2. 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... We
  3. 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),
  4. 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
  5. 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...
  6. 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...
  7. 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 (
  8. 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
  9. 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
  10. 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.
  11. 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 t
  12. 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.
  13. 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!
  14. Hello from the future. In GSAP3, FYI, neither a negative stagger value nor stagger: { from: 'end' } are doing squat for me. I still have to manually gather my group of elements into a JS array and reverse it. I am using an "each" rather than an "amount," if that makes a difference, although I don't see why it should...
  15. I tried the following, just to display the current play head time, which, in conjunction with a pause button, would at least allow me to pinpoint where exactly in the timeline I wanted to insert something... But the frequent interval calls were too much in conjunction with GSAP's attempted processing, and the timer began messing with the flow of the animation itself. I'd love to see a more effective take if anyone has any ideas... // https://overreacted.io/making-setinterval-declarative-with-react-hooks/ function useInterval(callback, delay) { const savedCallback
×