How can I play one animation and reverse the other animation?

[aydinvivik]

Hello, I have 2 divs and 2 buttons to run them. I can create separate timelines for these two animations, but I don't want to rewrite the same code for the same animation. How can I make it work as 2 different divs and 2 different buttons over a single animation? 
 

Codepen demo is below. When I searched in the forum I found a similar example, but in that example it is run from the obj index, but since the location of the buttons and divs can change in me, this time the wrong animations can work with the wrong index. How can I make it work with data-attribute or more differently with button mapping?

 

See the Pen OJrYVMX by vivik (@vivik) on CodePen

[Carl]

the trick is to keep track of the active item or active animation in a variable.

 

in my demo below you will see that every time you click on a pill shape the currently expanded item closes

 

See the Pen YzGpXWO by snorkltv (@snorkltv) on CodePen

 

this demo from @PointC looks pretty close to what you are doing as well

 

See the Pen popwopd by PointC (@PointC) on CodePen

 

 

 

[aydinvivik]

7 minutes ago, Carl said:

the trick is to keep track of the active item or active animation in a variable.

 

in my demo below you will see that every time you click on a pill shape the currently expanded item closes

 

 

 

 

this demo from @PointC looks pretty close to what you are doing as well

 

 

 

 

 

 

Thank you for your feedback and yes @PointC's example is the one I found but I have a problem with it. If I change the location of the boxes, the buttons run different boxes from the same index.

 

You can see it in the example below.

 

See the Pen OJrYVqx by vivik (@vivik) on CodePen

[Carl]

Each button has a data-target attribute which is the id of the element it should animate

 

See the Pen LYMopVZ?editors=1010 by snorkltv (@snorkltv) on CodePen

 

<div class="targets">
    <div class="box blue" id="box3">3</div>
    <div class="box red" id="box1">1</div>
    <div class="box orange" id="box4">4</div>
    <div class="box purple" id="box5">5</div>
    <div class="box green" id="box2">2</div>
  </div>
  <div class="buttons">
    <button data-target="#box5">5</button>
    <button data-target="#box1">1</button>
    <button data-target="#box2">2</button>
    <button data-target="#box4">4</button>
    <button data-target="#box3">3</button>
  </div>

The index or order of elements no longer has any importance.

 

hope this helps

[aydinvivik]

3 minutes ago, Carl said:

Each button has a data-target attribute which is the id of the element it should animate

 

 

 

 

<div class="targets">
    <div class="box blue" id="box3">3</div>
    <div class="box red" id="box1">1</div>
    <div class="box orange" id="box4">4</div>
    <div class="box purple" id="box5">5</div>
    <div class="box green" id="box2">2</div>
  </div>
  <div class="buttons">
    <button data-target="#box5">5</button>
    <button data-target="#box1">1</button>
    <button data-target="#box2">2</button>
    <button data-target="#box4">4</button>
    <button data-target="#box3">3</button>
  </div>

The index or order of elements no longer has any importance.

 

hope this helps

That's exactly what I want, thank you very much.