Jump to content
GreenSock

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!

Rodrigo

Moderators
  • Content Count

    1,879
  • Joined

  • Last visited

  • Days Won

    164

Rodrigo last won the day on April 27

Rodrigo had the most liked content!

Community Reputation

3,207 Superhero

About Rodrigo

  • Rank
    Advanced Member

Profile Information

  • Gender
    Male
  • Location
    Santiago - Chile

Recent Profile Visitors

25,166 profile views
  1. Hey, Thanks for sharing the link. Please don't, that is basically an error on the folks of Netlify, that file shouldn't be there at all. The club memberships are what keeps GSAP running, improving and coming up with great tools, it's quite affordable and the investment returns almost immediately (normally getting paid for one job should get any developer, of any skill level their money back). I'm sure @GreenSock will get in touch with Sarah in order to correct the repo and it's history in order to remove that. Happy tweening!!!
  2. Please refer to this sample, since it's more up-to-date and it's working as expected: https://codesandbox.io/s/gsap-powered-modal-bobdj Happy Tweening!!!
  3. Hi, The problem I see in the code you posted is that you're using the ref in a React component, not a DOM node, therefore the object you're getting back from it is a React Component. The best alternative is to forward the ref from the child component as shown in this sample: https://codesandbox.io/s/react-hover-forward-ref-ybtgs Finally, even though there are other alternatives to pass a reference from a child component, they are a bit more convoluted and prone to bugs, so if possible stick with forwardRef(). Happy Tweening!!!
  4. Hi Gabriel, Can you post a live editable sample of your code in codesandbox or stackblitz, in order to take a better look? The one thing that pops out in your code is that you're not using useRef() to create the timeline, which means that the timeline is created again on every re-render. As a recommendation, when using hooks, create your GSAP instances with useRef(). Happy Tweening!!!
  5. I'm not a yarn user so I can't help you a lot with that part, but as far as I know (and perhaps someone with experience using yarn can correct me if I'm wrong), yarn uses the same package.json file regardless of the contents it has. Also if you have node and NPM installed in your machine, those commands should run without any major problems. Finally add the homepage key:value pair in your package.json file as recommended and see what happens. Also you could take a look at it in stackoverflow, since I normally prefer to work with Netlify or Heroku for test deployments, since you can sync that with travis or circle ci using a CI/CD flow and automated deploy if you're using github or using the provided CI/CD pipelines if you're using gitlab.
  6. What you mention could be related to deployment in github pages: https://create-react-app.dev/docs/deployment#github-pages
  7. There is an error in your code, right now you have this for cleanup (as suggested by Blake): return () => { tl.current.kill(); }; The issue is that you're creating the GSAP instance as a constant inside the component's scope and not as a reference inside it. You have to either, change that line to this: return () => { tl.kill(); }; Or create the GSAP instance using useRef() in order to store it in a reference in the component and then use that pattern to access it in all your code: const tl = useRef(gsap.timeline({ paused: true, repeat: 3 })); // Then in the initial render useEffect() useEffect(() => { gsap.set(sceneRef.current, { perspective: 0 }); tl.current .to(cubeRef.current, 1, { rotationY: 360, rotationX: 360 }, '-=1') .to(sceneRef.current, 1, { scale: 0.2 }, '-=1') .to(cubeRef.current, 1, { x: 500 }, '-=1') .timeScale(1); return () => { tl.current.kill(); }; }, []); Happy Tweening!!!
  8. Hi Rick and welcome to the GreenSock forums. Mostly the issue appears to be that the references are not yet created when you create the GSAP instances. You have the cube and scene refs as targets in a GSAP instance here: https://github.com/RickGove/Current-Portfolio/blob/master/src/components/DiceGame/dice/index.js#L43 And also here: https://github.com/RickGove/Current-Portfolio/blob/master/src/components/DiceGame/dice/index.js#L75-L79 The problem is that this code is executed before the code in the return() statement at the end of the component, therefore at this point the current property on each ref is undefined and GSAP complains about it. You might want to wrap that in a useEffect() hook, passing an empty array as the dependency in order to run that code only when the component is first mounted: import React, { useRef, useEffect } from 'react'; export default function Dice() { useEffect(() => { TweenMax.set(sceneRef.current, { perspective: 0 }); const tl = new TimelineMax({ paused: true, repeat: 3 }); tl .to(cubeRef.current, 1, { rotation: 360 }) .to(cubeRef.current, 1, { rotationY: 360, rotationX: 360 }, '-=1') .to(sceneRef.current, 1, { scale: 0.2 }, '-=1') .to(cubeRef.current, 1, { x: 500 }, '-=1') .timeScale(1); }, []); } It seems that there are other issues, at least with the preview in GH pages, regarding these two JS files that point to other ports in your local environment: If possible, create a live editable sample using codesandbox or stackblitz to get a better look at the possible issue. You can deploy a github repo directly in both services. Also I noticed that you're using the latest version of GSAP but still using the 2.x syntax, I'd strongly recommend to adopt the latest syntax. Finally if you plan into becoming a GSAP Club member please don't upload the bonus files to a public repo at any given point during development: Right now there is no issue since that tar file contains the regular files and not the bonus plugins, but if in the future you become a club member, you'd be basically giving the stuff you paid for, for free to anyone that can access the repo. Happy Tweening!!!
  9. Hey Peter, No problem mate!!! we are all here pushing in the same direction. Since you have a dedicated section for GSAP+React, it would be nice to have this kind of samples and as many case scenarios covered in order to refer users to your site. Mostly the issue we (Blake and I) have is that the Hooks API ends up being confusing and somehow filled with this hurdles you have to navigate. @ZachSaucier already said it better than I can: Components are easier and their API makes more sense. Also that's why the more I work with Vue, the more I prefer it as an approach to build apps, because in most cases you have only one way to do things and that is a great feature for a library that helps you build apps. Also Vue allows to separate the HTML from the JS and finally in version 3 the composition API is going to be a great addition. I'll check the tutorial on the weekend and get back to you. Happy Tweening!!!
  10. Ok, so the issue is stated here: https://reactjs.org/docs/hooks-reference.html#functional-updates Basically since the closure in the initial render can access only the initial state, so you need to explicitly pass the current state to the callback using the functional update approach: const update = () => { setCount(prevCount => prevCount + 1); }; So this sample now works as expected: https://codesandbox.io/s/gsap-update-state-hooks-4nezn And apparently I have to eat my words and you CAN use GSAP with the hooks API Happy Tweening!!!
  11. Ok, so I don't know what to tell you besides don't use hooks with GSAP. This is a version using hooks with the approach I mentioned before: https://codesandbox.io/s/gsap-update-state-hooks-4nezn It doesn't work. This is basically the same code using a class component: https://codesandbox.io/s/gsap-update-state-class-tdj1i This does work. I'll ask around in the reactiflux community to see if someone can shed some light into this. Happy Tweening!!!
  12. Hey guys, I've been looking into this and I really don't like this part: useEffect(() => { console.log(tl.current); tl.current.to(test.current, 2, { opacity: 0, onComplete: update }); }, [count]); Basically this code tells GSAP to add a new instance to the end of the timeline each time the count value in the component's state is updated, which happens every time the timeline instance is completed. This means that the timeline gets bigger and bigger, which could lead to unwanted results and a memory leak. The instance should be added to the timeline only once in the initial render of the component, using an empty array in the useEffect() hook. I'm trying to figure something out in order to post a solution with that particular code, but I've been interrupted several times by household situations . As soon as I have something concrete to post I'll get back to you. Happy Tweening!!! PS: Yeah, I have two suggestions. One, don't use Hooks with GSAP. Two, use Vue or Svelte
  13. Congrats buddy, looks amazing. True to your tradition here is a gif to celebrate the launch:
  14. Hi, This works with a class component: https://codesandbox.io/s/gsap-react-stop-wheel-h6fpv?file=/src/App.js The approach is a bit different though. You'll have to find a correlation between the end angle and the actual landing spot of the wheel, or try to implement your own logic for that. Also I don't know what on earth is going on in Codesandbox but the same code is working as expected here: https://gsap-stop-wheel.netlify.app/ Here works as expected too: https://stackblitz.com/edit/gsap-react-stop-wheel?file=index.js Happy Tweening!!!
  15. Mhhh... Can you set up a Codesandbox with a minimal sample in order to take a look at it? As far as I know it shouldn't be necessary to add the GSAP instance in the dependencies array of the use effect, that only tells React in which cases that code should run, nothing else. If you check my sample I don't add the instance to the useEffect call: useEffect(() => { if (rotationTween) rotationTween.reversed(!rotate); }, [rotate]); Also another alternative that I would try is to tween the timescale of the animation, in order to create a smooth start/end for the animation, like this sample: https://codepen.io/GreenSock/pen/OXXXzK There you can see that the code tweens the timescale property to 0 and 1 to create the smooth start/stop.
×