Jump to content
GreenSock

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

ekfuhrmann

Members
  • Posts

    46
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

ekfuhrmann's Achievements

42

Reputation

  1. @Cassie Unrelated to this thread, I just wanted to let you know I came across your blog not more than a few hours after you responded here, not realizing that you were one in the same as cassie.code until realizing your avatars matched up. Anyway I shared your blog with my team because of just how beautiful and well put-together it is. It's a great site and I just found some humor in that you also just so happened to assist me with my animation question here. Sometimes it can feel like a small world thanks to little interactions like that, thanks for everything you do!
  2. Wow this thread has been incredibly helpful. @Cassie thank you so much for identifying that the pacing would never work due to them needing different easing curves. I really struggled with identifying why the dot seemed to either be so much quicker or so much slower than the path. @GreenSock this is such an interesting implementation and the first time I'm delving into custom-eases so thank you so much! I also really appreciate the commenting in the file!
  3. I've posted about a similar technique a few months back that you all helped me with, but when trying to recreate the same idea, I'm really struggling getting the timing of the dot to sync with that of the line. A few things to consider is that the dot is near the end of the path when it plays, so there is an offset, but even the speed of the line and the motion of the dot seem to be off so I think I'm just approaching it wrong? Outside of trial and error plugging in numbers, is there any way to better identify what the start and end values should be?
  4. Again, thanks for assisting with my question! If you're interested in what that pen was working towards, here is a little pen I threw together leveraging GSAP. https://codepen.io/ekfuhrmann/pen/QWvGBjz
  5. Great stuff, thank you both @OSUblake and @GreenSock!
  6. Yes! That's terrific. Is there any way to have the timeline already "started" so to speak so that the initial state on the page has the rings? Basically this being frame 0:
  7. Hey there, I created a CSS example of what I'm trying to create in GSAP. The issue I'm running into is I can't figure out in the docs how to simulate a negative animation delay outside of building individual timelines for each ring and then running all of those timelines from specific points of time and looping those timelines. A part of me feels there needs to be a better approach to such a simple loop such as this, but perhaps that's not the case? In my head it'd be nice if there is a yo-yo like function I can apply to a stagger tween that rather than going from forwards to back, it repeats itself on an individual tween level (as opposed to a timeline level). So with that said, what would be the best way to approach this animation from the context of GSAP?
  8. I was running a localhost, but the issue was due to me having Disable cache enabled in my developer tools. Once disabled, it was displaying once. No surprise, it was a mistake on my part.
  9. Ah I see. So the issue was that I had Disabled cache toggled on in the Network tab, which was causing it to re-download the image. Under normal circumstances, to your point, it would pull from the cache and not re-download. Thanks for helping with that.
  10. Sorry, let me rephrase a bit. I added this exact codepen to a local project I'm working on that is using local files, and I'm still getting hit with downloading the files twice when checking the networking tab of developer console. For example it looks like this, where the bedroom-pre.jpg is the low-fi image, while the bedroom.jpg is the hi-fi image. As you can see, it's getting served up twice, and I'm seeing this happen in the demo on codepen as well, albeit it's a bit harder to parse there due to the picsum hosting. My <img/> markup looks like this: <img class='lazy' src='bedroom-pre.jpg' data-src='bedroom.jpg' alt='' /> And I'm using the identical JS found in the codepen. Hope that helps clarify a bit?
  11. I was playing around with your lazy loading scrollTrigger demo, and realized that it seems to be duplicating the high-res image download twice, essentially doubling the size of the page. Not being entirely familiar with the methods being used for this effect, I was unable to figure out how to prevent it from double triggering.
  12. Ah such a simple fix. That makes sense and is so obvious now looking back at it. Thank you!
  13. I came across what I presume to be a bug, but also could be a lapse in the way in which I'm using scrollTrigger to handle my header. Responsively the header works well across different displays on a fresh page load. That said, I run into issues when resizing the the window without reloading. An example of what I'm talking about can be seen by resizing the vertical window size (viewport height). It seems like scrollTrigger isn't recalculating the depth which handles the scroll speed of that parallax layer resulting in the following: I've included invalidateOnRefresh hoping that would resolve the issue, but to no avail.
  14. Yes this is exactly what I was looking for, thank you for clarifying that for me. I fortunately do not think I need to worry about this for my current project, but I really do appreciate the other resources to use as reference should it come up. Thank you again for being so helpful with this, I really do appreciate the help immensely.
  15. @akapowl This has been incredibly helpful, thank you! I'm still trying to wrap my head around the idea that the ScrollTriggers are all working off each instance of an element, in this case .section, so you just use a conditional to handle what happens with that specific section based on the scroll trigger event. To your point of simplifying the x calculation, I found that return -cardsWrap.scrollWidth + oneCard.offsetWidth; works quite well and you can check out the updated codepen below! I have 2 additional minor questions for you if you've got the time. Is there any way to modify the "scroll velocity" for the horizontal section? I was using a fixed hero on my site so that the content would scroll over top of it (basically pinning the hero), but would it not be better to use ScrollTrigger to do that since it's already handling the rest of the page? codepen
×