Once you use Greensock / TweenMax / TweenLite, you don’t really want to use anything else.
It’s fast, it’s feature rich, and it works on more browsers than dart itself.
This is a quick post on how to use the animation library, it’s surprisingly easy.
- First import the dart:js library
import 'dart:js';
-
Next, add dart.interop.js to your HTML after your own apps script tags.
Mine looks like this:
Now to call JS from dart you must follow the js-interop syntax, which I agree is a bit annoying – but one approach is to create a wrapper class / function for it.
- With that out of the way, here is an example of a Tweenmax call to modify the Y / Alpha values of a div:
// You can also just pass the element's ID instead to greensock
// but assuming we already retrieved it or may not have an id we would use this method
HTMLElement divToAnimate = querySelectorAll("#myDiv");
// Context refers to the JSContext, and retrieves global window objects
context['TweenMax'].callMethod("to", [divToAnimate
0.15,
new JsObject.jsify({
"delay" : 0.5,
"y": "40"
"autoAlpha": 0
})]);
// A simpler one for reference
context['TweenMax'].callMethod("to",["#myDiv", 0.15, new JsObject.jsify({x:100})]);
We can think of Context
as referring to the Window object in the javascript context. So we retrieve it, and then call a method on it. Passing the method name to
and then an array of parameters. For the last parameters, we create a new javascript object using the JsObject.jsify
method which takes a map of primitive types with strings as keys.
In the next post / or an update to this one, I will show you how to create a simple wrapper class to make using Greensock more like calling it from JS