🎬 How to Add Animations in JetShip

JetShip utilizes Framer Motion, a powerful animation library for React, to bring smooth, engaging animations to your user interfaces. This guide will walk you through the different types of animations used in JetShip and how to easily implement them in your components.

🎞️ Motion Components

JetShip offers a collection of motion components that you can use to animate elements with ease. These components leverage Framer Motion's capabilities for smooth animations.

1. ⚡ MotionElement and MotionFadeElement

These components, located in packages/ui/src/components/ui/motion-element.tsx, are the backbone of all animations in JetShip. They use Framer Motion’s motion to wrap your elements and apply animations.

• MotionElement: A wrapper component that simplifies adding animations to any HTML element. Instead of manually importing motion, you can pass the desired HTML element type as a prop (like div, section, etc.), e.g., <MotionElement component="div">{children}</MotionElement>. This renders the element as a motion.div, allowing you to easily animate the component.

• MotionFadeElement: This component is specifically designed to add fade-in and fade-out animations. It allows you to create fade effects with minimal configuration, handling common animation properties automatically.

2. 🌫️ BlurFade

The BlurFade component creates a smooth blur fade-in and fade-out effect. It is built using Magic UI's BlurFade component and is located in packages/ui/src/components/ui/blur-fade.tsx. You can find this component used in the Additional Features and Reviews sections, where it creates a blurred background effect as content fades in and out.

For more details, check the BlurFade Documentation.

3. 🔲 BorderBeam

This component creates an animated beam of light that travels along the border of its container. It’s located in packages/ui/src/components/ui/border-beam.tsx and is used in the FeaturesImageOutlined component.

4. ☄️ Meteors

The Meteors component creates a meteor shower animation effect. It's located in packages/ui/src/components/ui/meteors.tsx and can be found in the CTA Buy Now component.

5. 🔢 NumberTicker

This component animates numbers to count up or down to a target value. It is located in packages/ui/src/components/ui/number-ticker.tsx and is used in our Pricing components to animate the pricing values.

6. 🌈 RainbowButton

The RainbowButton component adds a rainbow effect to buttons. Located in packages/ui/src/components/ui/rainbow-button.tsx, it is used in various Hero Section components to draw attention to important buttons.

7. ✨ ShimmerButton

The ShimmerButton component provides an animated shimmer effect on buttons. It is located in packages/ui/src/components/ui/shimmer-button.tsx and can be found in our Pricing components.

---

🎨 Types of Animations

1. 👀 Fade-in Animations

One of the most commonly used animations is the fade-in effect. This is often combined with slight movements for a smooth, engaging user experience. Here’s how to implement it:

<MotionFadeElement
  component='div'
  variants={{
    hidden: { y: 30 }, // Start below the screen
    show: {
      transition: { delay: 0.2, duration: 0.4 }, // Fade-in with slight movement
      y: 0
    }
  }}
  className='your-classes-here'
>
  {/* Your content */}
</MotionFadeElement>

This creates a smooth fade-in effect, where the element fades in while moving upwards from an initial position.

2. 🌊 Floating Animations

For elements that need continuous movement (like icons or illustrations in hero sections), use the animate prop with infinite transitions:

<MotionElement
  component='div'
  initial={{ opacity: 0 }}
  animate={{
    opacity: 1,
    y: [-5, 5], // Continuous vertical movement
    rotate: [-20, 20], // Continuous rotation
    transition: {
      y: { repeat: Infinity, repeatType: 'mirror', duration: 2.3 },
      rotate: { repeat: Infinity, repeatType: 'mirror', duration: 2.3 }
    }
  }}
  className='your-classes-here'
>
  {/* Your floating element */}
</MotionElement>

3. 📜 Scroll-triggered Animations

To trigger animations when an element comes into view, use this approach:

<MotionElement
  component='div'
  initial='hidden'
  whileInView='show'
  viewport={{ once: true }} // Trigger once when the element enters the viewport
  variants={{
    hidden: { opacity: 0 },
    show: { opacity: 1, transition: { delay: 0.8, duration: 0.4 } }
  }}
>
  {/* Content that animates when scrolled into view */}
</MotionElement>

This is particularly useful for creating engaging scrolling experiences, where content animates as it enters the viewport.

---

🏅 Animation Best Practices

1. ⏱️ Timing and Delays

JetShip uses consistent timing for animations:

• Default delay: 0.2 seconds
• Default duration: 0.4 seconds

const defaultProps = {
  transitionDelay: 0.2,
  transitionDuration: 0.4
}

This ensures a smooth, consistent animation experience across the app.

2. 🗂️ Staggered Animations

For lists or groups of elements, stagger the animations by incrementing the delay:

{
  items.map((item, index) => (
    <MotionFadeElement
      key={index}
      variants={{
        hidden: { y: 30 },
        show: {
          transition: {
            delay: transitionDelay * index,
            duration: transitionDuration
          },
          y: 0
        }
      }}
    >
      {item}
    </MotionFadeElement>
  ))
}

This makes the animations feel more dynamic and natural, especially for lists or complex content.

3. ⚡ Performance Optimization

• Use viewport={{ once: true }} to trigger animations only once (ideal for scroll-triggered animations).
• Animate transform properties (scale, rotate, x, y) rather than layout properties (e.g., width, height).
• Add the will-change CSS property for better performance on complex animations.

🎉 Conclusion

Animations in JetShip are crafted to enhance the user experience while maintaining performance. By using the provided motion components and following the best practices outlined in this guide, you can create smooth, engaging animations that are both effective and efficient.

Remember to:

• Use animations purposefully to highlight key actions or elements.
• Keep the timing consistent across your app.
• Optimize animations for performance, especially on mobile devices.
• Test animations on various screen sizes and devices to ensure a smooth experience for all users.

For more examples, explore the components in packages/ui/src/blocks where you’ll find a variety of animation implementations you can use directly in your app!