Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

Greensock SplitText inside of Edge Animate solution?

$
0
0

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


Viewing all articles
Browse latest Browse all 9897

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>