Is there a way to send a click to multiple entities, to run animations in parallel?

[DavidAntliff]

For example, consider layout: 2-cols-header, with a md magic-move code block on the left, and another on the right and I want to use magic-move to highlight/modify lines of code in both code blocks simultaneously.

---
layout: two-cols-header
---

# Test Slide

::left::

````md magic-move
```python
def foo():
    ...
```

```python
def foo():
    print("hello")
```

```python
def foo():
    print("hello, world!")
```
````

::right::

````md magic-move
```rust
fn foo() {
}
```

```rust
fn foo() {
    println!("hello");
}
```

```rust
fn foo() {
    println!("hello, world!");
}
```
````

At the moment, multiple magic-move blocks are activated serially, rather than in parallel. So I have to click through the left side's animation first, before the right side will receive clicks and move on from its initial state. Instead, I'd like to find a way to synchronise them so that they progress their animations together, both changing to their next state on each click.

Is there a way to direct single clicks to multiple objects?

[DavidAntliff]

Actually, let's take this a step back - what about just two simple columns with separate <v-clicks> sections?

---
layout: two-cols-header
---

# Test Slide

::left::

<v-clicks>

* Item 1
* Item 2
* Item 3

</v-clicks>

::right::

<v-clicks>

* Item 4
* Item 5
* Item 6

</v-clicks>

Let's imagine I want Item 1 and Item 4 to appear together on first click, then Item 2 and Item 5 to appear on second click, and finally Item 3 and Item 6 to appear on third click.

Is this possible?

[DavidAntliff]

Using a custom HTML/CSS layout, I had some limited success with this.

For text, each column reveals a row per click - great!

---

# Side-by-Side Text

<div class="row" v-click>
  <div class="item">Item 1</div>
  <div class="item">Item 4</div>
</div>
<div class="row" v-click>
  <div class="item">Item 2</div>
  <div class="item">Item 5</div>
</div>
<div class="row" v-click>
  <div class="item">Item 3</div>
  <div class="item">Item 6</div>
</div>

<style>
.row {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}
.item {
  width: 45%;
  text-align: left;
}
</style>

And for static code too:

---

# Side-by-Side Static Code

<div class="row" v-click>
  <div class="item">

```python
def foo():
    ...
```

  </div>
  <div class="item">

```rust
fn foo() {
}
```

  </div>
</div>
<div class="row" v-click>
  <div class="item">

```python
def bar():
    ...
```

  </div>
  <div class="item">

```rust
fn bar() {
}
```

  </div>
</div>

<style>
.row {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}
.item {
  width: 45%;
  text-align: left;
}
</style>

But it doesn't work for magic-move, because the code blocks don't appear until after the final click in their sequence:

---

# Side-by-Side MagicMove Code

<div class="row" v-click>
  <div class="item">

````md magic-move
```python {1|2}
def foo():
    ...
```
````

  </div>
  <div class="item">

````md magic-move
```rust {1|2}
fn foo() {
}
```
````

  </div>
</div>

<style>
.row {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}
.item {
  width: 45%;
  text-align: left;
}
</style>

[KermanX]

I think the at option is what you need. See https://sli.dev/guide/animations#positioning

[DavidAntliff]

Yes, thank you, that works perfectly.