gsap.set error in React

[Michel Ribeiro Araujo]

Hi! i'm trying to create a confetti animation in my react projecta, following some tutorial and code example i found but there are something that im not understand. See code:

 

import React from 'react';
import { gsap, TweenMax } from 'gsap';

class Stars extends React.Component {
  render() {
    TweenMax.to('img', {
      xPercent: '-50%',
      yPercent: '-50%',
    });
    const total = 70;
    const container = document.getElementById('container');
    let w = container?.offsetWidth;
    let h = container?.offsetHeight;
    for (let i = 0, div; i < total; i++) {
      div = document.createElement('div');
      div.className = 'dot';
      container?.appendChild(div);
      gsap.set(div, {
        x: R(0, w || 1),
        y: R(-100, 100),
        opacity: 1,
        scale: R(0, 0.5) + 0.5,
        backgroundColor: 'hsl(' + R(170, 360) + ',50%,50%)',
      });
      animm(div);
    }
    function animm(elm) {
      TweenMax.to(elm, R(0, 5) + 3, {
        y: h,
        ease: Linear.easeNone,
        repeat: -1,
        delay: -5,
      });
      TweenMax.to(elm, R(0, 5) + 1, {
        x: '+=70',
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut,
      });
      TweenMax.to(elm, R(0, 1) + 0.5, {
        opacity: 0,
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut,
      });
    }
    return <p>oi</p>;
  }
}
export default Stars;

what is the "R" function which set a value to 'x' and 'y' coords?

 

[ZachSaucier]

8 minutes ago, Michel Ribeiro Araujo said:

what is the "R" function which set a value to 'x' and 'y' coords?

It seems that you're taking your code from this thread

The demo in that thread by Diaco has a function R as such:

function R(min, max){ return min + ( Math.random() * (max - min)) };

However, in GSAP this would be better suited using GSAP's random functionality. Such as

duration: "random(0.5, 1.5)"

or using GSAP's random utility method:

gsap.utils.random(0.5, 1.5)

There are a lot of other improvements that you could make as of GSAP 3, such as switching TweenMax to just gsap, using the string form of eases (i.e. using "none" instead of Linear.easeNone), using keyframes, using defaults, and putting the duration inside of the vars parameter. Check out this page for more info.

 

Happy tweening!

[Michel Ribeiro Araujo]

oh, thank you! i'm takin this error now:

 

ReferenceError: Linear is not defined.

 

from here:

function animm(elm: any) {
      TweenMax.to(elm, R(0, 5) + 3, {
        y: h,
        ease: Linear.easeNone,
        repeat: -1,
        delay: -5,
      });

 

but i can see his value:

 

 

i know i can change this line to something like "easeInOut" but why i'm takin this error? i tried to import Linear but not success.

[ZachSaucier]

47 minutes ago, Michel Ribeiro Araujo said:

i tried to import Linear but not success.

That's why  Diaco's pen uses GSAP 1 which is really old. If you want to use the object form of eases in GSAP 3 you have to import them specifically.

 

Why not just use the string based form of eases like I suggested above? 

// old, requires import:
ease: Linear.easeNone

// new, no import required!
ease: "none"

Again, please read up on GSAP 3. It will make your life easier  

 

[Michel Ribeiro Araujo]

i'll read! sry about my dumb questions xD