Media Between Text

DemoCode

Open in

that's a nice (

) chair!

Artwork by Joffey

npx shadcn@latest add "https://fancycomponents.dev/r/media-between-text.json"

The component is extremely simple, and only consists of two text elements and a media element (either an image or a video). The trick for the smooth animation is to use layout animations on the two texts, so they smoothly transition when the media element is revealed. You can trigger the media reveal animation by hover, ref, or inView:

• hover: The media will animate when you hover over the component
• ref: You can call the animate and reset methods exposed via a ref to manually control the animation
• inView: The media will animate when the component is in view. You can pass an useInViewOptionsProp prop to customize the in view detection. Refer to the motion documentation for more details.

You can also customize the animation by passing a animationVariants prop. Please use animate and initial variants. Refer to the motion documentation for more details.

Scroll

Scroll down to trigger the animation. In this case, you can pass down a containerRef prop to the component to track when elements come into view within that specific container, rather than the entire viewport. This is useful when you want to trigger animations based on scrolling within a specific scrollable container.

Artworks by Tim Rodenböker, polyhop, Andreion de Castro, Lorraine Li

Vertical & Ref

You can also style the whole container, the media element, and the text elements separately. In this example, we use a column-layout to create a vertical effect. The animation can also be triggered from outside the component, by calling the animate and reset methods exposed via a ref. Click on the "Open" button to trigger the animation.

DemoCode

Open in

Open

Artificial

Intelligence

Video from chrbutler.com