u/RadekAdamczyk

Hi,

I'm having trouble creating an animation that loops and swaps words in a sentence, moving them along the X axis.

Assumptions:

• I have the words in an array; when rendered, they can't duplicate each other.
• Everything must be SEO-friendly.
• The animation should be smooth, with no jumps, especially between the last and first element of the array.
• The first word should be rendered immediately upon page load (the goal is for this animation to be in the hero section).

Questions:

1. What do you recommend for this? Framer Motion or GSAP.
2. Have you seen code related to this post anywhere? YouTube / CodePen, etc.

Since 2021, I've been working in the React ecosystem, from classic React, through the dead Gatsby, to NextJS, which I adore. I like many things about this framework, but for the past month I've been having a love affair with Astro – many things have won me over, such as routing and the tool's lightweight nature. Unfortunately, I often feel confused by the differences between Astro and NextJS, and I realize that this is a matter of familiarity with standard JavaScript.

The same applies to styling websites and web applications. I've been working with CSS since 2016, and since the release of TailwindCSS v4. CSS development has accelerated rapidly recently, with the addition of many revolutionary features.

Questions:

1. When should I use NextJS and when should I use Astro in the context of websites, considering that I'll be using a lot of query templates, a search engine, filtering, a multi-stage form, and animations from GSAP?
2. If I'm more comfortable in the React/NextJS ecosystem, is it worth switching to AstroJS?
3. What are your pro tips for TailwindCSS, especially custom breakpoints and font size?
4. How do I combine modern CSS with TailwindCSS?