[[SOLVED] animation get stopped and can't back to original position]

4 hours ago, OSUblake said:

 

That is SOOOOOOOoooooooooooo slow, and only works half the time. Please consider using something else next time, like stackblitz or codepen.

 

 

That's probably the simplest solution. 

 

 

 

 

 

It's perfect to me! thanks you!!!

[[SOLVED] animation get stopped and can't back to original position]

5 minutes ago, ZachSaucier said:

There are multiple ways to do this sort of thing. Not using a timeline is one way, but you may run into trouble if a user double clicks (in which case you would need to kill the previous animation). Having a timeline that has two parts to it and making use of .tweenTo() is another way   

I think i gonna die! haha

I haven't got idea how can i use that. I only want to do something like: https://www.cahnwilson.com/ and their code its the same that i put in my repl.it ?

[[SOLVED] animation get stopped and can't back to original position]

12 minutes ago, ZachSaucier said:

Hey prrrcl,

 

The main issue is that you're adding to the timeline every time. You should create the timeline animation when it is initialized and then toggle the playing and reversing on click. See the below thread for more info:

 

I think ok, but if i want to do 2animations? i mean, open 1, close 2. There are 2 diferents animations for entry and exit. How can i do?

[[SOLVED] animation get stopped and can't back to original position]

Hi,

 

Im developing a webapp using react (hooks) and gsap for animations. 

 

i have a toggle burger menu with a Toggle Function. If i click there, animation works, if i click again, burger go back to initial position, but, if i click again, burger doesnt become a X..

 

Why?

https://repl.it/@prrrcl/CulturedDearestProjects

See the Pen by @prrrcl (@@prrrcl) on CodePen

[Two animations in ReactJs Hook]

oh my god, thanks a lot (L)!!!!!

[Two animations in ReactJs Hook]

Hi,

 

I have some issue with Gsap and reactjs. I don't know how can i do two animations, first one, and then when it finished, start the second one.

 

Im working with hooks and this is my code: 

useEffect(() => {
    let newTimeLine = new TimelineMax()
    setAnimation(
      newTimeLine
      .staggerFrom(
        links.children,
        0.5, 
        { alpha: 0, y: -30 }
        , 0.08)
      .staggerTo(
        links.children,
        0.1,
        { alpha: 1, y: 0, ease: Power3.easeOut },
        0.1).reverse()
        )
  }, []);

I want to have second animation: x: -10 to x:0 when y: 0.

 

My english is so bad, sorry guys...

 

Thanks a lot.