Componentschevron_rightScaleIn

ScaleIn

Scale animation with smooth timing and slight overshoot for a satisfying pop-in effect.

9:41

signal_cellular_altwifibattery_full

ScaleIn

Preview Controls

Animation

Scales from 0 with spring

This is a CSS-based preview of the animation. The actual React Native component uses physics-based springs for a more natural feel.

Installation

Usage

Example.tsx

import { ScaleIn } from './components/ScaleIn';

export default function App() {
  return (
    <ScaleIn delay={100}>
      <Avatar source={userImage} />
    </ScaleIn>
  );
}

Full Component Code

ScaleIn.tsx

1import React, { useEffect } from 'react';
2import { ViewStyle, StyleProp } from 'react-native';
3import Animated, {
4  useSharedValue,
5  useAnimatedStyle,
6  withTiming,
7  withDelay,
8  Easing,
9} from 'react-native-reanimated';
10
11interface ScaleInProps {
12  children: React.ReactNode;
13  initialScale?: number;
14  delay?: number;
15  duration?: number;
16  style?: StyleProp<ViewStyle>;
17}
18
19export const ScaleIn: React.FC<ScaleInProps> = ({
20  children,
21  initialScale = 0,
22  delay = 0,
23  duration = 400,
24  style,
25}) => {
26  const scale = useSharedValue(initialScale);
27  const opacity = useSharedValue(0);
28
29  useEffect(() => {
30    const timingConfig = {
31      duration,
32      easing: Easing.out(Easing.back(1.5)), // Slight overshoot like CSS cubic-bezier
33    };
34    
35    scale.value = withDelay(delay, withTiming(1, timingConfig));
36    opacity.value = withDelay(delay, withTiming(1, { duration }));
37  }, []);
38
39  const animatedStyle = useAnimatedStyle(() => ({
40    transform: [{ scale: scale.value }],
41    opacity: opacity.value,
42  }));
43
44  return (
45    <Animated.View style={[style, animatedStyle]}>
46      {children}
47    </Animated.View>
48  );
49};
50
51export default ScaleIn;

Props

Name	Type	Default	Description
children	React.ReactNode	-	Content to animate
initialScale	number	0	Starting scale
delay	number	0	Delay before animation
duration	number	400	Animation duration in ms

arrow_backSlideIn

Bouncearrow_forward