sparks Posted July 18, 2022 Share Posted July 18, 2022 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! Link to comment Share on other sites More sharing options...
GreenSock Posted July 18, 2022 Share Posted July 18, 2022 It's tough to say without a minimal demo, but here are two ideas to try: 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: { ... } }); -OR- you could try adding a <style> ... </style> in your custom content that specifies that opacity: 0 initial state(?) Link to comment Share on other sites More sharing options...
sparks Posted July 18, 2022 Author Share Posted July 18, 2022 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(...) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now