Michel Ribeiro Araujo

i'll read! sry about my dumb questions xD

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.

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?

Thank you guys. I made some changes and now its works fines!

ok, i fix the error with target but i'm already taking this two: my code now: class MainScreen extends React.Component<IProps> { constructor(props: IProps) { super(props); gsap.registerPlugin(TweenLite); } componentDidMount() { TweenLite.to(Circles, 1, { x: 100, y: 100 }); } public render() { const { classes } = this.props; const circles = React.createRef(); return ( <Wrapper className={classes.root}> <Circles ref={circles} /> <Planet /> <Navbar /> </Wrapper> ); } }

Hi guys! Good morning. I'm newbie with GSAP and i'm learning it but i'm also trying to use it in my react project. so, i'll show peaces of my code before i explain the error: import { gsap, TweenLite } from 'gsap'; class MainScreen extends React.Component<IProps, IState> { constructor(props: IProps) { super(props); gsap.registerPlugin(TweenLite); this.state = { myElement: null, myTween: null, canInitCircles: true, }; } private initCircles = (div: any, canInitCircles: boolean) => { if (canInitCircles) { this.setState({ myElement: div, myTween: TweenLite.to(this.state.myElement, 1, { x: 500, y: 500 }), canInitCircles: false, }); } }; public render() { const { classes } = this.props; const { canInitCircles } = this.state; return ( <Wrapper className={classes.root}> <Circles ref={(div: any) => this.initCircles(div, canInitCircles)} /> <Planet /> <Navbar /> </Wrapper> ); } nothing hard to understand! I have a component called Circles which is a bundle of img html tags with some SVG in each of then and i'm trying to move this component, just to practice GSAP with React. (note: the prop 'ref' in Circles component, receive any). but i'm taking this warning: can anyone knows what its going on? i had already registered the TweenLite plugin at the constructor method. Also, i installed the GSAP by NPM, see on my package.json: "gsap": "^3.1.1",