Typo Animation – GSAP Wipe Effect
This GSAP-based typo animation applies a wipe effect to text elements. When the attributes are set, the animation triggers as the element scrolls into view. You can control when it starts, how long it runs, and at which scroll offset it activates. The result is a smooth reveal where each text block is wiped in, giving a clean and dynamic entrance effect.
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/CustomEase.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
gsap.registerPlugin(CustomEase);
CustomEase.create("main", "0.65, 0.01, 0.05, 0.99");
const containers = document.querySelectorAll('[data-anim="menu-link"]');
containers.forEach(container => {
const delayAttr = parseInt(container.getAttribute('data-anim-delay')) || 0;
const animDurationAttr = parseInt(container.getAttribute('data-anim-duration')) || 800;
const offsetPercent = parseInt(container.getAttribute('data-anim-offset')) || 0;
// ⚠️ Set initial state: hidden
gsap.set(container, {
opacity: 0,
yPercent: 140,
rotate: 10
});
// Convert offset % to px
const offsetPixels = window.innerHeight * (offsetPercent / 100);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
gsap.to(container, {
yPercent: 0,
rotate: 0,
opacity: 1,
duration: animDurationAttr / 1000,
delay: delayAttr / 1000,
ease: "main"
});
observer.unobserve(container);
}
});
}, {
threshold: 0.01,
rootMargin: `0px 0px -${offsetPixels}px 0px`
});
observer.observe(container);
});
});
</script>
Adding Code to Webflow
You can copy HTML, JavaScript, or CSS directly from the examples on this site.
Once copied, there are two ways to add the code into your Webflow project:
- Embed Element :
Insert a Custom Code Embed block on your page and paste the code inside.
This is best for snippets that should run or display only in a specific section.
- Site-wide Custom Code :
Open Project Settings → Custom Code and paste the snippet into the Head or Before section. This is best for scripts and styles that must load on every page.
Using GSAP Animations
For animations built with GSAP, you can either copy the script into your page as described above, or activate them directly in the GSAP Panel in Waveflow. This allows you to manage and preview GSAP-based interactions without leaving the Designer.
