Jump to content

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

Rodrigo last won the day on April 27

Rodrigo had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Rodrigo last won the day on April 27

Rodrigo had the most liked content!

Community Reputation

3,323 Superhero


About Rodrigo

  • Rank
    Advanced Member

Profile Information

  • Gender
  • Location
    Santiago - Chile

Recent Profile Visitors

25,908 profile views
  1. Mhh... I'm not a big fan of Gatsby, too convoluted IMHO. Next is quite simpler to use and if you want to use GraphQL you can tap Apollo Server super easy. With that out of my chest I thought that the SSR API should be the way to achieve it, but in codesandbox I can't get it to work with any script I try: https://www.gatsbyjs.com/docs/ssr-apis/#onRenderBody I don't know if this is a codesandbox thing or what because I haven't tried locally. You could try locally adding a script tag in the head for example of axios and check if it works. If it does then the issue is on co
  2. Hi and welcome to the GreenSock forums. Why are you using GSAP ticker for something that can be solved quite easily without it? Take a look at this thread and you'll find a bunch of solutions from some of the superstars in these forums: Honestly I would use some of their code with a direct GSAP instance and leave the ticker alone. Finally I would also avoid updating state on every mouse movement because that basically causes a re-render, which of course, in simple components means nothing, but in more complex ones could be a performance issue.
  3. To be completely honest I don't have a lot of experience with the ScrollTrigger plugin yet, so I can't tell you with just the information you provide. Please update your codesandbox to use Next and a minimal reproduction of your issue in order to get a better look at what could be causing the problems. Happy Tweening!!!
  4. Hey Frank, You're not passing any dependencies to the useEffect hook. Is this component rendered just once in the entire lifecycle of the App? Because right now that will run everytime a state or prop in that component is updated or the parent component is re-rendered as well. Also clean up your component when it unmounts by returning a function in a useEffect hook with an empty array as dependencies: useEffect(() => { // At the end of the hook return a function return () => { // Here kill all your GSAP instances in case one of them is still running
  5. Hi, In order to kill GSAP instances you need to use the returned function from the initial render useEffect(), which you already have in place, this will run when the component is unmounted: useEffect(() => { /* ALL THE GSAP CODE HERE */ return () => { // In this function kill all your GSAP instances // that could be affecting other areas of your code // our throwing errors }; }, []); Finally your codesandbox is using Create React App and not Next, so is not the same environment as the live sample you provided and you're running the registerPlu
  6. Yeah my bad... you have to kill animations and clear props in order to avoid that. The sample is updated. Happy Tweening!!!
  7. Hey, Well that is a very complete description, no doubt , but is beyond what I can spare in terms of time. This is all I can mustard right now, but it should help you get started: https://codesandbox.io/s/gsap-next-page-transitions-n2ozd The approach is quite simple, just generate a Layout component and handle the animations there. I stumbled with the fact that I can't update the in property without creating some state management that would be a bit convoluted (using either context or redux) so instead of using addEndListener I ended up using the
  8. Hey @trompx, What exactly are you trying to achieve? Next works a bit different than a regular React app, since routing is achieved by using their folder-structure system. I'd suggest to listen to changes in a router instance (which is actually provided by Next) and keep track of the router path in order to decide what to do. I know is a bit cryptic but I'm not really that familiar with Next (I've done a couple of things most never page transitions), so I don't have any real sample to show, so I'd try to explain a bit. For using RTG you can use t
  9. Mhh... Have you measured such behaviour with the performance tool in dev-tools or the profiler in react dev-tools? It seems more annoying than anything, but keep in mind that a high order component is just a function, so everytime you invoke that function the resulting component (with it's children) is returned to the DOM and all the code inside is executed as well. If I was you I'd be trying to figure how make the setup work with a simpler base without the custom scrollbar, just an event that moves the component in the Y axis and then add more features to it.
  10. Hey, good to see that you got it working. Mhh... I don't see why performance could be an issue with this setup; Care to explain why you think it could? Happy Tweening!!!
  11. Hi, To be completely honest I haven't done pretty much anything with ScrollTrigger so I'm totally out of my element here. After a quick glance at the API docs I tried this: ScrollTrigger.create({ id: "Scroller", trigger: ".hi", start: "bottom bottom", end: "top top", animation: test, // scroller: ".content-scroll", scroller: scrollersm.current, scrub: true, onUpdate() { console.log("scroll update"); }, }); Which of course didn't worked. For the React part of your code I see you're wrapping everything and you're passing the reference as a p
  12. Hey, this.gsap.to(this.$refs.element, { /* Config Here */ }); So this kept going in my brain since there is an actual way of sharing stuff in different Vue components: MIxins. You can do something like this: mport Vue from "vue"; import App from "./App.vue"; import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); Vue.mixin({ created: function () { this.gsap = gsap; } }); And then in a component file use gsap like this: this.gsap.to(this.$refs.logo, {/* GSAP Config Here */}); Here is a working
  13. Hi and welcome to the GreenSock forums. I wouldn't expect it to work because as far as I can tell, the main use() method in Vue is reserved for Vue specific plugins like VueX, Vue Router, etc. While GSAP will work with Vue without any issues, you'll have to import it in every component you use it, like you mentioned. Here is the API docs about Vue.use(): https://vuejs.org/v2/api/#Vue-use Happy Tweening!!!
  14. If I'm not mistaken @Dipscom has some experience with Svelte in production, chances are that He has used it with GSAP as well.
  15. Turns out that Shaun is The One