Interactions on a class for multiple elements

Pinegrow WordPress Plugin
1

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:

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

Thanks
Guido

2

Hi @Guido,

David

1 Like
3

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

4

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
image746×734 32.4 KB

My setup is;

.container
  .box
.container
  .box
.container
  .box

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

2 Likes
5

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 :wink:

Let’s see what @matjaz has to say.

Thanks for your reply.

Guido

6

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

image

7

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

8

Take a look at this example:

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.

1 Like
9

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! :wink:

Thanks,
Guido