#GSAP code not working after use view transitions.

3 messages · Page 1 of 1 (latest)

hollow turret
#

Why my GSAP code not working after use view transitions.
Now I have an component:

HTML elements...
<script>
  gsap.to('h1 > span', {
    y: 0,
    stagger: 0.2,
    duration: 0.5,
    ease: 'back.inOut',
    delay: 0.2,
  })
</script>

When I insert <ViewTransitions /> in layout.astro, the code works when I first appear on the page, but when I switch to other pages and then switch back to this page, the code not working.

tawny adderBOT
#

Hi @hollow turret. 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 information extracts provided do not contain specific details about the interaction between GSAP (GreenSock Animation Platform) and Astro's View Transitions.

However, it's worth noting that Astro's View Transitions are a new platform API that enables native browser transition effects between pages. This was traditionally only possible in Single Page Applications (SPAs), but Astro 3.0 has brought this feature to the mainstream. When you use View Transitions, you can morph, fade, slide, and persist elements across pages.

If you're experiencing issues with your GSAP code after implementing View Transitions, it might be due to how these transitions are handled in Astro. I would recommend checking the Astro documentation (https://docs.astro.build/en/guides/view-transitions/) or the Astro GitHub issues (https://github.com/withastro/astro/issues) for more specific information or potential solutions to your problem.

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