Leaderboard

I made one too. 😅 https://codepen.io/dipscom/pen/NWdENmr

I call this the Nesting Doll Timeline Technique: https://codepen.io/ryan_labar/pen/PoWxveg

You keep adding more animations to the timeline on every click. Just make the animation once. https://codepen.io/osublake/pen/e1a92bc3b9375cf74e6599da197fc6b0

I'm curious - is this for a class assignment or something? It looks remarkably similar to this other forums post: Well, I got intrigued and "whipped together" an effect (@PointC will appreciate that term) that'll make it super simple to zoom into certain parts of an element by animating the xPercent and yPercent and scale - you just tell it where on the image to zoom into like origin: [0.25, 0.8] would zoom into the spot that's 25% from the left, and 80% from the top (x and y axis). It automatically caps things so that the edges don't collapse toward the center, thus if you do [1

I'd just do a recursive function call to reorder the cards and start again. Simple example.... https://codepen.io/osublake/pen/a5d8def52e58227c738898c4d01e774e

Yes, there are several lotties component like in the Codepen. Thanks a lot for your time and code example. I will try to understand and see how i can implement. Thanks a lot

All functions must be arrow functions that include arrow functions. Everything must be a one liner. TBH, I'm actually surprised at how smooth that animation is using setTimeout.

Oh, I just noticed that it says it waits 200ms.

https://codepen.io/osublake/pen/68b071c8c8d2979b8086838dde4d267c

Yeah, I figured that, but I didn't want to complicate it more. So instead of setting the opacity of every card to 1, just set and animate the cards you want visible. https://codepen.io/osublake/pen/8380c56a4271a063d36ec1cca59fb2ca

Yep. That's why I said it might help to check for the size of the screen, or maybe something like this. https://github.com/kaimallea/isMobile I'm pretty sure that a laptop that has a touch screen shouldn't have any issues.

I really can't help without seeing what this.playLottie looks like and the context of your code. Can you make a really simplified demo?

Hey @sybilrondeau, from the DOCs .play( from:Number, suppressEvents:Boolean ) : self Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is). So try .play(0) Happy tweening ... Mikel

You also might be interested in a helpful effect, @GreenSock created in a different thread for scenarios as such, @Alex_JS

I just updated the demo. It's just a matter of using function-based values and setting invalidateOnRefresh: true on the ScrollTrigger. https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d?editors=0010 Does it work better for you now?

haha, looks like alot of people are into this thing right now. Thanks again!

Have you poked around the demos section? Perhaps you can find some inspiration there. Here's what I imagine you were looking for, or at least it'll serve as a jumping-off point: https://codepen.io/GreenSock/pen/GRrwQRB?editors=0010 Here's a different concept (probably not what you're looking for, but I figured I'd drop it in here anyway): https://codepen.io/GreenSock/pen/rNOebyo Happy tweening!

I think there may be a misunderstanding of the logic though. An animation's playhead is typically controlled by its parent timeline's playhead progressing. This is part of the reason why it's not usually a good idea to nest ScrollTrigger-controlled animations inside of a timeline; it creates a scenario where the same animation is trying to be controlled by BOTH its parent timeline AND the ScrollTrigger (particularly if scrub is set). Like...if the parent playhead is moving forward, but the user scrolls backward...what's the child animation supposed to do? That's what I tried to

What does this.playLottie look like? If it expects an index, just pass it in. onEnter: () => this.playLottie(i)

I think I have a pretty neat solution here for getting a div to move back and forth. Think something like a yoyo, but horizontally. I'm still working on the reason the opacity doesn't go back to 100% on the second pass, but other than that, I'm pretty happy with it. Maybe I'll add a rotation this weekend if I have time. https://codepen.io/PointC/pen/WNRYpZY Edit: I'm kinda wondering if I can make it a little smoother too. I'll work on it.

Hy All, As Zach guided towards applying css property "will-change:transform". And I did the same for locomotive while set the lerp between 0.07-0.08 (you can play with lerp value to your liking mine is 0.08). It will remove the flickering of elements up-to like you will barely feel it. Hope it will be helpful. Point to be noted here is if you use "data-scroll-section" data-attribute for each section on the page then above solution will not work. This solution works on "locomotive and smooth-scrollbar (1st & 2nd demo on scroller proxy page). It's not working for

Yep, @mikel is exactly right. You could do this: gsap.to("#ball1, #ball2", { x: "random(-15, 35)", y: "random(-15, 35)", ease: "power1.inOut", duration: 1, repeat: -1, repeatRefresh: true }); https://codepen.io/GreenSock/pen/61f5574c8dae52f50ea62864db9bee38?editors=0010 There are a bunch of other ways to accomplish it too, but this is probably the simplest. ? Happy tweening!

Hey @Warren_A, Welcome to the GreenSock Forum. GSAP 3.0 is so convenient: var tl = gsap.timeline () .to('.ball',{ x: "random(-20, 20, 5)", //chooses a random number between -20 and 20 for each target, rounding to the closest 5! y: "random(-20, 10, 3)", duration:1, ease:"none", repeat:-1, repeatRefresh:true // gets a new random x and y value on each repeat }) https://codepen.io/mikeK/pen/vYEWqJY Happy tweening ... Mikel

This isn't documented, but this will allow the event to go through. Draggable.create(foo, { allowEventDefault: true }); Be careful about doing that because it might cause other issues. In Webkit, mouse and touch events are handled separately, and in IE/Edge, the default touchmove behavior is to pan the screen. You might be better off letting Draggable handle the click. Just check the event target for an href property like so... http://codepen.io/osublake/pen/9d581a9f3b162376c2afb53d2c6529ed/