dart_gsap 0.2.0

Gsap wrapper for dart.

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>

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'],
      ]);

You can find others examples for dart or for jaspr

Additional information

Please refer to the Gsap doc