Jump to content
GreenSock

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

magyarn

Members
  • Posts

    4
  • Joined

  • Last visited

magyarn's Achievements

Newbie

Newbie (1/14)

3

Reputation

  1. 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");
  2. 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!
  3. 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});
  4. 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.
×