Iamattamai

If I can trouble you one more time and I think I'm on the home stretch... I have created 3 functions and a master timeline below. The second function in the attached code is nearly identical to the other two. I have added them into the master timeline but for some reason the second function wants to start running right away instead of in sequence after the first. The third acts properly as expected in sequence. I know I can add a delay, but that seems like a workaround to me and one more thing I need to update as values change. images = document.getElementsByClassName("gest06") stand01 = document.getElementsByClassName("gest06stand"); durtalk = .08 dur = .03 function armUp(){ var tl01 = new TimelineMax({}); tl01.staggerTo(images,0,{visibility:'visible'},dur) .staggerTo(images,0,{visibility:'hidden',immediateRender:false},dur,dur); return tl01; } function stand(){ var tl015 = new TimelineMax({repeat:20,yoyo:true}); tl015.staggerTo(stand01,0,{visibility:'visible'},durtalk) tl015.staggerTo(stand01,0,{visibility:'hidden',immediateRender:false},durtalk,durtalk); return tl015; } function armDown(del){ var tl02 = new TimelineMax({}); tl02.staggerTo(images,0,{delay:del,visibility:'visible'},-dur) .staggerTo(images,0,{delay:del,visibility:'hidden',immediateRender:false},-dur,dur) return tl02; } master = new TimelineMax(); master .add(armUp()) .add(stand()) .add(armDown(),"-=.05")

Thank you Craig! The GSAP Overview helped me understand that TimelineMax is included with TweenMax - apparently it won't alone? Anyway, I loaded in the TWEENMAX min and it worked great. Back to the salt mines.

Okay, feeling a little silly about that, but still not in the clear. I loaded TimelineMax.min.js between two script tags in my header (where I had TimelineLite) and I'm getting: Uncaught ReferenceError: TimelineMax is not defined Perplexed, this should be simple. I tried the uncompressed as well, same thing. This is the line it doesn't like: master = new TimelineMax(); Laughing at myself at this point.

I'm somewhat new to GSAP but have been studying intensely - and don't come here without first researching, but... I can't seem to get yoyo/repeat to work on the below, seemingly simple function - it only plays through once forward. I didn't make a Codepen because I think it's either my poor understanding of the syntax or function. I'm simply trying to cycle a short array of .pngs in yoyo fashion multiple times. Only CSS is to make all image visibility = hidden initially. dur = .5; stand01 = document.getElementsByClassName("gest06stand"); function stand(){ var tl015 = new TimelineLite({repeat:25,yoyo:true}); tl015.staggerTo(stand01,0,{visibility:'visible'},dur) tl015.staggerTo(stand01,0,{visibility:'hidden',immediateRender:false},dur,dur); return tl015; } master = new TimelineLite(); master .add(stand()) Thanks in advance for your help.