flutter_animate_on_scroll

Description:

flutter animate on scroll

Flutter_animate_on_scroll #
Enables you to create flutter animations on scroll, faster, efficient and with less code.
Features #

Stunning default animation
Customizable animation

Getting started #
Note: Make sure to use [SingleChildScrollView] and attach [context.scrollController] to your controller
Put the dependency inside your pubspec.yml and run packages get.
Usage #
Provide required [GlobaleKey] and child [Widget], you can play with animation delay, curves, duration...
import './src/components/custom_info.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate_on_scroll/flutter_animate_on_scroll.dart';

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
controller: context.scrollController,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20).copyWith(top: 80),
child: Column(
children: [
FadeIn(
globalKey: GlobalKey(),
child: const CustomInfo(name: 'Fade In'),
),
const SizedBox(height: 20),
FadeInDown(
globalKey: GlobalKey(),
delay: 200.ms,
child: const CustomInfo(name: 'Fade In Down'),
),
const SizedBox(height: 20),
FadeInUp(
globalKey: GlobalKey(),
delay: 400.ms,
child: const CustomInfo(name: 'Fade In Up'),
),
const SizedBox(height: 20),
FadeInLeft(
globalKey: GlobalKey(),
delay: 600.ms,
child: const CustomInfo(name: 'Fade In Left'),
),
const SizedBox(height: 20),
FadeInRight(
globalKey: GlobalKey(),
delay: 200.ms,
child: const CustomInfo(name: 'Fade In Right'),
),
const SizedBox(height: 20),
const Divider(),
FadeOut(
globalKey: GlobalKey(),
delay: 400.ms,
child: const CustomInfo(name: 'Fade Out'),
),
const SizedBox(height: 20),
FadeOutUp(
globalKey: GlobalKey(),
delay: 600.ms,
child: const CustomInfo(name: 'Fade Out Up'),
),
const SizedBox(height: 20),
FadeOutDown(
globalKey: GlobalKey(),
delay: 800.ms,
child: const CustomInfo(name: 'Fade Out Down'),
),
const SizedBox(height: 20),
FadeOutLeft(
globalKey: GlobalKey(),
delay: 400.ms,
child: const CustomInfo(name: 'Fade Out Left'),
),
const SizedBox(height: 20),
FadeOutRight(
globalKey: GlobalKey(),
delay: 600.ms,
child: const CustomInfo(name: 'Fade Out Right'),
),
const SizedBox(height: 220),
],
),
),
),
);
}
}

copied to clipboard
Custom animation
import 'package:flutter/material.dart';
import 'package:flutter_animate_on_scroll/flutter_animate_on_scroll.dart';

import '../components/custom_info.dart';

class CustomAnimationExample extends StatefulWidget {
const CustomAnimationExample({super.key});

@override
State<CustomAnimationExample> createState() => _CustomAnimationExampleState();
}

class _CustomAnimationExampleState extends State<CustomAnimationExample>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _animation;

@override
void initState() {
_animationController = AnimationController(vsync: this, duration: 600.ms);
_animation = Tween<double>(begin: 0.3, end: 1.0).animate(
CurvedAnimation(parent: _animationController, curve: Curves.bounceInOut),
);
super.initState();
}

@override
void dispose() {
_animationController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
controller: context.scrollController,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20).copyWith(top: 80),
child: Column(
children: [
CustomAnimated(
animationController: _animationController,
animation: _animation,
globalKey: GlobalKey(),
child: ScaleTransition(
scale: _animation,
child: const CustomInfo(name: 'Custom Animation'),
),
),
const SizedBox(height: 20),
const Divider(),
const SizedBox(height: 220),
],
),
),
),
);
}
}

copied to clipboard
Video Demo #
https://github.com/FadiChaalab/flutter_animate_on_scroll/assets/58008170/25ed91f2-e2b0-4321-a077-b22248e69f55
Default Animations #
Fade Animation #


FadeIn
FadeInDown
FadeInLeft
FadeInRight
FadeInUp
FadeOut
FadeOutDown
FadeOutLeft
FadeOutRight
FadeOutUp

Slide Animation #


SlideInDown
SlideInLeft
SlideInRight
SlideInUp
SlideOutDown
SlideOutLeft
SlideOutRight
SlideOutUp

Rotate Animation #


RotateIn
RotateInDownLeft
RotateInDownRight
RotateInUpLeft
RotateInUpRight
RotateOut
RotateOutDownLeft
RotateOutDownRight
RotateOutUpLeft
RotateOutUpRight

Zoom Animation #

ZoomIn
ZoomOut

Text Animation #

Text typer animation with fade option
Text wavy effect