[Reset opacity before each repetition of looping animation]

Figured it out! I have to use autoAlpha instead of opacity. Can anyone tell me why though? What exactly is the difference between the two?

 

const rippleTl = new TimelineMax({repeat:-1});
TweenMax.set(".ripple", {autoAlpha:0});

rippleTl
  .fromTo("#centerCircle", 1, {scale:5, transformOrigin: origin}, {scale: 0, transformOrigin: origin, ease: Circ.easeOut})
  .staggerTo(".ripple", 1.5, {scale: 5, autoAlpha: .8, transformOrigin: origin}, .4, "-=.3")
  .staggerTo(".ripple", 1, {opacity: 0, transformOrigin: origin}, .6, "-=1.5");

 

[Reset opacity before each repetition of looping animation]

In the attached CodePen, I'm struggling with the Ripple animation that starts on line 28. I want the ripples to start out at 0% opacity, fade in as they scale up, and then go back to 0% before the start of a new repetition cycle. I use the following before starting the timeline:

 

TweenMax.set(".ripple", {opacity:0});

 

However it's obviously not part of the timeline itself, so it's not resetting the opacity before each cycle. This, at least I assume, is why I always see the ripples fixed at their original size after the initial sequence/repetition.

 

I'm guessing I either need to specify this element's property somehow in the object that initializes with the new TimelineMax({repeat:-1}) on line 28, or make it part of the timeline at the end? I've also noticed strange behavior when I apply overlap values, such as "-=.3", at the end of blocks when that value is greater than the duration of the animation itself. But I don't think that's happening here, is it?

 

Thanks for the help!

See the Pen gozKNN by Nathan_James (@Nathan_James) on CodePen

[Using DrawSVG in Codepen]

Thank you @mikel. I realized my drawDVG syntax was also incorrect. I wanted to draw the grey SVG in, so I had to use the from() method and "0%" as my drawSVG value.

 

TweenMax.from("#freezerDoor", 1, {drawSVG:"0%", delay:.5});

 

[Using DrawSVG in Codepen]

Hello,

 

I'm following along with the DrawSVGPlugin tutorial on the website, but seem to be having trouble getting DrawSVG to run. I am a Club Greensock member, so I believe I've pasted in the latest version of TweenMax, which should give me access to the plugin, correct? Thank you for your help.

See the Pen bYBYLV by Nathan_James (@Nathan_James) on CodePen