FOUC when there are GSAP animations above the fold

How To
22

ok, I understand, thank you.!
But how nice it is if it works out of the box. This is probably a very common scenario that people use page transitions and also animations on the page.

23

Out of the box, this will unfortunately cause more problems than it solves, as the situation is technically much more complex and varies too much depending on the setup. That’s why I deliberately deactivated it :slight_smile:

1 Like
24

Thank you for the explanation. However, for people like me, who have no coding experience and who I assume are the target audience for your plugin, this feature is really crucial. I think many users who purchase this plugin are beginners who expect that most functionalities will be available through an intuitive drag-and-drop interface or easy to implement. If some elements require coding, it would be great if there were some documentation or a tutorial that would explain step by step how to use them.

The tutorial you shared concerns FOUC, which works out of the box. Is there, therefore, an instruction on how to enable page transitions so that these two functionalities don’t conflict with each other?

Once again, thank you for your work and for being open to feedback. I truly appreciate the effort you’ve put into this project!

25

As mentioned in the documentation, Page Transitions with PJAX are technically so complex and individualized that we deliberately do not offer technical support for extending functionality beyond what is provided. You can read more about why this is the case here:

:link: Bricksforge Documentation – Page Transitions

This compromise was the only reason (which was communicated to the community) why we developed this extension in the first place.

I understand your frustration, and this is absolutely not meant in a negative way, but technically, it’s just not possible to make PJAX work automatically in every situation. PJAX always requires additional custom work and is one of the Bricksforge extensions designed more for advanced users.

Preventing FOUC isn’t actually that difficult though. As described on the GSAP website, simply hide the elements that cause FOUC initially with CSS and make it part of your animation to reveal them once the page has loaded.

If you need help with this, feel free to create a post in the Facebook group. There are lots of friendly people there who are always happy to help! :slightly_smiling_face:

1 Like