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

    Greensock SplitText inside of Edge Animate solution?

    seriouscodecreator

      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:

      #quote{

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

        font-size:44px;

        line-height:50px;

        color:#000000;

        z-index:-1;

        pointer-events: none;

      }

       

       

      Thanks

       

      Bob