Jump to content

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

SteveS last won the day on June 24

SteveS had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


SteveS last won the day on June 24

SteveS had the most liked content!

About SteveS

Profile Information

  • Location
    US East

Recent Profile Visitors

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

  1. Hi @j0hannes , In my experience, it's a much better practice to create GSAP effects for elements inside their component and use Refs whenever possible. Doing this often solves a lot of issues just due to the fact that you make everything more predictable. Also, you can register your plugins just under your imports, not as an effect of a component. I'd probably make that change as well.
  2. I figured if it's just setting class names that timeout would be fine. If you are already using gsap then it makes sense that doing it with a tween would be better.
  3. I looked around and didn't find anything promising. As I'm sure you are aware this is a bit of a misuse of the library. You could force the matter, but you are better off writing your own loop. The stagger functionality is really simple to implement if all you need to do is have there be a time offset. items.forEach((item, i) => setTimeout(yourFunction(), staggerAmount*i))
  4. So if you need to get the start and end values ASAP, is there a way to target the next "tick"? Or should you manually refresh then call the values?
  5. I can't seem to replicate the issue shown in the video within the codepen provided. If I had to guess something about the way your items reflow on mobile size is messing with the scrollTrigger. Without the actual site there's little I can do in the way of debugging. If you aren't using the scroll effect on mobile you can try killing the scrolltrigger if it detects it's below a certain screen size and then recreate it if it returns to laptop/desktop.
  6. Still not super optimal. You could try invalidating the smoother trigger on refresh, but I feel if that was needed it would be a default behavior.
  7. On orientation change, are you firing ScrollTrigger.refresh()? Based on your original post I'd be curious if the extra debounce you've implemented might be messing with things. You can also call refresh directly on the scrollSmoother with ScrollSmoother.get().scrollTrigger.refresh().
  8. Definitely odd. I played around a bit and console logging the scrolltrigger in console will give different values for start and end compared to logging the values directly. @GreenSock might have some insight.
  9. I'm not sure I understand the full question, but yes, you can have animations on parents of animated elements.
  10. Hi @PremierPlymouth, welcome to the forum. It's hard to say without seeing your code. When you load into your page in landscape mode does everything work as expected?
  11. Yes, that is an effect I'm well familiar with. I haven't used curtains but I've implemented it from scratch in ThreeJS. It can be quite tricky to work with. It's worth noting I thought the Hello Monday site used an SVG method, but it is actually using some sort of canvas/3D effect.
  12. Sure, like you said it's similar to a carousel. It's just a carousel that goes forward or back based on your scroll position.
  13. I think I understand what you are talking about. If so then you have to animate the left hand content manually when the scroll hits a certain point. It's a pain to do honestly.
  14. I agree and disagree with akapowl. I agree that you likely aren't going to get a full fledged solution on the forum as this is a complicated effect. However, I believe that this is entirely possible with SVG and GSAP, no WebGL needed. The general strategy is outlined by the pen you provided. Get points along the edge of the SVG Store the orignial position of each point When the mouse enters, get the position of the mouse Based on the position of the mouse, animated the SVG points with some logic here they use a built in function on the generative utils (which looks like a really neat library) As mouse moves, adjust the SVG points accordingly This is a gross oversimplification of the effect. It will require experience with frame to frame animation and good knowledge of the DOM, but it IS possible. If I had to guess, it would probably take me several days of playing around to get something even remotely similar. Definitely not something you can just drop in and have work.
  15. I'm not sure I understand what the problem is.