smallio

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.

ah that would explain it. ? Still trying! This is proving to be way more pesky then I initially thought lol... Shall share the fix once I find it Cheers!

You got it Thank you very much for the help Unfortunately I'm still seeing the problem on all browsers on your version. Any idea why? Cheers, Smallio

@GreenSock Thank you for the response. Yup totally understand that! I sucked it up & spent the last 40 mins getting it down to... well... still a lot of code but I've noted the problem area on lines 76 - 120. The previous code is needed for the menu to open (needed to show you the problem) and the code after is just to init barba (also needed to show you in context) Sorry for the jumble but it's the best I can do lol. Maybe you can make something of it? Cheers, Will https://codepen.io/wsdesign/project/editor/XveMOR

We must be both working on a very similar site judging from your last post & now this one haha. Anyway, It's a complex topic often using barba.js & other libraries to do AJAX transitions for fluidity. I'm working on a project tiles to project page transition for a personal project using barba & gsap. I'm happy to inbox you that when I'm done & see what you can extract from it. That being said... I've learned a lot from the following sources: To start you off getBoundingClientRect is your friend & helps if you want to do something like this (half page transition). This next example is probably what you need (not using gsap though). You can easily convert over & use timelines etc with it. Here is one using Vue & GSAP together Here is React & GSAP And finally, this one is mostly css but I've included it anyway incase you want to learn from it. Hope that all helps!

@jesper.landberg has been doing this exact thing. The first version is almost exactly the effect in on that site, but I've attached a slider version done made by him as well.

Hi all, Been a while Working on a project with a fullpage menu. On that menu I've got a line under each menu link which gets triggered on hover via the following statement. Unfortunately when I click any of said links and go to another page, when you open the menu again the corresponding line from the previous page is still visible. Obviously that hover out does not trigger due to the cursor not moving off the menu element, so we have to somehow do it via click. One would think you could just check if the animation is reversed on click, if not reverse it... however no cigar as of yet. https://codepen.io/wsdesign/project/editor/XveMOR Hopefully someone can see what's going wrong! Cheers, Smallio $(".menu-link-wrap").each(function(i, element) { var tl = new TimelineMax({paused:true, reversed:true}); var menuHoverLine = $(this).find(".menu-hover-line"); tl.fromTo(menuHoverLine, 0.4, { scale:0 }, { scale:1, transformOrigin: "center", ease:Power1.easeInOut }); function toggleReverse () { if (tl.reversed() === false) { tl.reverse(); } else { console.log("already reversed") } } $(element).hover(menuLinkHover, menuLinkHover); $(element).click(toggleReverse); function menuLinkHover() { tl.reversed() ? tl.play() : tl.reverse(); } });

@jesper.landberg no doubt I'll catch it on Awwwards all the best man!

Another great thread! @jesper.landberg Love your work man Seen a few things on codepen recently... not to mention how juicy the Asaro site is!

Precisely this, aha Funnily enough this was the pen that I was trying to find... it's buried somewhere on my codepen likes! Thank's for the help @mikel

Hi all, Interesting little problem here. I'm trying to make each white box perfectly align with the left edge, centred on the y axis & expand to half the viewport. The problem happens when I change the box height/width it then messes up the rect properties & thus, throws the whole thing out (tried a second delayed timeline as well!). Assuming this will be an easy fix tomorrow, 3am coding always ends up being way less productive then a good nights sleep & a fresh mind. Just thought I'd throw it up here anyway & hear everyone's 2¢. All the best, Smallio (view fullscreen for this one)

@PointC Oh nice, I hadn't thought of doing it that way.

@Sahil Thank's for the demo Very interesting, will have a go at this later on!

This is such an awesome read guys, props to all of you. Miles away from what I can do, but I'm super inspired reading through all these examples. ?

Hi guys, Hope everyone has had a productive week! Messing around with some practice animations today & I couldn't help but wonder how one would move multiple objects to the same position, even if they are in different positions on the page. My guess is storing the end x/y positions in variables & then tweening to that? I've done the values manually (very rough) but nevertheless, I'd love to know how all of you would go about such a thing. Secondly, I was thinking about was how you would then time them so the furthest one still looks the same ease as the closest one. Will have a shot at that now, assuming it's just a bit of division for that part. Cheers, Smallio