GSAP Flip: Pause and Play?

[momo12]

Hello guys,

For GSAP Flip I always use this command:

document.querySelector(".button").addEventListener("click", () => {

But if there is a way to tell browser on clicking on a "A" button, takes users from State1 to State2 and one clicking on a "B" button reset the state? Like GSAP

[GSAP Helper]

Hi @momo12. I read your question a few times and I'm a bit lost. Help?

 

Here are some tips that will increase your chance of getting a solid answer:

 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

[momo12]

2 minutes ago, GSAP Helper said:

Hi @momo12. I read your question a few times and I'm a bit lost. Help?

 

Here are some tips that will increase your chance of getting a solid answer:

 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

I want to target the Transition from State A to State B with a button / and reverting this back with another button.

[GSAP Helper]

Have you looked at the docs? There are several demos and explanations. Here's a link to a CodePen collection with lots of examples: 

https://codepen.io/collection/nqvwmG

 

Here's the main demo from the docs and video: 

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

 

If you still need help, please provide a minimal demo with your attempt at something simple (not your whole project please) and then we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi,

15 minutes ago, momo12 said:

I want to target the Transition from State A to State B with a button / and reverting this back with another button.

Just call the same function on both buttons. Flip will read the state on each click event and then create and run the animation, just like you see in the codepen in the previous post.

 

Happy Tweening!

[momo12]

2 minutes ago, Rodrigo said:

Hi,

Just call the same function on both buttons. Flip will read the state on each click event and then create and run the animation, just like you see in the codepen in the previous post.

 

Happy Tweening!

Yes I know. But I don't want for example the second button be able to revert it back. 

[Rodrigo]

Hi,

 

We need a minimal demo otherwise we'll get nowhere in this one.

 

This are your last two posts actually:

21 minutes ago, momo12 said:

I want to target the Transition from State A to State B with a button / and reverting this back with another button.

Then:

2 minutes ago, momo12 said:

But I don't want for example the second button be able to revert it back. 

These two statements basically contradict each other, you say you want to revert it back with another button, then you say that you don't want another button to be able to revert the state 🤷‍♂️

 

Please provide a minimal demo showing what you are trying to do so we can pinpoint exactly what could be the issue.

 

Happy Tweening!

[momo12]

6 minutes ago, Rodrigo said:

Hi,

 

We need a minimal demo otherwise we'll get nowhere in this one.

 

This are your last two posts actually:

Then:

These two statements basically contradict each other, you say you want to revert it back with another button, then you say that you don't want another button to be able to revert the state 🤷‍♂️

 

Please provide a minimal demo showing what you are trying to do so we can pinpoint exactly what could be the issue.

 

Happy Tweening!

See the Pen ExLzQZo by emdesigner-or (@emdesigner-or) on CodePen

 

I only want the black button takes the wrapper to its Grid state and the Orange button takes the original wrapper state back. @Rodrigo Thanks!

[Rodrigo]

Something like this?:

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

 

Of course you could use buttons add a disabled attribute and some styles to it, but basically this would be my approach to it.

 

Let us know how it works.

 

Happy Tweening!

[momo12]

2 minutes ago, Rodrigo said:

Something like this?:

 

 

 

Of course you could use buttons add a disabled attribute and some styles to it, but basically this would be my approach to it.

 

Let us know how it works.

 

Happy Tweening!

I was looking for this! But didn't know how to search for this  Thanks a lot!!!!