Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by samuelhigginson

  1. * face palms * They were left over from when I was using setInterval! Totally missed it... twice! Cheers Jack, and thanks for the additional info.
  2. Just trying to get a random interval for each image, but can't seem to figure what I'm doing wrong.. 🤔
  3. Cheers Blake! 🤝 A perfect solution for my initial query. However I've just been experimenting, and it doesn't seem to work so well for staggered animations.. https://codepen.io/halfvillain/pen/GRyBXvm It seems the utility function doesn't give each target their own individual value, and I'm unsure on how correct this. Any ideas? 🤔
  4. hello! 👋 I'm trying to avoid the elements jumping to their 'new' random location (not the FOUC) on Scroll Start. I think it's something to do with the random function getting called on load, and then again when the playhead reaches the function in the timeline? Maybe something to do with the .from as well? Whatever it is, I gave it a good go and I'm stumped. If anyone can give us a hand, that'd be awesome.
  5. Oh yeah! What's that guy doing way down there.. Must have gooped on the conversion somehow. https://codepen.io/samuelhigginson/full/YzqqOvK Thanks for the help fellas! 🤝
  6. Well hot dog. Right under my nose. Thanks a bunch Craig. 🤝
  7. Hey there 👋 Not much to this one really.. Just getting started and with MorphSVG and I can't figure out what I'm missing. Any help pointing out the obvious would be great. Cheers
  8. Hey there 👋 This is my first time using Timeline, so I'm sure I must be missing something obvious. What I'm trying to do is start the record off slow, let it spin baby spin, and then bring it to a gentle stop with some more easing tacked on the end. But ignorance has stopped me in my tracks, yet again. Any help getting this party started would be greatly appreciated. Cheers!
  9. Hey there 👋 I have no real idea of what I'm doing when it comes to javascript, but I'm totally hooked on the interactions and animations that are possible when using it. And today I discovered GSAP, which seems to tie all that stuff together very nicely. So here I am asking for help, trying to implement GSAP into my most recent 'Project'. What I'm trying to do is replicate an interaction on the Wieden + Kennedy home page. The closer your cursor gets to the featured project title (lower left of the screen) the more it's underline grows. When the cursor reaches the project title, the underline reaches it's full length, and underlines the project title. I'll also point out that it doesn't matter where your cursor is hovered on that featured project title, the underline stays at it's maximum value. (Something I've been having trouble figuring out) [It's definitely easier to see this in action than to read my crappy explanation of it, so it might be worth clicking the link up there] Phewf. After piecing together sections of code from around the web, and before I discovered GSAP. This is what I had. https://codepen.io/samuelhigginson/pen/MWKBjJm It's.. kind of something that works? But there are a couple of things that aren't quite right. My line starts to get going as soon as the cursor enters the viewport. On W+K's page there seems to be some kind of 'Trigger Div' which initiates the interaction. My line only reaches 100% when the cursor is exactly in the centre of the Project Title. W+K have a much more satisfying 'Hover anywhere on the Project Title' thing going on. If the window resizes, the distances change and things go wrong. And the final difference I can spot, and what ultimately led me to GSAP. That delicious easing. My lines width is a scaled replication of the cursors distance from the Project Title. What W+K have, is a buttery smooth, slippery sliming line. And I'm all about that. So I got to googling and came across this post, here on the GreenSock forum. I noticed some similarities between the solution offered there and what I had going on, so I forked the pen and started trying to merge that solution with my own. And I ended up with this. https://codepen.io/samuelhigginson/pen/LYGgaab?editors=1111 Not great. But.. not totally disgusting? I know I've probably over complicated this massively, and my approach and calculations are probably way off. But this is all my perfectly smooth brain can manage, for now. So I'm reaching out to you people with the GreenSocks and asking for help. Anything you can suggest to get this little line dancing would be greatly appreciated. Cheers.