web_roll

Thanks. Yeah thought so, just wasn't sure why it was documented to kill the ScrollTriggers specifically. I understand that they create fresh triggers on a re-render but I thought it might just be better to kill the whole thing!

Everything working like a charm. Just not 100% on whether an animation.kill() kills the scrolltrigger or do I need to kill the animation & then the scrolltrigger? useEffect(() => { gsap.registerPlugin(ScrollTrigger) const animation = gsap.fromTo( ref.current, { opacity: 0 }, { scrollTrigger: { trigger: ref.current, start: "top center", end: "bottom center", scrub: true, toggleActions: "restart none none none" }, opacity: 1, ease: "power3.inOut" } ) return () => { animation.kill() // <--- does this kill the scrolltrigger? animation.scrollTrigger.kill() // <--- or do I need to kill here too? } }, [])

Right on @akapowl, must have missed that thread. Thanks for the help, outstanding support on these forums

Hey, Hoping someone can help with this... Got a couple of animations going on, I need the DrawSVG lines to pretty much stick with the middle of the page. This is probably really simple, but for the life of me can't work out why it's running ahead. I'm getting the widths of each item, then starting and ending a Scrolltrigger. I know it doesn't need it's own timeline, but I've got some other stuff going on in there so it's needed in my project.

Thanks a lot @Rodrigo and everyone else for you time. I took that approach (but not as simple & well written as yours) to start off with but then like you say, wanted to try mount and unmount with an animation as it seemed the more React way of doing it. I'll have a go at doing it next week & report back if I manage to get it working.

Me neither. I just started out with React a couple of months ago, I've been putting it off for too long! Thanks for the side notes, I've made those adjustments to the above pen. Had a lightbulb moment after reading what you wrote, but then just failed miserably ? Here is another pen with several comments throughout - https://codepen.io/web_roll/pen/qBqqYvJ - I have tried to implement what you suggested. I'll also come back to it later. Thanks for your help so far.

Hey, I've been working on getting your Flip plugin working for me in a React project. I'm almost there, just wondering about a couple of things: 1. Does anyone know how to animate in and out rather than just the objects that are already in the DOM? I'm fairly new to React & have used React Transition Group with something else before, I think that might work but wondering if there is something obvious here I'm missing with the state. 2. I've commented out a couple of lines where I createRef and attach it to each item. Ideally I'd rather reference each item like this rather than Flip.getState(".item") ... It seems the more "React" way of doing it. Does anyone know if this is possible? Apologies if this is a more React question than Gsap, feel free to send me on my way if I'm asking in the wrong place

@oscarsidebo maybe this will help - https://codepen.io/web_roll/pen/NWbWWdz

Thanks @ZachSaucier for sticking with me on this. It works with both versions of yarn when installing like this. Useful to know for future as I'm guessing that's how you use scope on some private packages with Yarn. I'm sure I tried it like that, but whatever it's working & I can sleep well tonight now. ?

Apologies in advance for the lengthy post but here are some steps I just took in my attempts to get it working as per what worked for you @ZachSaucier. I'm completely stumped as to how you got it working after trying again today. Initialised yarn in a new folder using yarn v1.22.10 tomwebroll@Toms-iMac sites % mkdir test && cd test tomwebroll@Toms-iMac test % yarn init yarn init v1.22.10 question name (test): question version (1.0.0): question description: question entry point (index.js): question repository url: question author: question license (MIT): question private: success Saved package.json ✨ Done in 5.25s. Created .npmrc (TOKEN is my token) tomwebroll@Toms-iMac test % vi .npmrc tomwebroll@Toms-iMac test % cat .npmrc //npm.greensock.com/:_authToken=TOKEN @gsap:registry=https://npm.greensock.com Tried to install tomwebroll@Toms-iMac test % yarn add gsap@npm:@gsap:/shockingly yarn add v1.22.10 info No lockfile found. [1/4] ? Resolving packages... error An unexpected error occurred: "https://registry.yarnpkg.com/%2fshockingly: Not found". info If you think this is a bug, please open a bug report with the information provided in "/Users/tomwebroll/Sites/test/yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. Above didn't work & the URL is wrong so added a .yarnrc file to see if that would work... It didn't work but at least the registry is right now tomwebroll@Toms-iMac test % vi .yarnrc tomwebroll@Toms-iMac test % cat .yarnrc registry "https://npm.greensock.com/" tomwebroll@Toms-iMac test % yarn add gsap@npm:@gsap:/shockingly yarn add v1.22.10 info No lockfile found. [1/4] ? Resolving packages... error An unexpected error occurred: "https://npm.greensock.com/%2fshockingly: You must be logged in to install/publish packages.". info If you think this is a bug, please open a bug report with the information provided in "/Users/tomwebroll/Sites/test/yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. Then tried to install code-frame and got an error because of the registry I set in the previous step, so I removed that & it resolved to the correct registry & worked as normal tomwebroll@Toms-iMac test % yarn add code-frame //npm.greensock.com/:_authToken=TOKEN yarn add v1.22.10 info No lockfile found. [1/4] ? Resolving packages... error An unexpected error occurred: "https://npm.greensock.com/code-frame: You must be logged in to install/publish packages.". info If you think this is a bug, please open a bug report with the information provided in "/Users/tomwebroll/Sites/test/yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. tomwebroll@Toms-iMac test % rm .yarnrc tomwebroll@Toms-iMac test % yarn add code-frame yarn add v1.22.10 info No lockfile found. [1/4] ? Resolving packages... warning code-frame > left-pad@1.3.0: use String.prototype.padStart() [2/4] ? Fetching packages... [3/4] ? Linking dependencies... [4/4] ? Building fresh packages... success Saved lockfile. success Saved 2 new dependencies. info Direct dependencies └─ code-frame@5.0.0 info All dependencies ├─ code-frame@5.0.0 └─ left-pad@1.3.0 ✨ Done in 0.98s. I then tried to install Font Awesome with a different registry. First of all, I changed .nvmrc to as follows. (Tried reordering lines for gsap too - no effect) tomwebroll@Toms-iMac test % vi .npmrc tomwebroll@Toms-iMac test % cat .npmrc //npm.greensock.com/:_authToken=TOKEN @gsap:registry=https://npm.greensock.com @fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=FATOKEN And installed it which worked fine: tomwebroll@Toms-iMac test % yarn add @fortawesome/fontawesome-pro yarn add v1.22.10 [1/4] ? Resolving packages... [2/4] ? Fetching packages... [3/4] ? Linking dependencies... [4/4] ? Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ @fortawesome/fontawesome-pro@5.15.2 info All dependencies └─ @fortawesome/fontawesome-pro@5.15.2 ✨ Done in 17.05s. If your still following me... I then thought I'd try with Yarn 2 in a new folder. tomwebroll@Toms-iMac sites % mkdir testtwo && cd testtwo tomwebroll@Toms-iMac testtwo % yarn init yarn init v1.22.10 question name (testtwo): question version (1.0.0): question description: question entry point (index.js): question repository url: question author: question license (MIT): question private: success Saved package.json ✨ Done in 4.21s. tomwebroll@Toms-iMac testtwo % yarn set version berry Resolving berry to a url... Downloading https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js... Saving it into /Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs... Updating /Users/tomwebroll/Sites/testtwo/.yarnrc.yml... Done! tomwebroll@Toms-iMac testtwo % yarn --version 2.4.0 Then I copied over the same .npmrc settings from the first test tomwebroll@Toms-iMac testtwo % vi .npmrc tomwebroll@Toms-iMac testtwo % cat .npmrc //npm.greensock.com/:_authToken=TOKEN @gsap:registry=https://npm.greensock.com @fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=FATOKEN And tried to install Gsap again tomwebroll@Toms-iMac testtwo % yarn add gsap@npm:@gsap:/shockingly ➤ YN0000: ┌ Resolution step ➤ YN0001: │ Error: gsap@npm:@gsap:/shockingly isn't supported by any available resolver at n.getResolverByDescriptor (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:336683) at n.bindDescriptor (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:336048) at d (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:357409) at async Promise.all (index 0) at async ie.resolveEverything (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:358614) at async /Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:377271 at async f.startTimerPromise (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:389740) at async ie.install (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:377210) at async /Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:33217 at async Function.start (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:388437) ➤ YN0000: └ Completed ➤ YN0000: Failed with errors in 0s 9ms Same issue with Font Awesome this time though with Yarn 2... tomwebroll@Toms-iMac testtwo % yarn add @fortawesome/fontawesome-pro ➤ YN0027: @fortawesome/fontawesome-pro@unknown can't be resolved to a satisfying range: HTTPError: Response code 404 (Not Found) at se.<anonymous> (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:23:10082) at processTicksAndRejections (node:internal/process/task_queues:93:5) ➤ Errors happened when preparing the environment required to run this command. So I adjusted .yarnrc.yml with the following (didn't work without https:// for Font Awesome, didn't work with any for gsap. Tried // http:// and https://) tomwebroll@Toms-iMac testtwo % vi .yarnrc.yml tomwebroll@Toms-iMac testtwo % cat .yarnrc.yml yarnPath: ".yarn/releases/yarn-berry.cjs" npmRegistries: //npm.fontawesome.com: npmAlwaysAuth: true npmAuthToken: "FATOKEN" //npm.greensock.com: npmAlwaysAuth: true npmAuthToken: "TOKEN" npmScopes: fortawesome: npmRegistryServer: https://npm.fontawesome.com/ gsap: npmRegistryServer: https://npm.greensock.com/ Tried installing gsap again tomwebroll@Toms-iMac testtwo % yarn add gsap@npm:@gsap:/shockingly ➤ YN0000: ┌ Resolution step ➤ YN0001: │ Error: gsap@npm:@gsap:/shockingly isn't supported by any available resolver at n.getResolverByDescriptor (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:336683) at n.bindDescriptor (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:336048) at d (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:357409) at async Promise.all (index 0) at async ie.resolveEverything (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:358614) yarnPath: ".yarn/releases/yarn-berry.cjs" at async /Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:377271 at async f.startTimerPromise (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:389740) at async ie.install (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:377210) at async /Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:33217 at async Function.start (/Users/tomwebroll/Sites/testtwo/.yarn/releases/yarn-berry.cjs:2:388437) ➤ YN0000: └ Completed ➤ YN0000: Failed with errors in 0s 7ms Tried adding Font Awesome again tomwebroll@Toms-iMac testtwo % yarn add @fortawesome/fontawesome-pro ➤ YN0000: ┌ Resolution step ➤ YN0000: └ Completed ➤ YN0000: ┌ Fetch step ➤ YN0013: │ @fortawesome/fontawesome-pro@npm:5.15.2::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffontawesome-pro%2F-%2F5.15.2%2Ffontawesome-pro-5.15.2 ➤ YN0000: └ Completed in 0s 339ms ➤ YN0000: ┌ Link step ➤ YN0007: │ @fortawesome/fontawesome-pro@npm:5.15.2::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffontawesome-pro%2F-%2F5.15.2%2Ffontawesome-pro-5.15.2.tgz must be built because it never did before or the last one failed ➤ YN0000: └ Completed in 4s 51ms ... Lastly, here is my .yarn-error.log from the first attempt using v1.22.10 Arguments: /usr/local/bin/node /usr/local/bin/yarn add code-frame PATH: /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Users/tomwebroll/.rvm/bin Yarn version: 1.22.10 Node version: 15.3.0 Platform: darwin x64 Trace: Error: https://npm.greensock.com/code-frame: You must be logged in to install/publish packages. at Request.params.callback [as _callback] (/usr/local/lib/node_modules/yarn/lib/cli.js:66988:18) at Request.self.callback (/usr/local/lib/node_modules/yarn/lib/cli.js:140662:22) at Request.emit (node:events:376:20) at Request.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:141634:10) at Request.emit (node:events:376:20) at IncomingMessage.<anonymous> (/usr/local/lib/node_modules/yarn/lib/cli.js:141556:12) at Object.onceWrapper (node:events:482:28) at IncomingMessage.emit (node:events:388:22) at endReadableNT (node:internal/streams/readable:1294:12) at processTicksAndRejections (node:internal/process/task_queues:80:21) npm manifest: { "name": "test", "version": "1.0.0", "main": "index.js", "license": "MIT" } yarn manifest: No manifest Lockfile: No lockfile Hopefully someone can see what I'm doing wrong here & point me in the right direction Cheers

@ZachSaucier - I'll respond to you properly on the previous message shortly. @scottgroovez - I'm still using v1.22.10 - Haven't had time to migrate anything over yet.

Thanks for all your help so far @ZachSaucier but it's still not working unfortunately ? I've tried as many combinations of things that I can think of throughout all this... Here is some of what I just tried (Ran yarn cache clean in between each attempt just in case). 1. Trivial... But tried switching the order of these lines in .npmrc like my Font Awesome example above. 2. Installing with & without the suggested .yarnrc file: 3. Attempting to install yarn add gsap@npm:@gsap/shockingly, yarn add gsap@npm:@gsap/simply and yarn add gsap@npm:@gsap/member ... just in case. Like I say, I've got the shockingly account. I get the same response for each of these attempts: tomwebroll@Toms-iMac site % yarn add gsap@npm:@gsap/shockingly yarn add v1.22.10 [1/4] ? Resolving packages... [2/4] ? Fetching packages... error An unexpected error occurred: "http://npm.greensock.com/@gsap%2fshockingly/-/gsap-3.6.0.tgz: Request failed \"403 Forbidden\"". info If you think this is a bug, please open a bug report with the information provided in "/Users/tomwebroll/Sites/site/yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. 4. I want to get this working at a project level in a env variable, but just for sanity reasons I've also tried all this at a global level too in my root .npmrc and .yarnrc files. I know what you are saying about NPM & I might need to use it here. I guess I'm just using Yarn in this particular project out of habit & stubbornness! I like the cleaner UI, it seems faster, and we've used https://classic.yarnpkg.com/en/docs/workspaces/ feature in the past. Because Font Awesome is working for me using scope with Yarn, is it worth looking at how? After searching for them on https://yarnpkg.com/?q=fortawe&p=1, all their packages are prefixed with scope & yours isn't https://yarnpkg.com/?q=gsap&p=1. Could this be the problem?

When I do that, gsap is installed like this: gsap@^3.5.1: version "3.5.1" resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.5.1.tgz#... integrity sha512-... Also tried @gsap:registry=https://npm.greensock.com/ I'm not too experienced with using different registry's like this. I know it's probably a Yarn thing rather than Greensock, but the instructions don't seem to work. Is there anything else I could try?

Hey @ZachSaucier, Thanks for your quick response. Yes I followed instructions. I'm using v1.22.10 ... Like I say, everything is working but I'd like to be able to install the rest of my packages from the regular registry. I'm also using Font Awesome in this project which is working correctly using scope. Looking at the installed gsap package, I should be able to install with Yarn like on your NPM instructions with scope right? I.e. yarn add @gsap/shockingly Here is my set up: .npmrc (TOKEN is replaced with my token) always-auth=true //npm.greensock.com/:_authToken=TOKEN @fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=FONTAWESOMETOKEN .yarnrc registry "https://npm.greensock.com/" Some example package installs from yarn.lock (Some secrets are replaced with ...) "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.11": version "7.12.11" resolved "http://npm.greensock.com/@babel%2fcode-frame/-/code-frame-7.12.11.tgz#... integrity sha512-... dependencies: "@babel/highlight" "^7.10.4" gsap@^3.5.1: version "3.5.1" resolved "http://npm.greensock.com/@gsap%2fshockingly/-/gsap-3.5.1.tgz#... integrity sha512-... "@fortawesome/fontawesome-pro@^5.13.0": version "5.15.1" resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-pro/-/5.15.1/fontawesome-pro-5.15.1.tgz#... integrity sha512-...

Hi all, Wondering if I'm doing something wrong when installing Shockingly reen with Yarn because all my packages are now installed via npm.greensock.com. E.g. "@babel/preset-flow@^7.0.0": version "7.12.1" resolved "http://npm.greensock.com/@babel%2fpreset-flow/-/preset-flow-7.12.1.tgz#1a81d376c5a9549e75352a3888f8c273455ae940" Is there some way of adding some scope like @gsap so that other packages can be installed from elsewhere? I can see that there is when using NPM, but I need to use Yarn for this project. Btw, everything is actually working here, but want to be able to set a registry in .yarnrc for just GSAP if possible. Cheers