GSAP Snippets

FOUC

Hide elements from production but show in editor:

<style>
.element {
  visibility: hidden;
}
 
html.wf-design-mode .element {
  visibility: visible;
}
</style>

Then use below for js:

// add after you set up your gsap timeline
function init() { // set up function
  gsaptimelinename.from(".element", {
    autoAlpha: 0, // Add js animation to bring back to visible
  });
}
 
// Rest of animations here
 
} // wrap animation in function
 
window.addEventListener("load", function (event) {
  init();
}); //listen to load event to start function