Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by smallio

  1. 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!
  2. 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
  3. 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!
  4. let can of worms = opened ?
  5. 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.
  6. 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!
  7. Haha Ooo great! Lovely way of using eq Thank you!
  8. @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!
  9. Thanks dude was going a bit crazy there.
  10. 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.
  11. 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
  12. 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!
  13. 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!
  14. 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.
  15. 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!
  16. 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
  17. @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
  18. 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!
  19. @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.
  20. 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(); } });
  21. @jesper.landberg no doubt I'll catch it on Awwwards all the best man!
  22. 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!
  23. 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
  24. 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)