
smallio
Members-
Posts
121 -
Joined
-
Last visited
smallio's Achievements
Newbie (1/14)
89
Reputation
-
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!
-
Absolute div wrappers, or SVG coordinates. What do you suggest?
smallio replied to sashaikevich's topic in GSAP
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
- 11 replies
-
- each
- reverse timeline
-
(and 1 more)
Tagged with:
-
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!
- 11 replies
-
- 1
-
-
- each
- reverse timeline
-
(and 1 more)
Tagged with:
-
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.
- 11 replies
-
- each
- reverse timeline
-
(and 1 more)
Tagged with: