Rizzer

Oh yeah, that is what i meant, "TweenMax.defaultEase" didn't work. I thought TweenMax was the core class and TweenLite was a stripped down version, instead of TweenLite being the core and TweenMax adding further functionality ontop.

Dipscom... that nails my misunderstanding, once again. I googled the staggerTo() method, checked out some threads on here, but didn't look at the docs! I guess that is because whenever I've referenced docs in other libraries, they were always hard to comprehend. These docs aren't too bad tho. From here on I'll google it, search the threads, then check docs, before posting. In retrospect it makes sense that there would be a separate parameter for the time between staggers and the position on the timeline at which the tween occurs. Otherwise we would be replacing a necessary parameter/losing functionality when using staggerTo() instead of manually staggering it Nuggets learned: >time btwn staggers is different then position on timeline >I kind of thought that.. you generally target one object per tween, and if you're targetting multiple, then you generally use a stagger. But those are two different use cases. You can target as many things as you want in one to() or from() tween as long as you put them in an array in the tween >should have known to put all repeating stuff in a var... >being able to set a defaultEase for all tweens is awesome / similar to using putting all eases in a var but even cleaner (surprised it doesn't work with TweenMax) >that way of creating labels via add() is nice. I think of it as labelling a frame in flash. >I think I've read that setting position by label instead of seconds is easier to read, which i guess is true, going to be utilizing labels on future anims Its still a bit weird to me why we don't need to stagger the sets(), and that it doesnt throw off the timing flow of the other staggered tweens. So I checked out the docs there. I like that it clarifies that set() is the exact same thing as any to() or from() tween, with zero as a duration. But set()'s still need to occur on a precise position on the timeline. Actually wait. if they are an instant occurance (no duration) then maybe there is nothing to stagger. its like flick the switch, uses zero duration, onto the next tween

hmm here is a barebones approach with separate timelines, http://codepen.io/Rizzer/pen/pNrqmV?editors=1010

Update: So I've added the other 2 columns of arrows, and left the class names the same ofcourse, and changed my to's to staggerTo's, attempting to do everything in the same TweenMax timeline. Here is what that looks like: http://codepen.io/Rizzer/pen/KNvrXp?editors=1010 It's kind of working, but the staggering is not behaving the way I need it to. Instead, it plays the first bit of column 1, sits thru the whole duration of the columns anim, then plays column 2. I need them to keep playing consistently the whole time, with the columns start points overlapping each other. The 2 reasons why it is not behaving like that appear to be: > there is no staggerSet() (checked out the one thread about that on here but that guys solution seems different then what i need) >more importantly, my delay's are pointed to the delays for the anims within each column. But i need them to be delaying between each columns anim This suggests to me that I'm going to require a separate (nearly identical) timeline for each column, add them to a main timeline, and overlap those. But im not sure if thats the way, or how that nesting would look. It seems like a looping problem + needing a work around for no staggerSet(), but I don't have the pseudo code clear in my head to fix either. Any insights?

Wow Pedro, thank you so much, this has really made my morning, im very grateful for your help. these are the nuggets I have picked up from comparing yr version, (aside from the big one about SVG not supporting z-index) >we don't need the version, style, or xml:space attributes in the SVG element >I thought clipPathUnits=objectBoundingBox was necessary for the clip-path to scale in relation to the SVG, but now im seeing it as just another way to describe x/y/height/width. its relative either way >didn't know you assign the clip path right inside the svg to the elements you want clipped like that. Much nicer then having to assign it via css >xPercent and yPercent is clearly the way to go. I had caught something about it being preferred somewhere but didn't realize yet that it applied to my situation thanks again man

Hello. Guy in the very early in the learning process here. I am trying to re-create a seamless looping effect, inspired by this: (except with 3 svg arrows in a row instead of letters) So I've been scouring these pleasant forums about some seamless loops and clip paths and such. I have a seamless loop roughly animated. However for some reason, the svg rect im using for the clip path is also animating. despite not being targeted anywhere, or its parent animating. u can see it here: http://codepen.io/Rizzer/pen/ObgJpL/ Also, even though this will be happening outside of the clip-path and therefor offstage, I've been trying to constantly set() the zIndex of each arrow so when one hits the bottom position, it will be ontop of the previous one. But I can't seem to get it to listen to my z-index commands (even via css) Lastly, is my overall approach to this task.. in line with the best way to achieve the effect in the reference vid? This isn't more sprite appropriate since all the arrows are the same right? I hope I conveyed these concerns clearly enough. Any help appreciated!! Thanks Luke

I was just wondering the same thing after watching those videos. Prior to seeing that visualizer, I've been thinking to myself: how is everyone planning out their timelines without seeing a visual. Does everyone storyboard out their anims and time out that storyboard in Adobe Animate or AE first to get the timing down? I've seen some crazy animations using GSAP, and i can't imagine them being animated sheer straight-forward style

I'm new to this community, and this is an incredibly inspiring post. Thank you for sharing your story