How to make text appear radially?

[mental garnet]

Hello, I wanted to create an animation with GSAP to make a text fade in from the center out

So I tried to do it and got the following code:

Feature.astro
<script>
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

gsap.timeline({
    scrollTrigger: {
        trigger: ".feature",
        start: "center bottom",
        end: "bottom bottom",
        scrub: true,
    },
}).to(".feature", {
    "--progress": "0%",
});

</script>

<div class="feature max-w-[25%]">
<h2 class="text-8xl font-heading font-semibold">
Dummy Text (longer)
</h2>
</div>

<style>
.feature {
--progress: 100%;
mask-image: radial-gradient(
circle at center,
transparent,
#fff var(--progress)
);
mask-size: 200%;
}
</style>

And while it works, it has two issues:

1. At the start of the animation, the edges of the text are visible
2. As it is a gradient, there isn't a clear division between appeared and disappeared

Can you help me solve this issues?

[brisk moss]

Hi @mental garnet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. The knowledge sources provided do not contain specific information on how to create a radial text appearance animation with GSAP in Astro.

However, you might find it helpful to review the Astro documentation on view transitions (https://docs.astro.build/en/tutorials/add-view-transitions#customize-transition-animations) and the GSAP documentation (https://greensock.com/docs/) for more information on how to customize your animations.

If you're still having trouble, consider asking for help on the Astro Discord server (https://discord.com/channels/830184174198718474/1180096580397838366) or opening an issue on the Astro GitHub page (https://github.com/withastro/astro/issues).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: