Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cwiens

Shine effect

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

:)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

  • 6 months later...

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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)

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

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

 

:)

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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

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.

 

:)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×