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:

example gsap observer example gsap sxrollTo

⚠️

  • 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

Libraries

dart_gsap