Search the Community

It may look simple (to you guys it's a no-brainer) but I've managed to get two animations working over the weekend (yeah, it took me that long). If you get a chance and need a laugh, can you take a look at what I've written and tell me how I could have done it better please. 1) blinking light. Scope: Flash button to indicate to a visitor that there is a button they can press. I have two imaged (button off, button on) I want button on to be animated so as it turns on quickly then fades out. When someone hovers over the button, the animation should stop and go back to the beginning (so as the on state is fully visible) then restart when hover out. The only down side about my current implimentation is that when you hover over one of the buttons, all the other buttons pause and restart. I'm guessing I'll have to have id's for each button (rather than using the class name) and create timelines for each. <p>flash / blink</p> <div class="press"> <div class="here"></div> </div> <p>in reality the above are transparent pngs</p> .press { background-color:blue; width:50px; height:50px; position:relative; } .here { background-color:red; width:100%; height:100% } var pressTween = new TimelineMax({repeat: -1}); pressTween.to(".press .here", 1.5, {alpha: 0}) .to(".press .here", .5, {alpha: 1}); $(".press .here" ).hover( pause, start ); function pause(){ pressTween.pause(); pressTween.seek(0); }; function start(){ pressTween.play(); }; 2) Alternate flashing lights: This is where I need some help, Basically I want two square waves running in parallel with each other, one off-on-off-on etc the other, on-off-on-off etc. I'm sure I could do in on one timeline but I just couldnt get it to work no matter what I tried. The only way was to have two time lines. <p>square wave</p> <div class="box red" id="seoTicker"></div> <div class="box blue" id="seoTickerHover"></div> <p>in reality the above are transparent pngs</p> .box { width:50px; height:50px; position:relative; margin-bottom:2px; } .red { background-color:red; } .blue { background-color:blue; opacity:0; } var seoTween = new TimelineMax({repeat: -1}); seoTween.to("#seoTicker", 0.1, {alpha: 0, delay:1},0).to("#seoTicker", 0.1, {alpha: 1, delay:1}); var seoTween2 = new TimelineMax({repeat: -1}); seoTween2.to("#seoTickerHover", 0.1, {alpha: 1, delay:1},0).to("#seoTickerHover", 0.1, {alpha: 0, delay:1}); The linked codepen shows them both working albeit with blocks with background colours compared to transparent PNGs in real life Cheers, in anticipation of any advice you can offer (as long as the advice isn't to give up the day job ).

Hi Many thanks to the moderators for their help with GSAP I need to be able to make moving animations blink or pulse. I have been able to do this using several tweens that move, blink and then restart, move and blink etc but this is choppy and not very elegant. I am sure there is a simpler way to do this but I don't know what it is. I wondered if there was a solution with the onRepeat function? I have created a codepen where I have a block moving and blinking over the complete duration of its path but I want to be able to control it's opacity in more detail. http://codepen.io/anon/pen/RGgJrA For example, it moves for a second or to a certain point and then it's opacity becomes zero, and then then returns to 1 and then seamlessly carries on its path for another second where it blinks again. Is it possible to do this with a single expression on one tween or do you have to chain animations together to make it work. One other question I have is about compatibility. I have tested GSAP on Chrome, Firefox, IE, Opera, iOS and Chrome on Android. It works fine on all that. I was wondering if it's compatible with other Android browsers? Many thanks for your help. I think GSAP is great. Pebble