Using Plx with multiple React components

[jabez-du-preez]

Hi,

I have a React website with multiple UI components that I want to animate when scrolling, with different properties. But all components will have a scale and opacity setting.

So far it's only animating text with scaling working as intended. The rest of my cards, grids, and images are not scaling at all. Whatever I set the starting scale value, it stays there.

Any chance you could assist?

[Stanko]

Hey, If you can re-create your example in codesandbox, stackblitz or something similar, I can take a look.

My blind guess would be that something else is overriding plx styles.

Cheers!

[jabez-du-preez]

Hey hey,

I've made this example on CodeSandbox, https://codesandbox.io/p/sandbox/angry-wave-g4vwfv?file=%2Fsrc%2FApp.js%3A53%2C12

Let me know if you're able to check it out.

I suspect maybe it's because the classNames are the same that it's only applying it to one element with the className. I'm tinkering with it now as well.

It's weird. It's only animating the opacity as I want it but not the scaling as well. I'm sure I'm just interpreting the documentation wrong.

Appreciate the help!

[Stanko]

Hey, I think the main thing is that you are using end: 300 instead of duration: 300 for scale. And because you have multiple instances, the first one is probably in the viewport for the first 300px and it works for it, but not for the others further down.

If I update that, I think everything works like expected: https://codesandbox.io/p/sandbox/priceless-darwin-rq9rpd?file=%2Fsrc%2Fcomponents%2FInfoHeading.jsx%3A18%2C20

I would also tweak a few minor things:

• I think using the same class for the Plx and it's content can often lead to unintended issues. I would keep them separate.
• If you want the animation to start from opacity: 0; transform: scale(0.25), it is handy to apply these initial styles to Plx to prevent any "jumps".
• And I would personally use startOffset to delay animations a little bit, for a nicer UX.

I hope this helps, cheers!

[jabez-du-preez]

Hey man,

You were right! I've been able to get all my content beautifully animated and it's sooooooooooo cool and minimal effort!

Truly awesome stuff and thanks so much for the help! I'll drop you a link to the site when I'm done with it 😁

Stay frosty!

[Stanko]

I'm glad it worked! And I would love to see it, so please share the link when you are done :)