Jumpy

Febraury 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 type { ImageItem } from "src/types";
import Jumpy from "../butter/Jumpy.astro";

const example: ImageItem[] = [
  {
    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

Rotación aleatoria de imágenes
Animaciones suaves con GSAP
Interactividad al pasar el mouse
Personalización flexible
Compatibilidad con enlaces anchor

Root

Prop	Default	Type	Description
`images`	[]	`Image[]`	Array of image objects with `src`, `alt`, and optional `href` property.
`size`	’medium’	`'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.5	`number`	Duration of the animations in seconds.

Examples

Whith text

Thanks for visiting! Reach me on

./src/components/ui/ JumpyText .astro

---
import Jumpy from "../butter/Jumpy.astro";

const images = [
  {
    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
        images={images}
        wrapperStyles="!ring-0"
        size="small"
        spacing="-ml-4 md:-ml-5"
        spacingHover={20}
      />
    </div>
  </span>
</h1>