asherritt
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by asherritt
-
-
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 inJsObject 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", []);}
Morph SVG Groups
in GSAP
Posted
I'd like to morph a SVG being used as a border image. How might I achieve that?
If I load an SVG in CSS or JS using "url(mysvg.svg)" how do I grab it to use with MorphSVG?