ScrollTrigger Animations Visibility with Elementor

[sparks]

Hi there,

 

I'm pretty new to GSAP and love it so far. I only have one problem to which I can't find a solution. I'm usign GSAP together with WordPress and Elementor.

 

When I add a ScrollTrigger Animation for an Element that should Fade In on Scroll, it works absolutely fine in the browser.

 

Since I have to set the opacity of the Element to 0 via CSS, the Element won't be visible in the Backend-Editor of Elementor. This makes it hard to use both together.

 

Is there any workaround I'm not seeing? I tried to find body classes that are only available in the final page and not in the backend editor, so I can set the elements to opacity 0 only there.

 

I hope my question makes sense.. Thanks in advance!

 

 

 

 

 

[GreenSock]

It's tough to say without a minimal demo, but here are two ideas to try:

1. Don't set opacity: 0 in your CSS. Instead, do it via GSAP like with a .fromTo() tween, like: 

   gsap.fromTo(element, { opacity: 0 }, {
     opacity: 1, 
     scrollTrigger: {
       ...
     }
   });

    

2. -OR- you could try adding a <style> ... </style> in your custom content that specifies that opacity: 0 initial state(?)

[sparks]

That did the trick. Thank you very much!

 

For any other one having the same problem: I only used gsap.to(...) instead of gsap.fromTo(...)