Motion has made web animation easier than ever. Animations are integral to modern web design, driving attention and elevating UI/UX.

Source code here.

The following design is inspired by Lattice. It showcases a feature callout section consisting of 4 elements:

• Infinite Vertical Scrolling Text
• Animated Path Transition (Plus → Arrow)
• Animated Tongue CTA
• Synchronized Animation on Hover

With Motion, Tailwind, and Shadcn, these are quick to implement. Let's start with the foundation: an infinitely vertical scrolling text.

Duplicate the text, then animate translateY on motion.div for an infinite scroll effect.

Using GPU-friendly transforms (transform-gpu, will-change, backfaceVisibility) ensures smooth performance, while the gradient overlays fade the top and bottom edges.

This part is tricky because the full SVG path for the plus and arrow icons includes movement coordinates. This means using flubber can't animate it smoothly, and you'll notice flickering at the end of the animation if you use the full SVG path. To fix this, we split the plus and arrow into path segments so each segment can transition cleanly.

When isHovered changes, we swap between the two path sets, and each motion.path animates its d attribute for a smooth transition.

Sliding elements up and down is straightforward in Motion. Using AnimatePresence and motion.dev we create the slide effect by animating the position, opacity, and scale.

This animation makes the panel move down and fade in when isHovered is true, and move up and fade out when isHovered is false.

Putting it all together just requires some shared isHovered state in a parent component. The CardContainer passes the state to IconToPlus and CardTongue so they animate together.

When hovered, the icon morphs from a plus into an arrow and a sliding "tongue" panel appears beneath the card.