reverse() stoped working after i add setState

[AwSick]

reverse animation stop reproduced after i started to change state of boolean, how to fix?

See the Pen VwzzOLa by viktorsdolzenko (@viktorsdolzenko) on CodePen

[OSUblake]

Hi AwSlick,

 

You should never create a timeline at the top level of a function. Once you change the state, your component will re-render, and it's going to create a brand new timeline, so you will be referencing a completely different timeline.

 

This is explained in our React Guides.

 

 

[AwSick]

25 minutes ago, OSUblake said:

Hi AwSlick,

 

You should never create a timeline at the top level of a function. Once you change the state, your component will re-render, and it's going to create a brand new timeline, so you will be referencing a completely different timeline.

 

This is explained in our React Guides.

 

 

 hi, i checked ur link, but still not understand how to fix my problem, can u please show solution on example if possible

[OSUblake]

Do not create a timeline or tween at the top level of function.

 

// BAD
const Envelope = () => {
  const t1 = gsap.timeline({ paused: true, reversed: true });
}

// GOOD
const Envelope = () => {
  const tl = useRef();
  
  useEffect(() => {
    t1.current = gsap.timeline({ paused: true, reversed: true });
  }, []);  
}

 

Go back and look at the demos, like the one in the Creating and controlling timeline section.

 

See the Pen eYWGeGe by GreenSock (@GreenSock) on CodePen

 

[AwSick]

10 minutes ago, OSUblake said:

Do not create a timeline or tween at the top level of function.

 

// BAD
const Envelope = () => {
  const t1 = gsap.timeline({ paused: true, reversed: true });
}

// GOOD
const Envelope = () => {
  const tl = useRef();
  
  useEffect(() => {
    t1.current = gsap.timeline({ paused: true, reversed: true });
  }, []);  
}

 

Go back and look at the demos, like the one in the Creating and controlling timeline section.

 

 

 

 

Thanks a lot !! , now i understand, its works.