Jump to content
Search Community

asherritt

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by asherritt

  1. 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?

  2. 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", []);
    }
×
×
  • Create New...