• With GSAP Context, we can pass class names directly into our timeline, and it will only target children of the current component.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".your-section").forEach((component) => {

		gsap.context(() => {
			let tl = gsap.timeline();
			tl.from(component, { opacity: 0, y: "2rem" });
			tl.from(".child-image", { scale: 1.2 }, "<");
		}, component);

	});
});
</script>

• Without GSAP Context....

tl.from(component.querySelectorAll(".child-image"), { scale: 1.2 }, "<");

• With GSAP Context....

tl.from(".child-image", { scale: 1.2 }, "<");

• Add attribute name of data-low-power-hidden to custom element with video tag
• Include code in site settings footer code
• Video will have opacity 0 until it starts playing. Since it never starts playing in lower power mode, it will remain hidden.

<style>
[data-low-power-hidden] { opacity: 0; transition: opacity .3s ease; }
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll("[data-low-power-hidden]").forEach(video => {
		const reveal = () => video.style.opacity = "1";
		video.addEventListener("playing", reveal);
		if (!video.paused && video.readyState >= 2) reveal();
	});
});
</script>

• Include code in site settings head code
• Add class in style panel of u-prevent-flicker to your animated element or parent of the animated elements
• Remove class with JS or Webflow Interactions before the animation starts
• Element will only be hidden in browsers that support JS.

<style>.u-prevent-flicker { visibility: hidden; }</style>
<noscript><style>.u-prevent-flicker { visibility: visible; }</style></noscript>

• Add this CSS to an embed on your page
• Give your animated text element a class of u-split-fix

<style>
.u-split-fix div[style*="overflow: clip;"] { padding-block: 0.5em; margin-block: -0.5em; }
.u-split-fix div[style*="overflow: clip;"][style*="display: block"]:not(:first-child) { margin-top: -1em; }
.u-split-fix div[style*="overflow: clip;"][style*="display: block"]:not(:last-child) { margin-bottom: -1em; }
.u-split-fix div[style*="overflow: clip;"] { padding-inline: 0.2em; margin-inline: -0.2em; }
</style>

<link rel="stylesheet" href="https://unpkg.com/lenis@1.2.3/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.2.3/dist/lenis.min.js"></script>
<script>
let lenis;
document.addEventListener("DOMContentLoaded", () => {
  lenis = new Lenis({
    lerp: 0.1,
    wheelMultiplier: 0.7,
    gestureOrientation: "vertical",
    normalizeWheel: false,
    smoothTouch: false,
  });

  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);
});
</script>

• Run lenis.stop() to disable scroll
• Run lenis.start() to enable scroll