Physics2DPlugin - problem with attribut velocity and angle with function random()

[w-ap]

Hello,

 

This is not a big deal but there is a problem when I try to use Physics2DPlugin :

gsap.timelime().to(dots, {
  duration: 2.5,
  physics2D: {
    velocity: 'random(200, 650)',
    angle: 'random(250, 290)',
    gravity: -500
  },
  delay: 'random(0, 2.5)'
});

With Angular 10 this code send this error :

> Type 'string' is not assignable to type 'number | undefined'. velocity: 'random(200, 650)'

 

And when i take a look at the code (node_modules/gsap/types/physics-2d-plugin.d.ts)

declare namespace Physics2DPlugin {
  interface Vars {
    acceleration?: number;
    accelerationAngle?: number;
    angle?: number;
    friction?: number;
    gravity?: number;
    velocity?: number;
    xProp?: string;
    yProp?: string;
  }
}

For velocity and angle, this should not be a TweenValue instead of ?

 

Thank for you help.

 

Best regards.

[OSUblake]

Nice catch! I'm guessing this will also throw an error?

velocity: gsap.utils.random(200, 650, true)

 

Well get that fixed in the next release. You should be able to ignore any errors putting this above the problem line.

// @ts-ignore

 

[OSUblake]

11 minutes ago, w-ap said:

For velocity and angle, this should not be a TweenValue instead of ?

 

And yes.

[w-ap]

Hello,

 

Yes, you right. This :

velocity: gsap.utils.random(200, 650, true)

Throw this error (from WebStorm) :

 

This is my current solution if this can help :

function myFunction() {
    const velocity = gsap.utils.random(200, 350);
    const angle = gsap.utils.random(80, 100);
    const delay = gsap.utils.random(0.6, 4.5);
 	const tl = gsap.timeline();
  	tl.to(".dots", {
      duration: 2.8,
      physics2D: {
        velocity,  //Shorthand : equals to : velocity: velocity
        angle,
        gravity: -300
      },
      opacity: 0,
      delay
    }, '<-' + ((delay) - 0.02));
}
  

(Sorry about the strange indentation, I don't successed to fix it)

 

Thank you for you support.

Have a nice day.

[w-ap]

More information about :

// @ts-ignore

It works for this code :

const angle = gsap.utils.random(80, 100);

//ts-ignore
gsap.to(".dots", {
  physics2D: {
    velocity: 'random(200, 350)',
    angle: angle,
  }
});

But if there are more than one 'random()', it doesn't work :

//ts-ignore
gsap.to(".dots", {
  physics2D: {
    velocity: 'random(200, 350)',
    angle: 'random(80, 100)',
  }
});

 

[OSUblake]

How about this?

gsap.to(".dots", <any>{
  physics2D: {
    velocity: 'random(200, 350)',
    angle: 'random(80, 100)',
  }
});

 

[w-ap]

Hello,

 

Thank it's works :

gsap.to(".dots", <any>{
  physics2D: {
    velocity: 'random(200, 350)',
    angle: 'random(80, 100)',
  }
});

I just noticed something with WebStorm.

This doesn't work :

 // @ts-ignore
gsap.to(".dots", {
    physics2D: {
    velocity: 'random(200, 350)',
    angle: 'random(80, 100)',
  }
});

 

but this work :

// @ts-ignore
gsap.to(".dots", {
    physics2D: {
    velocity: 'random(200, 350)',
    angle: 'random(80, 100)',
  }
}, '<');

 

I don't understand why.

 

But nevermind and thank for the support.

[OSUblake]

There are still issues for dealing with code blocks.

https://github.com/Microsoft/TypeScript/issues/19573

 

I think for it to work you would have to put it directly above each line with an error.

gsap.to(".dots", {
  
  physics2D: {
    // @ts-ignore
    velocity: 'random(200, 350)',
    // @ts-ignore
    angle: 'random(80, 100)',
  }
});

 

 

[w-ap]

I have already tried but it doesn't work :