Issues creating a glint or shine on a logo in After Effects that is exportable to HTML

Question

I am trying to replicate a moving logo with a glint that is exportable to HTML.

I followed this video which uses light sweep, the animation is working, but no light effects came through.

I read that Bodymovin does not support effects, so I used alpha matte instead to achieve the same effect as per this video but its still having problems. The light is showing up, but there is no matting, please see the image attached.

In summary, I am trying to make a logo with a glint/lightsweep effect that can work with Bodymovin. What am I doing wrong? Is there a way to get either of these projects to work? Here is the after effects project showing the look I'm trying to achieve.

Answer 1

As per Bodymovin documentation, these are the supported features:

• Shapes
  • paths, ellipses, stars, rectangles
  • fills, stroke, gradient fills and gradient strokes
  • dashes
  • trim paths (partial)
  • rounded corners
  • transforms (position, anchor point, rotate, scale, opacity, skew, skew axis)
• Solids
• Images
• Comps
• Nulls
• Texts
  • Most fonts are supported, they can be exported as shapes or as text provided you load the font on the browser
  • A single text declination is supported per textbox.
  • Not supported: text decorations like Small caps, or Vertical Scale.
• Cameras (partial)
• Expressions
  • Expressions. Partially supported. More and more expressions are supported on each release.
  • If you have any trouble with one, let us know.
  • Expression sliders are supported.
• General supported properties
  • transform (rotate,scale,position,anchor point, opacity)
  • time remap
  • masks (additive, and in some cases difference, inverted and subtractive)
  • luma and alpha masks (with the svg renderer)
• Supported effects (with the svg/html renderer)
  • fill
  • pro levels
  • drop shadow
  • tint
  • tritone

So as long as you use vector shapes and vector effects / transformations you should be good. Try using a vector mask and your glint could be another vector shape moving from side to side.