Jump to content
Search Community

sorciereus

Members
  • Posts

    84
  • Joined

  • Last visited

Everything posted by sorciereus

  1. Super helpful, thank you! And glad to see I wasn't Really far off! I'll get transitioned into the new syntax, thanks for that as well. That combined with the motion path solution below is exactly what I was looking for I truly appreciate it! This forum rocks.
  2. Hello forums. It's been awhile since I got stuck trying to accomplish something in this amazing language, but I must admit I'm a bit rusty in my GSAP and JS. I was hoping one of you might be able to get me back on track. I'm trying to blow letters off screen letter by letter, randomly emulating an effect much like this: https://aescripts.com/wind/ (from right to left) Note the letters spin in 360 space and etc. I know this has got to be possible but I just haven't put it together yet, and I'm having trouble even getting my script to compile to start testing. I may be close or I may be way off. Anyway please check out the example codepen I included. https://codepen.io/julia_planetdisco/pen/YzproYJ
  3. Thanks alot Zach - also I was checking out Three.js as an option too - though I think this is all over kill for what I need to accomplish - just the same same I appreciate the response - I've been working alot in After Effects and my coding is a tad rusty! Your solution makes perfect sense, thanks.
  4. Is it possible to create this effect but instead of the particle squares, use a series of png images on transparent backgrounds? https://codepen.io/GreenSock/pen/vLqLeV?editors=0010
  5. 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?
  6. 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.
  7. I recommend coding the GSAP in TimelineMax and then using the restart function.
  8. 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?
  9. 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
  10. I will try that thank you - has anyone else seen this on IE 11?
  11. 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.
  12. This issue is back, and now it's in all versions of IE - including 11.
  13. 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});
  14. Thanks very much for the replies. I appreciate both solutions and SplitText is super smooth! Rad!
  15. 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!
  16. Thank you. Was needing the pure Javascript answer. Just didn't have the syntax quite right. Appreciated.
  17. 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!
  18. 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)
  19. 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; }
  20. 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.
  21. 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.
  22. 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;
  23. 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!
  24. 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
×
×
  • Create New...