# Interactions on a class for multiple elements

**URL:** <https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822>\
**Category:** Pinegrow WordPress Plugin\
**Created:** [March 14, 2023, 2:34pm UTC](https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822 "2023-03-14T14:34:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Guido](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/guido/32/4958_2.png) [@Guido](https://forum.pinegrow.com/u/Guido)\
**Post date:** [March 14, 2023, 2:34pm UTC](https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822/1 "2023-03-14T14:34:55Z")

</div>

Hi,

i am trying to setup an interaction that fadeinup on scroll into view. I would like to set it up on a selector called .fade-in. But i am not able to make it work with interactions.

The correct gsap way would be this:  
const boxes = gsap.utils.toArray(‘.box’);  
boxes.forEach(box =\> {  
gsap.to(box, {  
x: 300,  
scrollTrigger: {  
trigger: box,  
scrub: true  
}  
})  
});

Where the incorrect way would be this:  
const boxes = gsap.utils.toArray(‘.box’);  
boxes.forEach(box =\> {  
gsap.to(‘.box’, { // this will animate ALL boxes  
x: 300,  
scrollTrigger: {  
trigger: ‘.box’, // this will use the first box as the trigger  
scrub: true  
}  
})  
});

It seems like a generic ScrollTrigger mistake explained here:

> **[Most Common ScrollTrigger Mistakes](https://greensock.com/st-mistakes/#generic)**
>
> Are you guilty of any of the most common mistakes people make in their ScrollTrigger code? Nesting ScrollTriggers inside multiple timeline tweens Creating to() logic issues Using one ScrollTrigger or animation for multiple "sections" Forgetting to...

Is this a mistake in PineGrow? Or it just doesn’t has this functionality?

Thanks  
Guido

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [March 14, 2023, 4:46pm UTC](https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822/2 "2023-03-14T16:46:42Z")

</div>

Hi @Guido,

> **[Scroll Scene | Pinegrow Web Editor](https://pinegrow.com/docs/interactions/actions/scroll-scene/)**
>
> Use Scroll Scene action to animate the element as it scrolls in and out of view.

David

---

<div class="post-metadata">

**Author:** ![Guido](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/guido/32/4958_2.png) [@Guido](https://forum.pinegrow.com/u/Guido)\
**Post date:** [March 14, 2023, 5:15pm UTC](https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822/3 "2023-03-14T17:15:37Z")

</div>

Hi David,

Thanks. I know how to wok with the ScrollScene but if i try to target a selector that is being used on multiple elements it doesn’t work correctly. It seems to fire once and animate them all at once. Like the example they give in the Greensock doc.

It seems that pinegrow does it the wrong way but have no option to check the code that is outputted by Pinegrow.

Guido

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [March 14, 2023, 8:05pm UTC](https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822/4 "2023-03-14T20:05:48Z")

</div>

Hey Guido,

You cannot do this as efficiently as you’d like in Pinegrow. As @AllMediaLab said, you’d have to set this scroll scene on each of your boxes.

To me this seems like a Pinegrow bug. I would expect that because in a ScrollScene Animation the Target help popup states “On what element(s) should this animation be played”.

I would expect that you could put the selector as $.box and then in the animation applies itself to each unique instance it finds but I find the same thing, all boxes fade in at once.

I set this up and it does indeed identify multiple targets but within the animation, it targets all the boxes at once.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/15bca9b81e7541c5031740253a6698537acf7c5b.png)

My setup is;

```auto
.container
  .box
.container
  .box
.container
  .box

```

What’s the intention @matjaz of selecting multiple targets in the Animation panel?

---

<div class="post-metadata">

**Author:** ![Guido](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/guido/32/4958_2.png) [@Guido](https://forum.pinegrow.com/u/Guido)\
**Post date:** [March 15, 2023, 12:33pm UTC](https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822/5 "2023-03-15T12:33:25Z")

</div>

Hi Samuel,

Yes i am pretty sure it is a pinegrow bug. I don’t really see a use case where them animating all at once could be useful 😉

Let’s see what @matjaz has to say.

Thanks for your reply.

Guido

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [March 18, 2023, 8:57am UTC](https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822/6 "2023-03-18T08:57:59Z")

</div>

@Guido have you seen this? I’ve not tried it yet.

![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a12de51afa5dadd083059689e5cab7838e5cb7d7.png)

---

<div class="post-metadata">

**Author:** ![Guido](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/guido/32/4958_2.png) [@Guido](https://forum.pinegrow.com/u/Guido)\
**Post date:** [March 18, 2023, 2:07pm UTC](https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822/7 "2023-03-18T14:07:57Z")

</div>

Hi Samuel,

Yes have tried that also. didn’t work either. I tried every possible combination and nothing. So i just use GSAP for now and that works great.

Guido

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [March 28, 2023, 12:36pm UTC](https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822/8 "2023-03-28T12:36:36Z")

</div>

Take a look at this example:

https://pinegrow.online/@matjaz/wow-reveal-elements-on-scroll/

Here we have a Scroll Scene defined on the first image and then applied to all other images with Apply to many. In addition each image defines its own Show animation.

---

<div class="post-metadata">

**Author:** ![Guido](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/guido/32/4958_2.png) [@Guido](https://forum.pinegrow.com/u/Guido)\
**Post date:** [April 13, 2023, 12:30pm UTC](https://forum.pinegrow.com/t/interactions-on-a-class-for-multiple-elements/7822/9 "2023-04-13T12:30:54Z")

</div>

Completely forgot to reply

I will give it another try. If i still don’t succeed then i will comment here again. Also if i do succeed! 😉

Thanks,  
Guido