Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

30 Newbie

About ekfuhrmann

  • Rank
    Advanced Member

Recent Profile Visitors

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

  1. 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.
  2. 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.
  3. 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
  4. 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.
  5. Ah such a simple fix. That makes sense and is so obvious now looking back at it. Thank you!
  6. 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 invalidateOnRefres
  7. 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.
  8. @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
  9. I've just started dipping my toes into scrollTrigger, but am running into a few issues. The examples offered by GSAP are fantastic, but I'm struggling to understand how to bring a few of them together into a cohesive page. What I'm looking to do is have a page that has vertical pinning sections, which then has a single section (Section 3) that contains a horizontal list of cards which scroll through horizontally, before then continuing on vertically. I've tried to calculate the "height" of the horizontal scrolling section to then give Section 3 the right amount of "vert
  10. Ah, this is why I love this community so much -- your wealth of knowledge and assistance is absolutely top! Going with your first suggestion resolved the Chromium issue as the element was able to scale down no problem, and then your second suggestion of adding a slight rotation to it resolved the Firefox issue. Fantastic stuff, thank you!
  11. I made a grid with a bunch of cells that are supposed to animate a dot scaling up and down on hover, but in doing so I came across some peculiar browser quirks that one of you animation experts here may be able to help me make sense of. First-things-first on Edge (Chromium) when I hover on a cell, the dot will smoothly scale up and down as expected, but it will also occasionally leave some ghosting behind like the following: Moving a cursor over any of these points or simply re-animating the cell will usually clean it up, but it's definitely far from ideal. I f
  12. Thank you so much @ZachSaucier! With your assistance I was able to get the animation done. Really cool, and quite simple in the end once I realized that my path was inverse to the ball (hence the end position being `motionPathNum - 0.33`). A completed example can be seen below, thanks again! https://codepen.io/ekfuhrmann/pen/JjbYLgg?editors=0010
  13. I'm attempting to animate a static dot along an animated line, but I'm struggling with the Motion path tools, and may not be thinking about this in the correct way. To start, the SVG is clipped to allow me to draw an infinite line that moves up and down on repeat. In order to have it cleanly loop, I essentially duplicated the line outside of the SVG view and just move the position of it, giving the illusion of a never ending line. The illusion works well, but if there is a way any of you can think of that doesn't require doubling the width of the SVG, I'm all ears. I wish there was a `backg
  14. Thanks @ZachSaucier! I've edited the top post so that people can find this easier if they search for it. As always fantastic work!
  15. Great, I really appreciate all of the assistance and hope you have a great rest of the day!