I wanted to use SplitText in a Google Dart app but had problems using the staggerFrom method as described in the examples. I didn't get errors, it just wouldn't work. Maybe it's a scope issue? I used a timeline instead. Here is my working code. On load, set up the text so it can be animated in
JsObject splitText;
JsArray splitChars;
void setupAnimation(){ // setup tagline splitText = new JsObject(context['SplitText'], ["#tagline", {"type":"words,chars"}]); splitChars = splitText["chars"]; for (var i = 0; i < splitChars.length; i++) { var setArgs = new JsObject.jsify({"perspective" : 400, "opacity": 0, "scale": 0, "y": 80, "rotationX":180, "transformOrigin":"0% 50% -50" }); context['TweenLite'].callMethod("set",[splitChars, setArgs]); } } When you want to run the animation: void animateTagline(){ var completeArgs = new JsObject.jsify({"onComplete": taglineAnimationComplete }); var timeline = new JsObject(context['TimelineMax'], [completeArgs]); for (var i = 0; i < splitChars.length; i++) { num delay = i*.035; var tweenArgs = new JsObject.jsify({"opacity":1, "scale":1, "y":0, "rotationX":0, "ease":"Back.easeOut"}); var tween = new JsObject(context['TweenLite'], [splitChars, 1, tweenArgs]); timeline.callMethod("insert", [tween, delay]); } timeline.callMethod("play", []); }
void taglineAnimationComplete(){
splitText.callMethod("revert", []);
}