Physics 2d React

[andrewandopen]

Hi there 👋,

I'm trying to recreate this tutorial in react but getting an error related to registering my plugin. Any ideas?

Codesandbox here:https://codesandbox.io/s/jolly-germain-lowxnm?file=/src/components/Physics/index.jsx


Thank you

 

[Cassie]

Heya!

 

You should check out our react guide

 

gsap.context() is what you're after

 

 

[Cassie]

An additional note that I wouldn't recommend doing adding in DOM elements like this in react land.

 

This is more of a 'reacty' way to do things

 

https://sentry.io/answers/react-for-loops/#:~:text=export default App%3B-,Using the map() Method,JSX%2C inside the return block.
 

[andrewandopen]

Thanks @Cassie, by "wouldn't recommend doing adding in DOM elements" do you mean appending the dot elements to the dom?

[Rodrigo]

Yep, the best approach in React and most any other UI framework that uses some sort of state/reactive-properties is to make some update in the state and then reflect that update in the DOM.

 

Here is a super simple example of that:

https://stackblitz.com/edit/vitejs-vite-bugky4?file=src%2FApp.jsx&terminal=dev

 

Hopefully this helps.

Happy Tweening!

[andrewandopen]

Thanks @Rodrigo, I've managed to append these itesm in a more "react" way, still haveing trouble actually getting the animation to work however. 

Goal here is – every time user clicks the face, a series of animated elements will appear using a similar animation to this
Codepen here

[Rodrigo]

Hi,

 

The issue is that you're not installing the gsap-trial package in your codesandbox and you're using the Physics plugin on the container not the particles.

 

This seems to work better:

https://stackblitz.com/edit/vitejs-vite-pvfokb?file=src%2Fcomponents%2FPhysics%2Findex.jsx

 

I strongly suggest you to create a React Context instance for this one, because if the user wants to run the effect more than once, it has to click twice in order to toggle back the clicked state of the main component. That should be something like showParticles or something like that and should be toggled from the GSAP instance that animates the dots:

gsap.to('.dot', {
  duration: 2.5,
  scale: 0.1,
  opacity: 0,
  physics2D: {
    velocity: 'random(200, 650)',
    angle: 'random(250, 290)',
    gravity: 500,
  },
  stagger: 0.25,
  onComplete: () => {
    setDots([]);
    isAnimating.current = false;
    // Here toggle the showParticles (clicked) property
    console.log('complete', Date.now());
  },
});

With that the user should click just once in order to animate the particles again and perhaps reduce the opacity of the face in order to give some hint that you cannot animate until the current particles are done.

 

Hopefully this helps.

Happy Tweening!