I noticed something about scrolltriggers that might help others

[Spider-Ian]

While I was setting up scroll triggers on a local environment they were working fine, but when I placed the code on the page for some reason <p> elements weren't animating.

 

I triple checked the loading order and everything was correct. When I refreshed the page after scrolling to the bottom everything worked fine. So I tried setting the problematic elements to gsap.set("#p01, #p02, ...", { opacity: 1 }); before the gsap.from calls and it fixed these elements not animating.

 

I still don't know why it was only affecting <p> elements. Maybe the rich text editor in Umbraco was hindering it, but the added .set step fixed it.

[Rodrigo]

Hi @Spider-Ian and welcome to the GSAP Forums!

 

I have no experience with Umbraco (in fact didn't even knew it existed before your post 😄), but for what you mention maybe some CSS being applied by it or the theme you're using, could be causing this. Is very odd to have to use a set instance before creating a from instance, again it would seem that something is adding an opacity: 0 to your elements and because the way from instances work, they never became visible.

 

To clarify a from instance takes the element from the value you pass to it to the value it has naturally before creating the from instance, so if you have an element with opacity: 1 and create a .from() instance that takes the element from opacity: 0, GSAP animates the element from 0 to the value it had before, 1 in this case. If the element has an opacity of 0 before creating the from instance, GSAP will take the element from opacity: 0 to the value it had before, which also happens to be 0, so visually nothing happens but GSAP is doing what you're telling it to do.

 

If I was you I'd check either some CSS or perhaps a previously created from instance that could be taking the element from opacity: 0 as well and use immediateRender false to prevent this:

https://gsap.com/docs/v3/GSAP/gsap.from()#immediateRender

 

Hopefully this helps

Happy Tweening!