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