w-ap Posted May 13, 2021 Share Posted May 13, 2021 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. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted May 13, 2021 Solution Share Posted May 13, 2021 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 3 Link to comment Share on other sites More sharing options...
OSUblake Posted May 13, 2021 Share Posted May 13, 2021 11 minutes ago, w-ap said: For velocity and angle, this should not be a TweenValue instead of ? And yes. Link to comment Share on other sites More sharing options...
w-ap Posted May 14, 2021 Author Share Posted May 14, 2021 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. Link to comment Share on other sites More sharing options...
w-ap Posted May 14, 2021 Author Share Posted May 14, 2021 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)', } }); Link to comment Share on other sites More sharing options...
OSUblake Posted May 14, 2021 Share Posted May 14, 2021 How about this? gsap.to(".dots", <any>{ physics2D: { velocity: 'random(200, 350)', angle: 'random(80, 100)', } }); Link to comment Share on other sites More sharing options...
w-ap Posted May 14, 2021 Author Share Posted May 14, 2021 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. Link to comment Share on other sites More sharing options...
OSUblake Posted May 14, 2021 Share Posted May 14, 2021 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)', } }); 1 Link to comment Share on other sites More sharing options...
w-ap Posted May 14, 2021 Author Share Posted May 14, 2021 I have already tried but it doesn't work : Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now