Jump to content

Rodrigo last won the day on May 2 2021

Rodrigo had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Rodrigo last won the day on May 2 2021

Rodrigo had the most liked content!


About Rodrigo

Profile Information

  • Gender
  • Location
    Santiago - Chile

Recent Profile Visitors

32,461 profile views
  1. Just an FYI. GSAP has a selector method that could simplify this a bit, specially considering that React components tree is rendered starting with child components. The docs have a series of examples on how to use it with React and other frameworks as well: https://greensock.com/docs/v3/GSAP/UtilityMethods/selector() Happy Tweening!!!
  2. Ahhh, OK. Hopefully this is enough to get you started: https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component Unfortunately, as far as I know, the Link component doesn't expose a ref to the DOM element being rendered, so you have to create one by yourself using a component (as shown in the docs). Perhaps @elegantseagulls has some experience with this, normally the hover effects I add to links are quite simple and I create them with CSS transitions (this probably is going to cost me in the future ). Given what you're trying to achieve, you could also create a codepen sample in order to get a glance of what you're trying to do and port that to another sandbox using Next. Happy Tweening!!!
  3. Hello @mercurymirror and welcome to the GreenSock forums. If this is about route/page transitions, perhaps this post could be helpful: If not, please provide a live editable sample using either codesandbox or stackblitz. Happy Tweening!!!
  4. Excellent support Ladie and Gentlemen!!!! Also as a side note, with all those glowing SVGs I'm getting a lot of Light Sabers vibes in this thread
  5. Hey, @Cassie and @OSUblake did an amazing job on these guides, they should be more than enough to get you started with using GSAP in React: Finally you can check the installation guide in the docs: https://greensock.com/docs/v3/Installation Happy Tweening!!!
  6. @Prasanna Thanks for the follow up. Actually we already have updated the .npmrc file and the global configs. The global .npmrc file looks like this: registry=https://npm.greensock.com/ @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=<token> As I mentioned this is happening on the local dev environment for a Next app on Ubuntu 20.04 using Yarn 3.1.1, on a Win 10 machine using Yarn 1.22.5 works as expected. Over the weekend I took the time to install Ubuntu 20.04 here at home and I'm seeing the same issue. This is the result: rodrigo@rodrigo-desktop:~/Web Apps/GSAP/yarn-bonus$ yarn add @gsap/shockingly gsap@npm:@gsap/shockingly ➤ YN0027: @gsap/shockingly@unknown can't be resolved to a satisfying range ➤ YN0035: The remote server failed to provide the requested resource ➤ YN0035: Response Code: 404 (Not Found) ➤ YN0035: Request Method: GET ➤ YN0035: Request URL: https://registry.yarnpkg.com/@gsap%2fshockingly ➤ Errors happened when preparing the environment required to run this command. I created a simple project using yarn init without any dependencies and the results are the same. No issues in Win 10/Yarn 1.22.5 and the same error in Ubuntu 20.04/Yarn 3.1.1. If I have time I'll see if I can remove yarn and install the latest 1.x version (which is no longer supported though) and see if it works with that. Finally I created an issue in Yarn, but it was marked as unreproducible by the bot so I don't know what amount of attention it'll attract: https://github.com/yarnpkg/berry/issues/4072 Best, Rodrigo.
  7. @Prasanna Someone at work actually uses Ubuntu and it's having issues with this. When running yarn add @gsap/shockingly it gives the following error: ➤ YN0027: @gsap/shockingly@unknown can't be resolved to a satisfying range ➤ YN0035: The remote server failed to provide the requested resource ➤ YN0035: Response Code: 404 (Not Found) ➤ YN0035: Request Method: GET ➤ YN0035: Request URL: https://registry.yarnpkg.com/@gsap%2fshockingly Also a message to my fellow GreenSockers, running this yarn add gsap@npm:@gsap/shockingly, result in this error as well in Ubuntu: ➤ YN0000: ┌ Resolution step ➤ YN0001: │ Error: gsap@npm:@gsap/shockingly isn't supported by any available resolver at pd.getResolverByDescriptor (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:432:5658) at pd.bindDescriptor (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:432:5047) at I (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:441:6932) at async Promise.all (index 0) at async Ke.resolveEverything (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:441:8197) at async /home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:444:2138 at async Fe.startTimerPromise (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:412:3730) at async Ke.install (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:444:2077) at async /home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:449:122 at async Function.start (/home/nidhal/.node/corepack/yarn/3.1.1/yarn.js:412:2287) ➤ YN0000: └ Completed ➤ YN0000: Failed with errors in 0s 7ms I don't know if this is related to the version of yarn that He has installed in his machine (I believe is 3.1.1), but while installing stuff in linux is a bit different that win/mac the resulting installed resource should be the same. Also is worth noticing that we're not using netlify for this, we're deploying on digital ocean using a docker image. For now we'll use the .tgz file and since is a private repo, there isn't a lot of issues with it, but it would be great to have a notion of what's the issue here. I did a search in the issues at Yarn's repo and didn't found anything so I'll create a ticket there and give feedback regarding this. Cassie, Jack. I don't know if this is the right place for this, since my issue is not related to Next and Netlify, if you want I can create a new thread in the forums specific for this. Best, Rodrigo.
  8. I don't want to be that annoying intransigent guy that defends something just because. While Nuxt routing could be a bit more confusing than Next's routing, is not at all complex and they share quite a few similarities: https://nuxtjs.org/docs/get-started/routing https://nuxtjs.org/docs/features/file-system-routing/ While I'm not trying to convince you about ditching Next in favor of Nuxt, I believe that both frameworks' routing systems are quite similar and offer the same functionalities and finally, a fair assessment of both cases can be done by looking the docs and demos on the subject. Happy Tweening!!!
  9. Hey, Based on these articles: https://dev.to/anxiny/page-transition-effect-in-nextjs-9ch https://ellismin.com/2020/05/next-page-transition/ I came up with this: https://github.com/rhernandog/next-gsap-transitions Live sample (nothing fancy, just a proof of concept): https://cranky-heyrovsky-83f0a9.netlify.app/ The only drawback in this approach is that you can't use the module approach for styling each page: https://dev.to/koraysels/comment/1f341 Also @John Polacek has this package, but I don't know if it is production-ready, John should be the one to tell us: https://github.com/johnpolacek/TweenPages Hopefully these help you get started. Finally if I was you I would invest time in using Nuxt since they have Vue's native animation solution implemented without any of this hassles. I recently did a little consulting for this site created with Nuxt and GSAP and works great: https://fcwisi1.ch/ Happy Tweening!!!!
  10. The GSAP instance is being stored in a reference that will be kept through re-renders, unless you update the ref.current value by hand: Perhaps that should be re-phrase to: "store the timeline in a reference using useRef()", but I believe the point is pretty clear. Finally Blake is right, in most cases when using HMR, an update to the code might keep state but reset other stuff, which can result in the DOM elements going to their initial state, which can conflict specially with .from() instances and other GSAP instances. In those cases the good ol' F5 key is the only solution for that. Happy Tweening!!!
  11. Hi and welcome to the GreenSock forums. In order to make the plugins work in Next you need to import them from the dist folder: import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; Finally if you run into some issues with the register part, be sure to check for the window object and not the process.browser property: if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } Happy Tweening!!!
  12. That happens because all of them are in the DOM at the same time, you can solve that by tinkering with the position styles in order to take one or all of them from document flow or use the switch transition component: https://reactcommunity.org/react-transition-group/switch-transition Happy Tweening!!!
  13. The done callback should be able to do that on both cases enter/exit. Keep in mind that enter and exit are different things, similar to how GSAP handles display: "none"/"block". The real thing is that done and timeout are just used to update the state of the <Transition> component, nothing more. Depending on a specific state property the component is either rendered or not. I don't want to get into more specifics because, IMHO we don't need even more confusion about the usage of GSAP in a React app around here Here you can see the render method of the <Transition> component (a class component maintained by the React team, go figure ): https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js#L342-L378 At the top you find the conditional rendering logic for it: const status = this.state.status if (status === UNMOUNTED) { return null } The status property changes between this values depending on the stage of the transition: export const UNMOUNTED = 'unmounted' export const EXITED = 'exited' export const ENTERING = 'entering' export const ENTERED = 'entered' export const EXITING = 'exiting' If you follow the logic in the componentDidUpdate hook and the associated callbacks you'll see that this isn't exactly setting up a nuclear reactor, is quite simple actually. In this sample you can check it in dev tools, is a bit outdated but the mechanics of it are pretty much the same. If you add a new element is mounted then animated in. If you remove an element is animated out and then unmounted from the DOM: https://stackblitz.com/edit/gsap-react-transition-group-list?file=transition-card.js Finally I don't know all the ins and outs of transition group but is a great package and certainly quite useful in some specific cases.
  14. @granularclouds Be more careful with your syntax <Transition in={key === color} onExt={exit} // onExit <--!!!!!!! onEntering={(el) => enter(el, i)} mountOnEnter unmountOnExit appear timeout={1500} > Happy Tweening!!!
  15. Indeed you are : const exit = (node) => { gsap.from(node, { duration: 1.5, delay: 0.5, opacity: 1, stagger: 0.5 }); }; You're creating a from instance. That basically takes the elements from the values you're passing to it in the config object to the current ones the DOM element has. So basically this code is saying: "Take this cards and animate them from opacity: 1 to their current opacity". Turns out that their current opacity is also one, so GSAP is actually doing it's job, but this is animating the opacity from one to one, so visually there is no change at all. This should work: const exit = (node) => { gsap.to(node, { duration: 1.5, delay: 0.5, opacity: 0, stagger: 0.5 }); }; Happy Tweening!!!