DeltaFrog

I created a code pen, I have the characters fading in but how do I get them to fade in staggered, randomly instead of from the beginning of the word? https://codepen.io/chriscalabrese/pen/pmdVrz

Thanks so much for the quick reply guys! I'll give it a try and let you know if I get lost. Thank you!

Hello all! My client wants his Wordpress site main menu buttons text characters to fade in with a stagger so some of the letters fade in before others until everything is 100% opacity. I think the best way to do this is with SplitText. I'm really rusty on Greensock and applying the animation in Wordpress is where I'm sure I'll get confused. If I can get a good game plan going I'll be happy to reup my membership. Can anyone help?!

Is it possible to animate a curved line with GS? I want to draw a green line starting from point A to point B with a bezier curve? visual example:

I just had to assign a data type to a var var CAOpacity:Number = WindData.CA.opac.text()[0] TweenMax.to(map_mc.CA, .2, {colorTransform:{tint:WindData.CA.hexColor.text()[0]}, alpha:CAOpacity});

Hi Jack and everyone! I have some XML loading and I can pass a hex number to a colorTransform tween without a problem yay! ..but when I try it with a Alpha tween it doesn't not work. Can anyone help? Thanks in advance! This works: TweenMax.to(map_mc.CA, .2, {colorTransform:{tint:WindData.CA.hexColor.text()[0]}}); TweenMax.to(map_mc.NV, .2, {colorTransform:{tint:WindData.NV.hexColor.text()[0]}}); This works: TweenMax.to(map_mc.NV, 6, {alpha:.5}); This does not work: TweenMax.to(map_mc.NV, 6, {alpha:WindData.NV.opac.text()[0]}); This doesn't work even though WindData.NV.opac.text()[0] traces to the output window as .5 Here is my XML: <WindData> <CA> <PTCNetImpact><![CDATA[$(195,849,979.44)]]></PTCNetImpact> <peg><![CDATA[4.94%]]></peg> <hexColor><![CDATA[0xF26B27]]></hexColor> <opac><![CDATA[.5]]></opac> </CA> <NV> <PTCNetImpact><![CDATA[$(195,849,979.44)]]></PTCNetImpact> <peg><![CDATA[4.94%]]></peg> <hexColor><![CDATA[0xF26B27]]></hexColor> <opac><![CDATA[.5]]></opac> </NV> </WindData>

Ok I got it. Thanks for listening! var scenarioA2=xmlDoc.getElementsByTagName("ThroughputGauge"); var condition2a = parseFloat((scenarioA2.getElementsByTagName("scenarioA2")[0].childNodes[0].nodeValue)); window.condition2a = condition2a;

ugh

I need to convert the xml string to a literal number using parseInt():, that sound right Jack?

Hi Jack and GS peeps, Help! I'm successfully using this tween below to animate a number gauge up and down depending on the value I pass into condition1a. The problem is when I pull the number in from XML it adds to the value already in the output field instead of sending the gauge to the proper number. I don't know why it acts differently when I pull in from XML. Do I have to tell java the number from XML is a string or somthing? Any ideas? TweenMax.to(obj, .5, {value:condition1a, roundProps:["value"], ease:Linear.easeNone, onUpdate:function() { output.innerHTML = obj.value; output2.innerHTML = obj.value; tl.tweenTo(condition1a); // < this timeline tweens to the correct place, only the output number adds incorrectly. }}); When I set my number gauge value variable like this is works fine: window.condition1a = 27.28; When I pull from XML like shown below its act differently. var scenarioA1=xmlDoc.getElementsByTagName("ThroughputGauge"); window.condition1a = (scenarioA1.getElementsByTagName("scenarioA1")[0].childNodes[0].nodeValue); When I trace the variable is comes up as 27.28 so I know the XML is getting the correct number into the function. alert(condition1a); XML structure sample: <ThroughputGauge> <scenarioA1>27.28</scenarioA1> </ThroughputGauge> How do I get the XML passed variable to act the same as the one I set in java? Thanks everyone!

Is it possible to get the duration of tl.tweenTo(); tween? I'd like to pass it as a variable to another tween. Thanks!

Thanks Rodrigo tl.tweenTo(); worked perfectly.

It's fantastic. I'm a flash guy and I've recently switched to JS, it was nearly a seamless transition using GSAP v12.

I see that I can start the animation from a label with tl.play("skew") but is it possible to stop the animation at a label? Thanks

I figured this all out so no need to reply. Thanks.

Ah great, I will update my files. Also, how would I tween to zero or a specific number like 123 with this setup? Thank you for all the wisdom and guidance. I wish I had a better brain for this but I usually end up stumbling through it like a drunk monkey.

Alright I got this working in my file. Currently the value is not a round number, how do I add roundProps to the tween?

Awesome Carl, thank you so much. I'll try it now.

Arg no matter what I do I always manage to post in the wrong place... (hand meets forehead)

Thanks a lot Jack, I've made sure my plug ins are updated and I'm betting GS is all set up and working. I think the problem is my setup is fundamentally wrong. Any wisdom you can offer is greatly appreciated. I have 5 buttons that use this code you provided to add or subtract from the obj variable. It works great but if I press a button before the tween finishes it adds/subtracts to the current number in mid tween resulting in incorrect values. Each button should add 100 or subtract 100 to the end tween value even if the tween is in progress. I'm not even sure this is an overwrite issue. Would I have to append the tween to the end of the other? My other idea is that I have to do the math before the tween starts so my button is just always tweening to the current value. Haven't quite wrapped my head this. :S Here is a link to what I have done so far. (Link Removed) TweenMax.to(obj, .5, {value:obj.value-100, roundProps:"value", overwrite:"none", ease:Expo.easeOut,onUpdate:function() { element.innerHTML = obj.value; }}); } if(y == 'master-btn-on.jpg'){ theImg.src='images/master-btn-off.jpg' masterPower = "off"; TweenMax.to(masterDevice, .5, {css:{alpha:0}}); TweenMax.to(masterDevice, .5, {css:{scale: .2}, ease:Back.easeOut}); TweenMax.to(obj, .5, {value:obj.value+100, roundProps:"value", overwrite:"none", ease:Expo.easeOut,onUpdate:function() { element.innerHTML = obj.value; }}); }

I updated my files yesterday from that link so I think I'm up to date.

Is there a fancy way to call OverwriteManager.init() in javascript? My overwrite settings down't seem to be working.

Ah obj.value+10 is working.

How would I add to the current value? For example if the number is currently 200 and I want to add 300 making it 500 how would I write that? Something like: TweenMax.to(obj, 3, {value:+500,... Thank you Jack.

Bingo! Thanks Jack, glad you're on our side! *****