Pusher

Hi there, Just a quick question. Is it possible to create a flicker effect when images fade using the autoAlpha: 0 effect? Something like this... (I thought Elastic would help but it didn't.) TweenMax.to("#div", 1, {autoAlpha: 0, ease:Elastic.easeInOut}) Thanks, Phil

This absolutely helps! Thank you so much. I love Greensock even more.

Hi there, Is there a basic way to calculate the length of a TimelineMax animation? I do alot of banner work with Greensock and publishers have strict 15sec limits. I can't find an example anywhere. Thanks, Phil

Thanks so much for the help. I think i have it now. I was actually reading the points completely wrong. Worked it out on the bus into work. Cheers!

Jack, thank you so much. That definately clears things up. Can you explain how these coordinates translate? 0, 0 300, 250 Trying to do a pretty intricate build.

Hi there, I am new to draw SVG and having problem getting started. Sorry if the solution is simple. I have done tutorials and can't find the answer anywhere. Am I missing something in the attached codepen? I just want the line to draw from the top left to the bottom right. I would also like the line to appear as _ _ _ _ _ _ _ if possible. Thanks so much for any help, Phil

Replying to my own topic! Is something like this the smartest way to do it? http://matthew.wagerfield.com/parallax/

Hi All, Starting from 0 here. My boss has asked if a GSAP HTML5 Banner that use Smartphone Accelerometer is possible. The idea would be that i multilayered image with a foreground, mid-ground and background would 'move' with the tilt on a smartphone. Can anyone point me in the right direction? Thanks for any help, Phil

Awesome, thank you PointC! That looks perfect!

Hi there, I am starting from scratch here so apologies. I have been asked by a client to trigger an animation (similar to a banner ad) based on the browser position. It would be great if the animation then reversed on scroll up. Two Q's... 1. Is this possible with Greensock? 2. Where do i start? My Codepen example is an attempt at recreating the site that the animation will eventually live on. Thank you so much for any help, Phil

That is awesome, thanks Diaco! I have updated the codepen. However, it now opens when i refresh the page rather then only when i click the +. Is it possible to cue the close as well with this method when a link in the <li> is selected? I was hoping to eventually make this trigger a scroll down the page. Can you also briefly explain how your above code works? Is it creating more of a toggle situation?

Hi all, Just trying to build a fancy mobile menu using Greensock. I was wondering what the best way to make the + expand the menu and then the x to close it. Can I change the #mobicon's onClick to onClick="menucloseFunction" with an oncomplete of the menuFunction() ? Also, I had a thought that was to reverse the menuFunction() that I thought would work something like this but the reverse is not the normal colour when i enter it. function menucloseFunction() { menu.reverse() } Thanks for any help, Phil

Thank you Tahir! This is perfect.

Hi all, This may not look like a gallery at the moment but i problem there is a method to my madness. Just wondering what the best way to make only the div that is being hovered over animate instead of all of them at once. Thanks, Phil

Amazing, thanks Diaco! I am going to pull this apart to get a better understanding. Cheers, Phil

Hi there, I have just realised that Greensock can do counting! I am making a counter that needs to arrive at a phone number but is meant to look like a bomb timer. Does anybody know how to make the counter... Start from 0 000 000 000 and count up. And possibly put some : in between the groups of numbers. Thanks for any help, Phil

Hi OSUblake, That's pretty much what i am looking for. I will take a look at this and come back.

Hi Diaco, Sorry i'm not sure what i am fixing? I just found the tidy button so now that line looks like this... for (var i = dotQuantity - 1; i >= 0; i--) { dot = document.createElement("div"); dot.className = "dot"; TweenMax.set(dot, { xPercent: -50, yPercent: -50, force3D: true }); document.body.appendChild(dot); dotPool[i] = dot; }

Hi there, Still a newbie to Greensock and noticing how much of a newbie every hour. I was hoping to turn this particle emitter to more of a explosion burst effect like you would see with a firework. After 2 hours of playing i'm not really getting anywhere. Can someone tell me if an emitter is right for this? Thanks, Phil

Amazing! Thanks Carl.

Hi Carl, Thank you for the advice. Codepen is brilliant! I will definately use it from now on! The above seems to have worked. Except that the counter has already played by the time it gets to the stage. Is there a way to pause distance? My codepen is here if you can still help! http://codepen.io/phillip_vale/pen/GpjgpL Thanks so much, Phil

Hi there, Sorry if this is a stupid question. I am trying to pause a function and only start it when an onComplete happens in TimelineMax. The function works perfectly except that when it plays it is off screen because it is firing as soon as the animation starts. <script> var tl = new TimelineMax () tl .from("#txt1", 1, {right:-280, ease:Power2.easeInOut}, "+=4") .from("#counter", 1, {right:-280, ease:Power2.easeInOut, onComplete: startCounter}) .from("#txt2", 1, {right:-280, ease:Power2.easeInOut}) .from("#logo", 1, {top:250, ease:Power2.easeInOut}) .from("#tag", 1, {right:90, autoAlpha:0, ease:Power2.easeInOut}) var distance = {counter:0}, scoreDisplay = document.getElementById("counter"); function add() { TweenMax.to(distance, 1, {counter:"+=200", roundProps:"counter", onUpdate:updateHandler}); } function updateHandler() { scoreDisplay.innerHTML = distance.counter; } add(); distance.pause() function startCounter() { distance.play() } </script> Thanks for any help, Phil

Hi there, This could be a weird question but is it possible to onComplete:50%. Ideally I would like to trigger some animations when an animation is 10%, 20%, 30%, 40% complete etc. The below code is wrong but i thought i would post it as a talking point. .from("#animation", 20, {left:990, onComplete50%: stopFunction}) What is the best way to do this? Thanks, Phil