Jumpy

February 3, 2025

Animated card component with an elastic effect and cascading scaling when displayed. Its smooth animation, powered by GSAP, adds dynamism and visual appeal to any design. Ideal for highlighting information with style. Insipirated by @ajfreed_design & @GibsonSMurray

./src/components/UI/ JumpyMain .astro

---
import { Jumpy, type JumpyItem } from "@butter-js/ui";

const example: JumpyItem[] = [
  {
    src: "https://a0.muscache.com/im/pictures/hosting/Hosting-1124010734237889235/original/5d19481e-59be-49ab-a820-4af2ef1052aa.jpeg?im_w=720&im_format=avif",
    alt: "Imagen 1",
  },
  {
    src: "https://a0.muscache.com/im/pictures/hosting/Hosting-1124010734237889235/original/0dedcab2-8e2d-4aa9-9209-41abaa775b26.jpeg?im_w=720&im_format=avif",
    alt: "Imagen 2",
  },
  {
    src: "https://a0.muscache.com/im/pictures/hosting/Hosting-1124010734237889235/original/d97467a3-fe5a-4a2d-a15b-9870257eec66.jpeg?im_w=720&im_format=avif",
    alt: "Imagen 3",
  },
  {
    src: "https://a0.muscache.com/im/pictures/hosting/Hosting-1124010734237889235/original/7c1d094c-8e8d-4e5d-83e8-7fca80de7486.jpeg?im_w=720&im_format=avif",
    alt: "Imagen 4",
  },
  {
    src: "https://a0.muscache.com/im/pictures/hosting/Hosting-1124010734237889235/original/4449af5d-53a5-4909-b416-db802314894b.jpeg?im_w=720&im_format=avif",
    alt: "Imagen 5",
  },
];
---

<Jumpy images={example} />

Features

Random image rotation
Mouse hover interactivity
Flexible customization
Compatibility with anchor links

API Reference

Prop	Default	Type	Description
`as`	’div’	`string`	HTML element to render as the container component
`images`	[]	`JumpyItem[]`	Array of image objects with `src`, `alt`, and optional `href` property.
`size`	’large’	`'small' \| 'medium' \| 'large'`	tamaño de las imagenes (responsive by default)
`spacing`	’-ml-6’	`string`	margin between images (use margin-left from Tailwind)
`spacingHover`	40	`number`	Separation distance when hovering over images
`minRotation`	7	`number`	Minimum rotation angle for images in degrees
`maxRotation`	8	`number`	Maximum rotation angle for images in degrees
`initEase`	’elastic.out(0.5, 0.4)‘	`gsap.EaseFunction \| string`	GSAP easing function for initial animation
`hoverEase`	’power4.out’	`gsap.EaseFunction \| string`	GSAP easing function for hover animation
`imageStyles`	-	`string`	Additional classes for the image
`wrapperStyles`	-	`string`	Additional classes for the wrapper `Image`
`duration`	0.4	`number`	Duration of the animations in seconds.

Usage

Type: JumpyItem[]

---
import { Jumpy, type JumpyItem } from "@butter-js/ui";

const example: JumpyItem[] = [
  {
    src: "https://...",
    alt: "Image 1",
    href: "https://example.com", //To use links, set as="a" on the component
  },
  //...
];
---

Examples

With text

It adapts quite well when placed within your texts. Since it has the parameter as = "a", the href attribute is enabled, allowing it to function as a link while maintaining its animations.

Thanks for visiting! Reach me on

./src/components/UI/ JumpyText .astro

---
import { Jumpy, type JumpyItem } from "@butter-js/ui";

const images: JumpyItem[] = [
  {
    src: "https://cdn-icons-png.flaticon.com/512/3991/3991951.png",
    alt: "Dribbble logo",
    href: "https://dribbble.com/",
  },
  {
    src: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/1690643591twitter-x-logo-png.webp/2000px-1690643591twitter-x-logo-png.webp.png",
    alt: "X logo",
    href: "https://x.com/heeector00",
  },
  {
    src: "https://img.freepik.com/vector-premium/logo-linkedin_578229-227.jpg",
    alt: "LinkedIn logo",
    href: "https://www.linkedin.com/feed/",
  },
];
---

<h1
  class="text-center text-black dark:text-white text-4xl/tight md:text-5xl/tight lg:text-6xl/tight"
>
  <span>Thanks for visiting!</span>
  <span class="flex items-center gap-4"
    >Reach me on <div>
      <Jumpy
        as="a"
        images={images}
        wrapperStyles="!ring-0"
        size="small"
        spacing="-ml-4 md:-ml-5"
        spacingHover={20}
      />
    </div>
  </span>
</h1>