Banner w/fast wipes from left to right... there is a video effect but I can't find its name...

[cr33ksid3]

Alright gurus and noobs... I did a project years back in video editing but can't remember what Premiere called it. I think I also remember doing the same thing in Flash too. Anyway, as you can see in the Pen I have a simple banner that I would like to animate better. You can see my wipe effect is a bit off. I tried to use GS DevTools to slow it down and reposition the elements but it was not the same as working with a visual timeline. I'm used to visual tools more than code right now. So how do I pretty it up and make it cool (besides cooler graphics)?

 

I'd also like to figure out the best use of easing too. The other elements seem dull. I tried a few but they were a mess.

 

Last but not least... the arrow button... How do I add in the action that sends you off to a URL once the button is clicked?

 

As always, your input and help with learning is much appreciated.

 

PS. If this type of request has been addressed in the past... I can't believe I would be a first with this... please shoot me some Pens or links to other GS threads. Thank you...

See the Pen 02f95f35a2de4f17edee26875558f18d by cr33ksid3 (@cr33ksid3) on CodePen

[geedix]

Hi,

My guess is that you want a sheen going over just the rectangles, or maybe the logo. You could do that a few ways, like have the blue background actually be a foreground element (any transparent format like gif, png, svg), with the shapes cut out, then the animation would go behind it. Or try a diagonal shape behind an actual mask.  

For the button, check the clickTag specs for your ad network. For example, Google's: https://support.google.com/admanager/answer/7046799?hl=en

Be patient, work on one part at a time, and try to be more specific with what you're trying to do. 

[cr33ksid3]

@geedix a sheen effect possibly yes. For now, I think it sort of has that sheen effect... just a bit slower and jerky. I was hoping someone might take a look at the JS and say something "oh, you need to try this instead" or "here is a link to something similar". To me it doesn't have enough "sheen" or pizzazz yet. I had a terrible time trying to get it to look this good going one direction or the other. I haven't done anything with masks yet... maybe later though...

 

As for the button... I would think there is a way to call an action... something like...

$('#arrow').click(function() {
  //something here to send you to a URL
});

I looked for that in JS but did not find anything that worked right. This banner will not be part of an ad network. It will just be on a web page sending you to another web page... like a call to action banner.

 

Thanks for the help.

[geedix]

The design is rough, so the little problems in the animation don't seem so noticeable. You could try out some different eases - https://greensock.com/docs/v3/Eases . Maybe the jerk in the motion is because the pixel values in your fromTo don't start over at the same place they end.

[cr33ksid3]

Well, think I solved the Arrow button issue... forgot about window.open()... had to have JQuery script added to my setup though...

$('#arrow').click(function() {
  window.open('http://www.greensock.com');
});

 

[geedix]

If you're not doing ad tracking, you can just wrap your arrow with a regular anchor tag in the html. No jquery needed. 

[cr33ksid3]

Geedix:

 

Yes, that would be easiest but I figured I'd learn something about JS instead. I could just wrap the whole banner in a anchor tag... However, down the road I may need multiple buttons in an animation so this just seemed the best way for this example. Thank you though.