4 Replies Latest reply on May 18, 2015 6:07 AM by seriouscodecreator

    Greensock SplitText inside of Edge Animate solution?


      Is anyone willing to share their Greensock SplitText inside of Edge Animate solution? Thanks


      I have tried the following code:


      var Selement = sym.$("Heart-drawn-ffcc00-31percent");

      TweenMax.to(Selement, 3, {rotationY:360, repeat:-1, repeatDelay:1, transformOrigin:"center 90% -160"})



      // Gets an element. For example,

      // var element = sym.$("Text2");

      // element.hide();

      var equote = sym.$("quote");





      var mySplitText = new SplitText("equote", {type:"chars,words"}),

          tl = new TimelineMax({repeat:-1, yoyo:true, repeatDelay:2});





      TweenLite.set("equote", {css:{perspective:500, perspectiveOrigin:"50% 50%", transformStyle:"preserve-3d"}});



      var numChars = mySplitText.chars.length;



      for(var i = 0; i < numChars; i++){

        tl.from(mySplitText.chars[i], 0.8, {css:{y:getRandomInt(-75, 75), x:getRandomInt(-150, 150), rotation:getRandomInt(0, 720), autoAlpha:0}, ease:Back.easeOut}, i * 0.02, "dropIn");




      tl.staggerTo(mySplitText.chars, 4, {css:{transformOrigin:"50% 50% -30px", rotationY:-360, rotationX:360, rotation:360}, ease:Elastic.easeInOut}, 0.02, "+=1");





      function getRandomInt (min, max) {

          return Math.floor(Math.random() * (max - min + 1)) + min;




      end of code that I have tried


      The first two lines work by themselves & after adding the rest. The other lines do not work & they do not work after I remarked out the first 2 lines. I placed these all in a trigger at 0 (zero) on the timeline - this has worked for me in the past. I have other Edge Animate elements that do stuff and I have a trigger at the end of the animation that plays from 01 (just past zero) - I have found that looping and retriggering the first two lines of code stops its animation. "quote" is the name of an Edge Animate text element.  In the code above I changed "#quote" to "equote", other than that, I think this is Greesock's standard code.


      I  may be missing this css class or the translate3d command:


        -webkit-transform: translate3d(0, 0, 0);





        pointer-events: none;