smallio

Ah lord, that was the one I edited & left for later, whoops! Swapped the vars back now lol. Good shout on the normalize though, going to give that a try. Cheers!

Personally I'd convert everything to beizer data using morph SVG & then do something like this. Rinse & repeat for as many "orbits" as you need. pathDataToBezier can convert all of them together in one go as well. Hope it helps

Hi all, Trying to recreate a timeline slider @jesper.landberg made for some constructor practice. Nearly finished, however I can't seem to get the z-index/xPercent right for the back animation. I'm wondering if anyone knows how to keep the transition the same when we go back & keep the slide underneath like when we go forward? Really need to get better with slide logic, for sure my weakest point. Cheers!

let can of worms = opened ?

Superb Jack thank you so much I shall be renewing my membership once I get paid this month. This forum is honestly the best in the world.

Super simple demo here to illustrate the problem. Clicked white box should go to the centre of the screen & the others should fade out. Works the first time until you reverse (click top blue box) & then try to click another white box. What's the best route to fix this? I feel like the problem lies within the stored variable not updating in time or holding on to the wrong info. Cheers!

Haha Ooo great! Lovely way of using eq Thank you!

@PointC time to open this old boy of a thread up again Last question I promise lol! I'm working on the following roll over text effect which I really like. Problem is there is about 50 lines of code doing what you could do in a few which is making it really slow. I know there is a cool way of looping through with something like this... but how do you do that with split text as you need to access each group of characters separately. How would I do that? let headingsA = [ ".video-title-1", ".video-title-2", ".video-title-3", ".video-title-4", ".video-title-5", ".video-title-6" ]; let headingsB = [ ".video-title-1b", ".video-title-2b", ".video-title-3b", ".video-title-4b", ".video-title-5b", ".video-title-6b" ]; var splitText1 = new SplitText(headingsA[i], {type:"words,chars"}), splitChars1 = splitText1.chars; var splitText1b = new SplitText(headingsB[i], {type:"words,chars"}), splitChars1b = splitText1b.chars; Cheers!

Thanks dude was going a bit crazy there.

I often use the following to toggle hovers with each functions. function inOrOut() { tl.reversed() ? tl.play() : tl.reverse(); } Here the timeline is playing upon reloading the page & then in the wrong direction. If I start out with the timeline as "reversed: false" it still plays the wrong scaling bigger instead of smaller. I guess it's being triggered somehow before hand & then starting in reverse? This pen by @PointC uses the same setup & it works perfectly. Why is mine glitching back? Cheers.

Oh wow, I was way closer then I thought. Just needed to remove the ticker & use mousemove instead ehh. Thanks Mr. C How do you think the structure of the code is? I'm at that stage where every day something clicks & it's super, super exciting, just still making a stupid mistake here and there that gets me stuck for hours. Can't wait to get past that.. if that's even a thing lol? Cheers, Smallio

Hi guys Trying to make my own versions of commonly needed things with gsap as a little learning exercise. Today is parallax. I'm super close on this one, but can't get it to work properly with multiple objects (& that's half the point of this exercise). After a few forks I'm still stuck, so I thought I'd see if someone can point me as to where I've gone wrong & also any pointers to structure/make it better. I hope it's fairly easy to follow. It's 90% from scratch so I'm keen to hear how I'm doing & how to improve Cheers!

Yay no more stupid stopPropagation :DDD

Well I'll be dammed, it worked. Tried pretty much every other listener/handler in existence & somehow left that one out... Slightly embarrassing but also typical lol. ? Any particular reason why it behaves differently? I tend to use hover & mouseover/out but might be using that more often now. Thank you dude!

Finally fixed... however I can't stop the 3 instances of the hover being called. Very strange behaviour. Tried stopPropagation() & preventDefault() to no success. Is there a way using gsap to fire events only once or something similar that might help? Cheers.