cool_animation_flutter ✨

SlideFadeIn Animation ScaleBounce Animation

πŸ‡ΊπŸ‡Έ English | πŸ‡°πŸ‡· ν•œκ΅­μ–΄


πŸ‡ΊπŸ‡Έ English

A Flutter package that helps you apply cool animations very easily and concisely. No more complex AnimationController and StatefulWidget setups; just wrap your widgets to implement smooth and natural interactions. From simple appearance effects to advanced sequential list animations, create the coolest UX with the least code.


✨ Key Features

  • Effortless Implementation: Smooth animations with just a few lines of code.
  • Scroll-Triggered: Automatically start animations when widgets enter the viewport (triggerOnVisible).
  • Sequential Animations: Easily create staggered entry effects for lists or groups.
  • Highly Customizable: Fine-tune duration, delay, curves, and offsets.
  • πŸš€ Expanding Library: More than 10+ cool interactions will be added soon.

πŸ“¦ Installation

Add this to your pubspec.yaml:

dependencies:
  cool_animation_flutter: ^0.0.4

🎬 Animation

1️⃣ SlideFadeIn

Smoothly slides and fades in from any direction. Perfect for page transitions or list items.

SlideFadeIn(
  direction: SlideDirection.fromBottom,
  duration: Duration(milliseconds: 600),
  child: MyCard(),
)

2️⃣ ScaleBounce

Scale up animation with an elastic bounce effect. Great for highlighting buttons or success icons.

ScaleBounce(
  initialScale: 0.5,
  peakScale: 1.2,
  duration: Duration(milliseconds: 800),
  child: SuccessIcon(),
)

πŸ”— Utilities

Sequential Animations (Staggered Animation)

Create staggered entries without manual calculations.

Column(
  children: buildSequentialAnimations(
    children: [Item1, Item2, Item3],
    builder: (child, delay) => SlideFadeIn(delay: delay, child: child),
  ),
)

πŸ›  Reference

SlideDirection (for SlideFadeIn)

  • fromBottom, fromTop, fromLeft, fromRight (+ Diagonals)
  • none (Fade only)



πŸ‡°πŸ‡· ν•œκ΅­μ–΄

Flutterμ—μ„œ λ©‹μ§„ μ• λ‹ˆλ©”μ΄μ…˜μ„ μ•„μ£Ό 쉽고 κ°„κ²°ν•˜κ²Œ μ μš©ν•  수 μžˆλ„λ‘ λ„μ™€μ£ΌλŠ” νŒ¨ν‚€μ§€μž…λ‹ˆλ‹€. λ³΅μž‘ν•œ AnimationController와 StatefulWidget을 맀번 λ§Œλ“€ ν•„μš” 없이, μœ„μ ―μ„ κ°μ‹ΈλŠ” κ²ƒλ§ŒμœΌλ‘œ λΆ€λ“œλŸ½κ³  μžμ—°μŠ€λŸ¬μš΄ μΈν„°λž™μ…˜μ„ κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ‹¨μˆœν•œ λ“±μž₯ νš¨κ³ΌλΆ€ν„° λ¦¬μŠ€νŠΈκ°€ 순차적으둜 μ˜¬λΌμ˜€λŠ” κ³ κΈ‰ μ—°μΆœκΉŒμ§€, κ°€μž₯ 적은 μ½”λ“œλ‘œ κ°€μž₯ λ©‹μ§„ UXλ₯Ό λ§Œλ“€μ–΄λ³΄μ„Έμš”.


✨ μ£Όμš” κΈ°λŠ₯

  • κ°„νŽΈν•œ κ΅¬ν˜„: 단 λͺ‡ μ€„μ˜ μ½”λ“œλ‘œ κ΅¬ν˜„λ˜λŠ” λΆ€λ“œλŸ¬μš΄ μ• λ‹ˆλ©”μ΄μ…˜.
  • 슀크둀 트리거: μœ„μ ―μ΄ 화면에 λ“€μ–΄μ˜¬ λ•Œ μžλ™μœΌλ‘œ μž¬μƒ (triggerOnVisible).
  • 순차 μ• λ‹ˆλ©”μ΄μ…˜: λ¦¬μŠ€νŠΈλ‚˜ κ·Έλ£Ή μš”μ†Œλ“€μ΄ μ‹œκ°„ μ°¨λ₯Ό 두고 λ‚˜νƒ€λ‚˜λŠ” 효과λ₯Ό μ‰½κ²Œ κ΅¬ν˜„.
  • 높은 μ»€μŠ€ν…€μ„±: 지속 μ‹œκ°„, μ§€μ—° μ‹œκ°„, 곑선(Curve), μ˜€ν”„μ…‹ 등을 자유둭게 쑰절.
  • πŸš€ 라이브러리 ν™•μž₯: κ³§ 10개 μ΄μƒμ˜ λ©‹μ§„ μΈν„°λž™μ…˜μ΄ 좔가될 μ˜ˆμ •μž…λ‹ˆλ‹€.

πŸ“¦ μ„€μΉ˜ 방법

pubspec.yaml νŒŒμΌμ— λ‹€μŒμ„ μΆ”κ°€ν•˜μ„Έμš”:

dependencies:
  cool_animation_flutter: ^0.0.4

🎬 μ• λ‹ˆλ©”μ΄μ…˜

1️⃣ SlideFadeIn

μ–΄λ–€ λ°©ν–₯μ—μ„œλ“  λΆ€λ“œλŸ½κ²Œ λ―Έλ„λŸ¬μ§€λ©° λ“±μž₯ν•©λ‹ˆλ‹€. νŽ˜μ΄μ§€ μ „ν™˜μ΄λ‚˜ 리슀트 ν•­λͺ© λ“±μž₯에 μ ν•©ν•©λ‹ˆλ‹€.

SlideFadeIn(
  direction: SlideDirection.fromBottom,
  duration: Duration(milliseconds: 600),
  child: MyCard(),
)

2️⃣ ScaleBounce

λ°”μš΄μŠ€ νš¨κ³Όμ™€ ν•¨κ»˜ 크기가 컀지며 λ“±μž₯ν•©λ‹ˆλ‹€. λ²„νŠΌμ΄λ‚˜ 성곡 μ•„μ΄μ½˜ 등을 κ°•μ‘°ν•  λ•Œ μ’‹μŠ΅λ‹ˆλ‹€.

ScaleBounce(
  initialScale: 0.5,
  peakScale: 1.2,
  duration: Duration(milliseconds: 800),
  child: SuccessIcon(),
)

πŸ”— μœ ν‹Έλ¦¬ν‹°

순차 μ• λ‹ˆλ©”μ΄μ…˜ (Staggered Animation)

μˆ˜λ™ 계산 없이 μš”μ†Œλ“€μ„ 순차적으둜 λ“±μž₯μ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€.

Column(
  children: buildSequentialAnimations(
    children: [ν•­λͺ©1, ν•­λͺ©2, ν•­λͺ©3],
    builder: (child, delay) => SlideFadeIn(delay: delay, child: child),
  ),
)

πŸ›  레퍼런슀

SlideDirection (SlideFadeIn μ „μš©)

  • fromBottom, fromTop, fromLeft, fromRight (+ λŒ€κ°μ„  λ°©ν–₯)
  • none (νŽ˜μ΄λ“œ 효과만 적용)

⬆️ μœ„λ‘œ 이동

Libraries

cool_animation_flutter
A package that provides various animation widgets and controllers.