π¬ 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 (likediv
,section
, etc.), e.g.,<MotionElement component="div">{children}</MotionElement>
. This renders the element as amotion.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!