Box reverse Vue 3

[Will84]

Hi Guys,

 

I have problem my animations. When try use reverse for div with display:none the reverse doesn't work and show yourself again.

And I have question, How execute all animations some time? I need button, change color, hide title and show description some time.

 

Thanks!

See the Pen MWVNZxV by willian-aquino (@willian-aquino) on CodePen

[Cassie]

Hi there! You've got an vue click handler here on your element, which is calling a function with an event listener inside it, so every time you click on that component you're creating a new timeline and a new event listener.

Here's your demo in vanilla JS - working a ok.

See the Pen xxWvBWr?editors=1010 by GreenSock (@GreenSock) on CodePen

This thread should help you with vue 3 and storing a reference to a timeline to control on events

 

Good luck, pop back if you need more help.

[Will84]

Hi Cassie,

 

Thanks so much I will try here before, show you the result.

Thanks again!

 

 

[Will84]

Hi @Cassie it`s work!!!!

Follow your example and vue post I understand. We need use Vue livecicle  onMounted, I updated the code.

See the Pen MWVNZxV by willian-aquino (@willian-aquino) on CodePen

Thanks for help me!!!

[Cassie]

Oh no worries!

 

Glad that it's still onMounted in vue 3 - I was worried they'd switched it up and made it more like React ?

 

Well done!
 

[Rodrigo]

2 hours ago, Cassie said:

I was worried they'd switched it up and made it more like React