Shine effect

[cwiens]

I am slowly but surely getting requests for JS versions of my Greensock AS animations. A lot is straight forward going from AS to JS but some not so much. I am trying to create a JS version of this animation http://cwiens.com/curt/shutterfly_mothersday_2014/playground/cards_test.html. Its to show the "metallic" features of the card. 

 

 

In Flash I did this in 20 min because I knew how I would do it before I even started due largely to the awesomeness of greensock. I know how to create the 3d card effect in JS but not sure how to create the shine. In Flash I masked out the area on the card that I wanted to shine and tweened a gradient filled shape with the layer set to multiply the card below. Lots of companies trying to show this are using .gif animations e.g.

[Rodrigo]

Interesting effect.

 

One possibility would be to create a transparent PNG with a white to transparent gradient in photoshop and tween that from left to right while the card is rotating. If you rotate the parent the child element will rotate as well.

 

Another one is SVG but I don't know of any filter that could do that, but also consider the fact that my knowledge in SVG is not much, so you could see if there's one out there. Another option is create a semi-transparent path and animate that. For this alternative you have to include everything in an SVG element though.

 

You could check this blog:

 

http://davidwalsh.name/

 

David created something similar for the main logo using just CSS, here's the article:

 

http://davidwalsh.name/sheen-effect

 

Rodrigo.

[Jonathan]

curtwiens and Rodrigo..

 

Here is a codepen example i found that uses a CSS and SVG shine effect:

 

See the Pen maJhu by iamvdo (@iamvdo) on CodePen.

 

It even works in Firefox, Chrome, Opera 18+, and IE9, IE10, IE11.

 

The above link could be modified like Rodrigo described above..

 

[Carl]

perhaps a css gradient will work. 

http://codepen.io/GreenSock/pen/gLJvz

 

I grabbed a gradient from here: http://www.colorzilla.com/gradient-editor/

[Jonathan]

Nice Job Carl !!! .. your example is on Codepen Front page editor picks

[Carl]

Thanks, Jonathan. Good to know. I love when that happens.

[cwiens]

This is awesome, thanks everyone. Jumping into this today...

[cwiens]

I am ending up using TweenLite with animated gif. With the animated gif I am able to control the shine a lot better. I using layers and a mask in photoshop to get the correct shine effect and TweenLite to animate. http://cwiens.com/curt/shutterfly_metallic_foil_card_study/card/

[Jonathan]

Is there any reason why didnt want to use Carl's codepen example of the shine effect using CSS gradients ?

Carl's example:

See the Pen gLJvz by GreenSock (@GreenSock) on CodePen.

You would be able to adjust the shine by tweaking the radial gradient CSS under the .shine class.

Resources on CSS Gradients:

 

css-tricks - css3 gradients

MDN - Using CSS gradients

CSS Gradient Generator:

http://www.colorzilla.com/gradient-editor/

http://www.css3factory.com/linear-gradients/

MicroSoft CSSGradientBackgroundMaker

Once you get used to CSS Gradients.. you will see the joy of using them to adjust the gradient in the browser, plus the added benefit of using GSAP to animate the gradient on the fly. Istead of using a static image.

Just my two cents

[Kurrent Kurt]

I like this example, but I was hoping to use TweenMax with the CSSPlugin, but I'm not having any success. Anyone want to fork and get it to work? Thanks!

 

See the Pen izGts by anon (@anon) on CodePen.

[Diaco]

Hi Kurrent Kurt 

 

 

Since there's pseudo element in css ; you should to use CSSRulePlugin .

 

pls check this out :

See the Pen AafmD by MAW (@MAW) on CodePen.

 

hope helps

[jamiejefferson]

You were very close! - it seemed like you just had the #sheen and #sheenImage styles mixed up

See the Pen zDxab by jamiejefferson (@jamiejefferson) on CodePen.

(I removed #sheenImage entirely as it didn't seem to be needed)

[Kurrent Kurt]

Thanks. I was looking into another SVG cross-browser mask example of an image using an image as the mask. Here's the example, but I can't seem to tween JUST THE IMAGE without moving the mask as well.

 

See the Pen qfhEe by anon (@anon) on CodePen.

[jamiejefferson]

Yes the mask is placed in the target element's coordinates, so it technically doesn't move when you tween the image. You can just create a counter tween to move the mask in the other direction at the same time

 

See the Pen ngpIC by jamiejefferson (@jamiejefferson) on CodePen.

[Kurrent Kurt]

Thanks! I would never have never thought that you counter move the mask itself without moving the masked item inside…gotta love HTML. Job security.

[Kurrent Kurt]

Experimenting some more. That last codePen example does not work in IE10. The image moves, but the mask doesn't work. Any ideas? Thanks!

[Jonathan]

What about this.. i just converted the x and y, which were using the CSSPlugin by default. To instead use the GSAP AttrPlugin attr:{}  .. Any SVG child elements inside <defs> tags do not render CSS directly. So you must animate their attributes instead.

 

See the Pen OyarJK by jonathan (@jonathan) on CodePen.

TweenMax.fromTo("#svgMask", 1, {
  attr: {
    x: 0
  }
}, {
  attr: {
    x: -100
  }
});
TweenMax.fromTo("#svgMaskedImage", 1, {
  attr: {
    x: 0
  }
}, {
  attr: {
    x: 100
  }
});

Does that help?

 

GSAP AttrPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

SVG <defs> tag: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

 

[Kurrent Kurt]

Nice! That works nicely in IE10 too! Thanks!

[amnesiahouse]

I've run into a bit of an issue. When I preview things in Codepen using FF everything looks ok but if I try exporting the codepen and then preview the exact same code in FF the mask doesn't work.

 

This FF problem happens with this codepen : 

See the Pen AafmD by MAW (@MAW) on CodePen.

However the problem doesn't happen with this one: 

See the Pen JYVdZe by anon (@anon) on CodePen.

 

----

 

I've been trying to learn clips/masks using svg and all was going ok but then I tried it out in FF and nothing worked. That's why I thought I'd try out these codepens as they previewed in FF just fine from within Codepen.

[OSUblake]

Seems to work fine for me.

 

http://s.codepen.io/osublake/debug/9caa21422d02f81cb0055717792b3248

[Jonathan]

It might be buggy cross browser due to the fact that the SVG <mask> element should be nested inside a SVG <defs> element.

• SVG mask element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask
• SVG defs element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

Also check this resource out:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

 

The one example you showed that didn't work used the GSAP CSSRulePlugin animating CSS properties. The one that worked was using the GSAP AttrPlugin animating SVG attributes.

 

With SVG it is better to animate their attributes, instead of CSS for cross browser goodness.

 

[amnesiahouse]

Seems to work fine for me.

 

http://s.codepen.io/osublake/debug/9caa21422d02f81cb0055717792b3248

 

Why does this not work then? it's the same?

 

http://www.northform.co.uk/temp/cliptest/