monospace

It's pretty basic but not obvious, and, at least to me, it's the kind of functionality that I thought would be part of the core framework but isn't. It's definitely going into my own snippets library.

Fantastic. Is there a featured Helper Function page? Because that would totally belong there.

Ooh, nice, delayedCall is exactly what I was looking for. That's like gsap's version of setTimeout, right?

What's the most efficient way to add a pause/delay of arbitrary length at an arbitrary position in an existing tween or timeline? I'm looking for something like addPause()but with a duration parameter as well as a position parameter. See CodePen for what I'm trying to achieve. Thanks for your time.

Interesting question, very similar to my question about carousels. There are many ways to skin a cat (not that I would ever do that, I love my cats)

No, no, your code was clean and concise, and making those changes was easy. What I was trying to do was come up with a way to make those settings configurable, so that by passing a variable to the function, something along the lines of initCarousel('leftright'), or initCarousel('downup') , I would be able to re-use this without having to re-write it. Again, easy enough, but that would have made the code longer again, and before you know it I might have ended up with something along the lines of your Helper Function: all good and fine, but it would have defeated my goal of having a small, clean snippet of code with a single purpose. So rather than making this configurable, if I ever need a version of this that moves, say, left-right, or up-down, I'll just modify it as needed and use it that way.

Okay, yeah, after messing with this a bit: wrong approach. It's easy enough to change orientation and direction, but to make it configurable requires a lot more code. Far more efficient for my purposes is to just modify the code as needed and then drop it in.

Yes, thanks, I had already found that helper function you prepared and it's a very good solution for a full-featured carousel. But sometimes what's required is just a quick "effect" style animation of a bunch of simple elements, not a full fledged application. Thanks again for your examples, I'm in awe of their elegance. Now trying to figure out how to reverse direction with just one variable. ?

I want to avoid duplicating the first or the last item, because that would mess with screen readers. I would also like to avoid having to do any specific prep work on the items themselves, that is, I want to be able to use them as provided (be they images, divs, whatever) without having to modify them in any way. And by lean and clean I mean code that has the least amount of bells and whistles (no sliders, pause or reverse buttons, etc), and is easy to comprehend and modify (i.e. change x-axis to y-axis, maybe add a fade or a scale or a bounce or something.) Ideally of course it wouldn't bring down a user's computer, but I don't think that's much of an issue in this day and age. I don't mind a few extra lines of code to accomplish that. All that said, thanks for those very interesting examples. I'm going to have to spend some time tinkering with those.

Apologies for starting yet another "carousel" related topic, but I was hoping some of the brilliant minds here could help me out. Is there a way to use GSAP to create an infinite looping "carousel" style animation that doesn't repeat the first element in the list, like this embedded CodePen? Mind you: I'm not looking for fancy controls to start or stop or reverse anything, just a simple, clean way to loop a bunch of items that also makes sense in a screen reader type of environment—no repetitions of items in the source code.

Brilliant. Thanks!

Okay, I think I am following most of what's happening here. Now what do I do if I want this animation to pause or stop? Is there a way to get a reference to this tween/timeline and do a .pause() on it?

Wow, thanks for the speedy response. And thanks for the elegant re-working. Lots of things to pick apart for me there. Returning a fromTo() tween out of a function? Whoa. Am I right in assuming that xPercent and yPercent let you set the origin of a sprite/div? Nifty! And built-in shortcuts for randomization? So much to learn!

Hey everyone, first time poster here. I'm building an animation of a "bubble" background. The idea is that bubbles are rising to the top of the container, and once out of view get repositioned below the bottom edge of said container. So far, so good, have a look at my CodePen. Problem is that the bubbles/sprites get repositioned smack inside the middle of the container, creating a "popping" effect that I do not want. I know that setting x and y in GSAP is using relative values, but the number I'm using to reposition the sprites is high enough that they should get reset out of view. Any ideas?