flashing/blinking light with hover pause and alternating flashing lights #MyFirstAnimation

[philip_b]

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 ).

See the Pen XNeXwy by butlerps (@butlerps) on CodePen

[Dipscom]

Hi philip_b,

 

There's no need to put yourself down mate, we're all at different stages in different spheres in life. I certainly cannot hang off a rope with one arm behind my back. Not nowadays anymore, I did use to be able to stand on my hands, might just about be able to do a cartwheel still.

 

Comments on your setup:

 

1) Yes, you will need ids for that. When you use class names, you will be hitting every element that has that class. If you have many of those buttons, you can create a function to create those timelines rather than writing repeated code.

 

2) You can refactor your two timelines into a single one by using the position parameter and a repeatDelay:

var seoTween = new TimelineMax({
  repeat: -1,
  repeatDelay:1
});
seoTween.to("#seoTicker", 0.1, {
  alpha: 0,
}, 0)
.to("#seoTickerHover", 0.1, {
  alpha: 1,
}, 0)

.to("#seoTicker", 0.1, {
  alpha: 1,
}, 1)
.to("#seoTickerHover", 0.1, {
  alpha: 0,
}, 1);

[philip_b]

Hey @Dipscom,

thanks for your feedback.  Re point 2) I had a play around with the position parameter before posting (you may spot some unnecessary  ',0' in my original post).  I think the closest I got was

var seoTween = new TimelineMax({repeat: -1});
seoTween.to("#seoTicker", 0.1, {alpha: 0, delay:1},0).to("#seoTicker", 0.1, {alpha: 1, delay:1});
seoTween.to("#seoTickerHover", 0.1, {alpha: 1, delay:1},0).to("#seoTickerHover", 0.1, {alpha: 0, delay:1});

Which was close, but no cigar.

 

Regarding point 1) I've tried to have a go at creating TimelineMax dynamically and have it working.  But with regard to then dynamically creating hover events that target the dynamically created tweens... that's way beyond my ability.  So, for this application I will either live with all lights coming on when one is hovered or create each one manually.

$("div[id^='press']").each(function(index) {
  var Uid = $(this).attr('id');
  var Uname = Uid.split('_');
  var Ut = Uname[Uname.length - 1] + "Tween";
  var UtInner = "#" + Uid + " .here";
  console.log(Ut);
  var vars = {};
  vars[Ut] = new TimelineMax({
    repeat: -1
  });
  vars[Ut].to(UtInner, 1.5, {
    alpha: 0
  }, 0).to(UtInner, 1.5, {
    alpha: 1
  });

});

a pen of the above can be seen here

[philip_b]

just spotted this example that does exactly what I want re: looping through elements and targeting specific ones with hover.  I'll have a play with it tomorrow.

 

See the Pen vjGxH by rhernando (@rhernando) on CodePen

[Dipscom]

How about this cigar?

 

See the Pen ObxWee?editors=0010 by dipscom (@dipscom) on CodePen

 

I don't know jQuery so, you will have to adapt. But, you could just use that code as it will work anyway.

 

I also would repeat the bit where I said you shouldn't put yourself down so much. I've actually learnt a new trick by reading your code and responding to this thread. So, take it as we're all helping each other at bits we are all bad at.

[philip_b]

Not bad at all!

 

Spotting that I had the timelines variable declared inside the loop = excellent; using just the id as the timeline name = genius.  It makes referencing them so much easier. Also I would never have found 'currentTarget.id' in any of my searches.

 

Thank you soooo much for your help @Dipscom, I feel as though I've had a successful day, and it's only 09:30.

 

My final JS is below

var tls = {}; //create variable for timelines
$("div[id^='press']").each(function(index) {
  var Uid = $(this).attr('id');  //Unique id of the DIV
  var UtInner = "#" + Uid + " .here";
  tls[Uid] = new TimelineMax({ repeat: -1 });
  tls[Uid].to(UtInner, 1.5, { alpha: 0}, 0).to(UtInner, 1.5, { alpha: 1 });
  //create the hover events
  $("#" + Uid).hover( onEnter, onLeave );
});

function onEnter(e){ tls[e.currentTarget.id].pause(); tls[e.currentTarget.id].seek(0); }
function onLeave(e){ tls[e.currentTarget.id].play(); }

See the Pen YpraBj?editors=0010 by butlerps (@butlerps) on CodePen

[OSUblake]

I don't know jQuery 

 

  How is that possible?

 

So what trick did you learn?

[Dipscom]

@philip_b you can be even shorter in your onEnter:

function onEnter(e){ tls[e.currentTarget.id].pause(0); }

  How is that possible?

 

So what trick did you learn?

 

It's because I prefer vanilla ice cream over chocolate.  Only mint choc chips tops that.

 

(And the fact that I never had to use jQuery for any of my work. Whenever I fork a pen that uses it, I'm really just winging it.)

 

Today I have learned that's a super convenient way to create an object to hold a bunch o tweens and/or timelines and access them using bracket notation. If it wasn't for philip_b's question and code I'd never thought of it.

[OSUblake]

(And the fact that I never had to use jQuery for any of my work. Whenever I fork a pen that uses it, I'm really just winging it.)

 

 

That's fascinating! And here, I thought jQuery was JavaScript. 

 

About your new trick, here's a post about that...

http://greensock.com/forums/topic/12143-data-attribute-to-timeline-variable-name-need-advice-from-javascript-wizards/?p=49908

 

Now that you know how that works, see if you can make sense of this despite your jQuery handicap.

See the Pen d120a69a9637f7b3568b69e7cc3775c6?editors=0010 by osublake (@osublake) on CodePen

 

Here's another one passing in the same timeline to different functions. You need to look at the HTML to make sense of this one.

See the Pen 05ce4c289c94e3b36d40f432c809fa33 by osublake (@osublake) on CodePen

 

Really involved...

See the Pen mPgqPY by osublake (@osublake) on CodePen

 

Those demos are from this jQuery heavy thread about building animation factories/modules.

http://greensock.com/forums/topic/14369-dry-jsgsap-syntax-question-for-gsap-effect-snippets-library/

 

.