Jump to content
GreenSock

sorciereus

Members
  • Posts

    79
  • Joined

  • Last visited

Everything posted by sorciereus

  1. Thanks OSUblake, Went through this and pulled Shaun's demo, http://codepen.io/sgorneau/pen/OXBpzg?editors=0010 Without knowing where on the page it will be trafficked (as it goes out all across the web) Does it account for any position on page? Just triggers when it enters viewport?
  2. This would just be in general. So for instance I have a series of TweenMax or TimelineMax tweens that I'd like to trigger when the ad enters viewpoint. This is not rich media and is being served as HTML5 into publisher's sites.
  3. I recommend coding the GSAP in TimelineMax and then using the restart function.
  4. Hello. Been playing around with the ScrollMagic Tutorial but it's not giving me the results I want. Is there a simple method to trigger a GSAP animation sequence once the banner scrolls into the viewport?
  5. sorciereus

    Blur filters

    Hi. Old thread but needing help here. I used this code pen to apply a blur to image. Works great except it's only working on Chrome and Safari and not Firefox. Help? http://cdpn.io/omsrL
  6. I will try that thank you - has anyone else seen this on IE 11?
  7. Is there a private email address I can send the demo to? I'm really not supposed to be sharing the creative publically - the fixes you sent don't seem to do the trick - would love for you take a look at the animation as perhaps i'm overlooking something. Thanks so much for the fast response.
  8. This issue is back, and now it's in all versions of IE - including 11.
  9. Hello. I always use GSAP for my banner animation - and today (of course when we are up against a crazy deadline) all of our banners that are tweening transparent png's are showing a black outline around the pngs. It's strange because I've seen this bug with IE8 (which we don't support) but only when the images have a drop shadow, the drop shadow becomes solid. I've never seen this before and seems to be affecting all of our units that I've used transparent pngs on in the past. Is there something going on with the platform? This error is in all versions of IE. I'm calling TweenMax from: https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js Any fixes? Any ideas why this is happening? There are not drop shadows on these pngs. Here is an example line of code that is moving the pngs around TweenMax.to('#clouds3', 2.2, {alpha:0, x:"+=300", y:"-=140", ease:Power1.easeIn, delay:.5});
  10. Thanks very much for the replies. I appreciate both solutions and SplitText is super smooth! Rad!
  11. Hi all. Quick question. I'd like to tween the kerning/letter spacing on a line of text. Got it working but have a couple specific inquiries. I wasn't able to locate the exact documentation for the letterspacing tween effect. My line of code is: TweenMax.fromTo("#text1", 1, {letterSpacing:20, alpha:0}, {letterSpacing:10, alpha:1}); I'd like to add a delay and also I want the text to tween from the center rather than from the left - how do I do that as well? Here is the CSS: #text1 { font-family: 'Anderson 1938', 'anderson_1938regular', 'Helvetica', sans-serif; font-size:28px; font-weight:400; letter-spacing: 10px; color:#fff; position:absolute; top:38px; left:121px; text-align:center; z-index:10; } I thought maybe the text-align:center; would get it to animate from the center but no such luck. Thanks in advance for any direction!
  12. Thank you. Was needing the pure Javascript answer. Just didn't have the syntax quite right. Appreciated.
  13. Hi there. I'm trying to call some code on an interaction, for example,on a close button click, but I want the code to execute only if certain conditions are met. I think I might have formatted that portion (the if statements) as AS3 (as that's what I'm more comfortable with). Can you take a look and tell me why my if statements aren't firing? It's a huge piece so a codepen would be tricky to recreate, but here is the code in question, hopefully it's enough to solve: function minimizeShoe() { //TweenMax.set("#plus1", {css:{zIndex:501}}); TweenMax.to("#panel2_box1", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:0, delay:.2, transformOrigin:"left bottom", onComplete:layerShoe}); TweenMax.to("#panel2_info1", .15, {y:"+=128", delay:.1, force3D:false}); TweenMax.to("#plus1", .35, {y:"+=386", delay:.2}); TweenMax.to("#plus1_2", .35, {rotation:"-=90", delay:.2}); scale1.removeEventListener('click', minimizeShoe, false); } function minimizeJacket() { //TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.to("#panel2_box2", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:167, delay:.2, transformOrigin:"left bottom", onComplete:layerJacket}); TweenMax.to("#panel2_info2", .15, {y:"+=128", delay:.1, force3D:false}); TweenMax.to("#plus2", .35, {y:"+=386", x:"+=168", delay:.2}); TweenMax.to("#plus2_2", .35, {rotation:"-=90", delay:.2}); scale2.removeEventListener('click', minimizeJacket, false); } function minimizeFitbit() { //TweenMax.set("#plus3", {css:{zIndex:501}}); TweenMax.to("#panel2_box3", .35, {scaleX:0.334, scaleY:0.334, top:-17, left:333, transformOrigin:"left bottom", onComplete:layerFitbit}); TweenMax.to("#panel2_info3", .15, {y:"+=117", delay:.1, force3D:false}); TweenMax.to("#plus3", .35, {y:"+=386", x:"+=336"}); TweenMax.to("#plus3_2", .35, {rotation:"-=90"}); scale3.removeEventListener('click', minimizeFibit, false); } function layerShoe() { scaleText1.style.display = "none"; TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.set("#plus3", {css:{zIndex:501}}); TweenMax.set("#panel2_box1", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function layerJacket() { TweenMax.set("#plus1", {css:{zIndex:501}}); TweenMax.set("#plus3", {css:{zIndex:501}}); scaleText2.style.display = "none"; TweenMax.set("#panel2_box2", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function layerFitbit() { TweenMax.set("#plus2", {css:{zIndex:501}}); TweenMax.set("#plus1", {css:{zIndex:501}}); scaleText3.style.display = "none"; TweenMax.set("#panel2_box3", {css:{zIndex:500}}); scale1.addEventListener('click', scaleShoe, false); scale2.addEventListener('click', scaleJacket, false); scale3.addEventListener('click', scaleFitbit, false); expandBtn1.addEventListener('click', scaleShoe, false); expandBtn2.addEventListener('click', scaleJacket, false); expandBtn3.addEventListener('click', scaleFitbit, false); } function ifStatements(){ if(scale1.position().y == 0) { minimizeShoe(); } if(scale2.position().y == 0) { minimizeJacket(); } if(scale3.position().y == 0) { minimizeFitbit(); } } function exitHandler(){ ifStatements(); } scale1, scale2, and scale3 are all variables of divs that get moved to the top - I want that checked with the if statement, and then it minimized using the minimize function I've created. It's all working great except the if statements they aren't executing properly. Hopefully this makes sense what I'm asking!
  14. Aw super boss answer - I had tried that but had the rotated div inside the non rotated div - opps! Thanks (sort of head::palm at the moment)
  15. Hi there. I'm trying to create a simple shooting star effect by scaling a rotated div. First of all the div scales out as though the star is streaking across (which is correct), then the scale collapses changing it's transform origin. However, as you see in the codepen the div jumps around. I'll probably make a work around and scale an image instead of a rotated div, but I thought I'd check to see if there was a way to do this utilizing only code. JS TweenMax.set('#star', {rotation:-30}); TweenMax.from("#star", .5, {scaleX:0}); TweenMax.to("#star", .5, {scaleX:0, transformOrigin:"left", delay:.5}); HTML <div id="star"> </div> CSS star { position:absolute; top:-1; left:68px; width:285px; height:94px; border-top:1px solid #fff; opacity:.5; }
  16. Hi. I actually fixed this myself by converting all the tweens to relative tweens like this: var i = 0; var a = 1; var d = .5; var d2 = .55; var d3 = .56; var t = .5; var tt = .25; var e = Power2.easeOut; TweenMax.set("#container", {alpha:a, ease:e}); TweenMax.to("#jacket", t, {top:"+=35", left:"-=20", delay:d, ease:e}); TweenMax.to("#helmet", t, {top:"+=66", left:"-=14", delay:d3, ease:e}); TweenMax.to("#goggles", t, {left:"-=105", top:"+=10", delay:d2, ease:e}); TweenMax.to("#boots", t, {top:"-=6", left:"+=16", delay:d2, ease:e}); TweenMax.to("#shirt", t, {top:"-=5", left:"+=98", delay:d, ease:e}); TweenMax.to("#shoes", t, {left:"-=40", top:"+=2", delay:d2, ease:e}); //TweenMax.to("#hat", t, {x:-100, delay:d3, ease:e}); TweenMax.to("#txt1", tt, {alpha:i, delay:2}); TweenMax.to("#txt2", tt, {alpha:i, delay:2.1}); TweenMax.to("#txt3", tt, {alpha:i, delay:2.2}); TweenMax.from("#txt2_1", tt, {top:"+=25", alpha:i, delay:2.3}); TweenMax.from("#txt2_2", tt, {top:"+=35", alpha:i, delay:2.4}); TweenMax.from("#bar", tt, {top:"+=35", alpha:i, delay:2.5}); TweenMax.from("#txt2_3", tt, {top:"+=35", alpha:i, delay:2.6}); TweenMax.from("#cta", tt, {top:"+=35", alpha:i, delay:2.7}); Hadn't had this bug come up before which is why I was interested - I do have a question about backgroundPosition in IE9 but I'll make a seperate thread sometime.
  17. Hi there. I'm working on an ad (can't share the actual images for) The behavior is different in IE9 from all other browsers. (i don't have access to test on anything above IE9) I haven't encountered this issue before. In addition, these are transparent png with drop shadows, the drop shadows fill while it's animating. As you can see from the following code: var i = 0; var a = 1; var d = .5; var d2 = .55; var d3 = .56; var t = .5; var tt = .25; var e = Power2.easeOut; TweenMax.set("#container", {alpha:a, ease:e}); TweenMax.to("#jacket", t, {y:35, x:-20, delay:d, ease:e}); TweenMax.to("#helmet", t, {y:66, x:-14, delay:d3, ease:e}); TweenMax.to("#goggles", t, {x:-105, y:10, delay:d2, ease:e}); TweenMax.to("#boots", t, {y:-6, x:16, delay:d2, ease:e}); TweenMax.to("#shirt", t, {y:-5, x:98, delay:d, ease:e}); TweenMax.to("#shoes", t, {x:-40, y:2, delay:d2, ease:e}); //TweenMax.to("#hat", t, {x:-100, delay:d3, ease:e}); TweenMax.to("#txt1", tt, {alpha:i, delay:2}); TweenMax.to("#txt2", tt, {alpha:i, delay:2.1}); TweenMax.to("#txt3", tt, {alpha:i, delay:2.2}); TweenMax.from("#txt2_1", tt, {y:25, alpha:i, delay:2.3}); TweenMax.from("#txt2_2", tt, {y:35, alpha:i, delay:2.4}); TweenMax.from("#bar", tt, {y:35, alpha:i, delay:2.5}); TweenMax.from("#txt2_3", tt, {y:35, alpha:i, delay:2.6}); TweenMax.from("#cta", tt, {y:35, alpha:i, delay:2.7}); I'm doing tweens on divs moving them based on their x and y positions. Looks great in everything but IE9 as I mentioned above. If you watch for example, the direction the #shirt div moves in any browser and then try in IE9. Moves in the opposite direction. Any suggestions? I tried switching the x and y to left/right top/bottom to no avail. I know MSFT is not supporting IE and I'm trying to guide my work off of 9, atleast, but in the meantime I could use some help. Thanks in advance for any tips.
  18. and not to confuse anyone I used alot of variables for repeating values: var i = 0; var a = 1; var d = 1.3; var t = .1; var t2 = .2; var o = 1.2;
  19. Thanks so much for all the responses! Very helpful. Somnamblst, I also work alot with RM Doubleclick templates, and you are correct, the template usually kills off and resets the animation automatically - i was however using a custom template that DC whipped up for me on the fly for a last minute request for a special ad. I solved this by rewriting the code into straight TimelineMax sequence that wasn't broken into functions. It works perfectly Here was my result: var tl = new TimelineMax({paused:true, onComplete:startVideo}); tl.to('#dc_logo', 0, {alpha:a}, 0) .to('#videoContent', 0, {alpha:i}, 0) .to('#exp_txt1', 0, {alpha:i}, 0) .to('#exp_txt2', 0, {alpha:i}, 0) .to('#exp_txt3', 0, {alpha:i}, 0) .to('#exp_txt4', 0, {alpha:i}, 0) .to('#exp_txt5', 0, {alpha:i}, 0) .to('#exp_txt6', 0, {alpha:i}, 0) .to('#exp_txt2_1', 0, {alpha:i}, 0) .to('#exp_txt2_2', 0, {alpha:i}, 0) .to('#exp_txt2_3', 0, {alpha:i}, 0) .to('#exp_txt2_4', 0, {alpha:i}, 0) .to('#exp_txt2_5', 0, {alpha:i}, 0) .to('#exp_join', 0, {alpha:i}, 0) .to('#exp_us', 0, {alpha:i}, 0) .to('#bar', 0, {alpha:a, width:0}, 0) .to('#logo', 0, {alpha:a}, 0) .to('#exp_txt1', t, {alpha:a}, "+=.2") .to('#exp_txt2', t, {alpha:a}, "+=.2") .to('#exp_txt3', t, {alpha:a}, "+=.2") .to('#exp_txt4', t, {alpha:a}, "+=.2") .to('#exp_txt5', t, {alpha:a}, "+=.2") .to('#exp_txt6', t, {alpha:a}, "+=.2") .to('#exp_txt1', t2, {alpha:i}, 3.3) .to('#exp_txt2', t2, {alpha:i}, 3.3) .to('#exp_txt3', t2, {alpha:i}, 3.3) .to('#exp_txt4', t2, {alpha:i}, 3.3) .to('#exp_txt5', t2, {alpha:i}, 3.3) .to('#exp_txt6', t2, {alpha:i}, 3.3) .to('#exp_txt2_1', t, {alpha:a}, "+=.2") .to('#exp_txt2_2', t, {alpha:a}, "+=.2") .to('#exp_txt2_3', t, {alpha:a}, "+=.2") .to('#exp_txt2_4', t, {alpha:a}, "+=.2") .to('#exp_txt2_5', t, {alpha:a}, "+=.2") .to('#exp_txt2_1', t2, {alpha:i}, 6.2) .to('#exp_txt2_2', t2, {alpha:i}, 6.2) .to('#exp_txt2_3', t2, {alpha:i}, 6.2) .to('#exp_txt2_4', t2, {alpha:i}, 6.2) .to('#exp_txt2_5', t2, {alpha:i}, 6.2) .to('#exp_join', t, {alpha:a}) .to('#exp_us', t, {alpha:a}, "+=.2") .to('#bar', .5, {width:82}, "-=.2") .to('#exp_join', t2, {alpha:i}, 7.5) .to('#exp_us', t2, {alpha:i}, 7.5) .to('#bar', t2, {alpha:i}, 7.5) .to('#logo', t2, {alpha:i}, 7.5) .to('#dc_logo', t, {alpha:i}, 7.7) .to('#videoContent', t, {alpha:a}, 7.7); function startVideo() { vplayer.play(); } I then do a tl.restart on expansion, so no matter where it is animating on close, and then re-expansion the animation always starts from the beginning. (also completing similar resets on the video that is called at the completion of the animation sequence) - I think I was overthinking it too much. This solved it just fine. Thanks again!
  20. Ok so I reworked this - unfortunately it's just sitting there with 0 movement now. What did I do wrong? Here is a codepen, I can't share the images as this is unreleased material. http://codepen.io/anon/pen/yYpNbq
  21. Let me go through the video more attentively as I just bought myself a bit of time so was rushing. Thanks I'll see if that does it and then mark solved hopefully.
  22. Sorry I'm struggling a bit with using delay in timelinemax - when I convert and do as you said everything plays all at once in a mess - can you use the code I provided to show more of an example? Sorry I'm needing this rather urgently and finding TimelineMax difficult with the delays and how that would directly convert from what I have to simulate the timing. I did this: var masterTL = new TimelineMax({paused:true}); var i = 0; var a = 1; var d = 3.3; var t = 0; var t2 = .2; var o = 6.2; function setProperties() { var tl = new TimelineMax(); tl.add( TweenMax.set('#dc_logo', {alpha:a}) ); tl.add( TweenMax.set('#videoContent', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt1', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt3', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt4', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt5', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt6', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2_1', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2_2', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2_3', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2_4', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2_5', {alpha:i}) ); tl.add( TweenMax.set('#exp_join', {alpha:i}) ); tl.add( TweenMax.set('#exp_us', {alpha:i}) ); tl.add( TweenMax.set('#bar', {alpha:a, width:0}) ); tl.add( TweenMax.set('#logo', {alpha:a}) ); return tl; } function line1() { var tl2 = new TimelineMax(); tl2.add( TweenMax.to('#exp_txt1', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt2', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt3', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt4', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt5', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt6', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt1', t2, {alpha:i}) ); tl2.add( TweenMax.to('#exp_txt2', t2, {alpha:i}) ); tl2.add( TweenMax.to('#exp_txt3', t2, {alpha:i}) ); tl2.add( TweenMax.to('#exp_txt4', t2, {alpha:i}) ); tl2.add( TweenMax.to('#exp_txt5', t2, {alpha:i}) ); tl2.add( TweenMax.to('#exp_txt6', t2, {alpha:i}) ); return tl2; } function line2() { var tl3 = new TimelineMax(); tl3.add( TweenMax.to('#exp_txt2_1', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_txt2_2', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_txt2_3', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_txt2_4', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_txt2_5', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_txt2_1', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_txt2_2', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_txt2_3', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_txt2_4', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_txt2_5', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_join', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_us', t, {alpha:a}) ); tl3.add( TweenMax.to('#bar', .5, {width:82}) ); tl3.add( TweenMax.to('#exp_join', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_us', t2, {alpha:i}) ); tl3.add( TweenMax.to('#bar', t2, {alpha:i}) ); tl3.add( TweenMax.to('#logo', t2, {alpha:i}) ); return tl3; } function endAnimation() { var tl4 = new TimelineMax(); tl4.add( TweenMax.to('#dc_logo', t, {alpha:i}, 0) ); tl4.add( TweenMax.to('#videoContent', t, {alpha:a, onComplete:startVideo}, 0) ); return tl4; } startVideo = function() { vplayer.play(); } stopVideo = function() { vplayer.stop(); vplayer.currentTime = 0; } expandedAnimation = function() { masterTL .add(setProperties(), 0) .add(line1(), .3) .add(line2(), 3.3) .add(endAnimation(), 7) .play(); } And it just looks nothing like the TweenMax without the TimelineMax - it's junk. Obviously I'm getting the setting wrong - it would be nice to get a bit more help here if possible.
  23. Does the TweenMax.set work properly in TimelineMax? Also, say I have a sequence I want to begin at the same time, following another sequence, for example if you look at my code: TweenMax.to('#exp_txt1', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt2', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt3', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt4', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt5', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt6', t, {alpha:i, delay:d}); That all shares the same delay, how would I accomplish that?
  24. Hi there, I have the following TweenMax sequence: expandedAnimation = function() { var i = 0; var a = 1; var d = 2.25; var t = 0; var o = 4.25; TweenMax.set('#dc_logo', {alpha:a}); TweenMax.set('#videoContent', {alpha:i}); TweenMax.set('#exp_txt1', {alpha:i}); TweenMax.set('#exp_txt2', {alpha:i}); TweenMax.set('#exp_txt3', {alpha:i}); TweenMax.set('#exp_txt4', {alpha:i}); TweenMax.set('#exp_txt5', {alpha:i}); TweenMax.set('#exp_txt6', {alpha:i}); TweenMax.set('#exp_txt2_1', {alpha:i}); TweenMax.set('#exp_txt2_2', {alpha:i}); TweenMax.set('#exp_txt2_3', {alpha:i}); TweenMax.set('#exp_txt2_4', {alpha:i}); TweenMax.set('#exp_txt2_5', {alpha:i}); TweenMax.set('#exp_join', {alpha:i}); TweenMax.set('#bar', {alpha:a, width:0}); TweenMax.set('#logo', {alpha:a}); TweenMax.to('#exp_txt1', t, {alpha:a, delay:.25}); TweenMax.to('#exp_txt2', t, {alpha:a, delay:.5}); TweenMax.to('#exp_txt3', t, {alpha:a, delay:.75}); TweenMax.to('#exp_txt4', t, {alpha:a, delay:1}); TweenMax.to('#exp_txt5', t, {alpha:a, delay:1.25}); TweenMax.to('#exp_txt6', t, {alpha:a, delay:1.5}); TweenMax.to('#exp_txt1', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt2', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt3', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt4', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt5', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt6', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt2_1', t, {alpha:a, delay:2.5}); TweenMax.to('#exp_txt2_2', t, {alpha:a, delay:2.75}); TweenMax.to('#exp_txt2_3', t, {alpha:a, delay:3}); TweenMax.to('#exp_txt2_4', t, {alpha:a, delay:3.25}); TweenMax.to('#exp_txt2_5', t, {alpha:a, delay:3.5}); TweenMax.to('#exp_txt2_1', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_2', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_3', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_4', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_5', t, {alpha:i, delay:o}); TweenMax.to('#exp_join', t, {alpha:a, delay:4.25}); TweenMax.to('#bar', .5, {width:82, delay:4.25}); TweenMax.to('#exp_join', t, {alpha:i, delay:5.5}); TweenMax.to('#bar', t, {alpha:i, delay:5.5}); TweenMax.to('#logo', t, {alpha:i, delay:5.5}); TweenMax.to('#dc_logo', t, {alpha:i, delay:5.5}); TweenMax.to('#videoContent', t, {alpha:a, delay:5.5, onComplete:startVideo}); } startVideo = function() { vplayer.play(); } I know this is probably simple for some, but I'd like to convert this to TimelineMax because I need the animation to stop executing if my banner is closed, and reset, and begin animation again if it's re expanded. Right now, if you close the ad mid animation, and then re-expand, the code that was previously executing is still running, and then a new set starts again making a huge mess. When I tried converting to TimelineMax by using the var tl = new TimelineMax() and then tl.add to each one the delays got all messed up and I wasn't sure how to get the same results. Is there an easier way to reset/pause my function without totally redoing all my delays and etc? Any help would be appreciated. Thank you
  25. Great thanks alot - The force3D fixes it in Safari not Firefox but if I combine the force3D:false with -moz-osx-font-smoothing: grayscale; I get pretty good results. The font is thinner in Firefox but looks good in Safari and Chrome. Thanks again.
×