dart_gsap

Description:

dart gsap

An unofficial dart wrapper for GSAP (only free gsap).
This package works if you use dart web with webdev / Jaspr / and other dart web package ( not tested on Flutter).
You can create amazing animated web page:


⚠️

Please before use it, read the GSAP licence
This package was tested with GSAP 3.12.

Features #
Not all features of Gsap are implemented,



Lib/Plugin
Done




Gsap
✔️


Timeline
✔️


Tween
✔️


Observer
✔️


Flip
❌


ScrollTo
✔️


Easel
✔️


ScrollTrigger
❌


Draggable
❌


MotionPath
❌


Text
❌


RoughEase
❌


ExpoScaleEase
❌


SlowMo
❌


CustomEase
❌



Getting started #
Add Gsap and others plugins in your index.html like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script>

copied to clipboard
Usage #
Example in dart web
Future.delayed(Duration(milliseconds: 300), () {
var tl = Gsap.timeline(TimeLineOptions(
scrollTrigger: ScrollTriggerOptions(
trigger: '.container',
start: 'top center',
end: '+=400',
scrub: 1)));

tl.from('.box', {
'backgroundColor': '#28a92b',
'rotation': 360,
'scale': 0,
});
});

final section = Element.section()
..children.addAll([
Element.div()
..classes = ['section_scroll']
..children.add(HeadingElement.h2()..text = "Scroll down 👇"),
Element.div()
..classes = ['section_scroll', 'container']
..children.add(Element.div()..classes = ['box']),
Element.div()..classes = ['section_scroll'],
]);

copied to clipboard
You can find others examples for dart or for jaspr
Additional information #
Please refer to the Gsap doc