Jump to content
Search Community

Shine effect

cwiens test
Moderator Tag

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

  • 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...
  • 1 year later...

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.
×
×
  • Create New...