Jump to content

SteveS last won the day on July 23 2022

SteveS had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


SteveS last won the day on July 23 2022

SteveS had the most liked content!

1 Follower

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. If you only need the mask to drag then it is fairly simple. I recommend using the GSAP draggable plugin if you can. A custom drag implementation shouldn't be too problematic, but it's more legwork. If you do want morphing, Rodrigo posted some good resources on how to achieve that effect as well using MorphSVG. As long as I'm understanding the desired effect, it should all be possible with GSAP.
  2. I think it should be possible to have a clip-path that is moved by the mouse, but its difficult to intepret exactly what effect you are looking to emulate based off only the two images you provided.
  3. I'm not sure I understand your question or the issue it is rooted in. Could you elaborate?
  4. I think if you want to implement it with more specific animations, my last reply is the best course of action since it will give you granular control over how scrolling moves your elements.
  5. I see. It wasn't snapping, it was just putting in the mouse directed transform. Makes sense.
  6. Not really. I'm not familiar with the method being used. I tried changing the transformOrigin from "50% 50%" to "0% 0%" and it now works correctly on Firefox. I'm not an SVG expert so I don't know why this would be different across browsers, but I do know that the way the SVG is placed into the DOM is strange. It looks like the viewbox is only in the top left but the SVG content takes up the full screen. Is there an article you are basing this off of that I could read?
  7. I'm on Firefox and it looks the same as the Safari video you posted.
  8. To add on, there are more than a few ways to achieve this. Another would be to have both the image and text sections in a larger div and create a timeline that animates the image in, then animates the text up. This would only require one pin and no empty tweens or spacers. A truly ideal solution would not require any extra HTML to be written. I think Cassie's example in the mentioned thread can achieve that, but it didn't work instantly for me so I moved to the other method.
  9. I believe this is what you are looking for: https://codepen.io/StevenStavrakis/pen/XWoeGXE It's not the prettiest solution, but it definitely works. You can read more from this thread: To roughly describe: We create our image section We create a spacer element We make our scrolltrigger such that it scrubs for twice as many pixels as our viewport is tall We make our animation so that half of it is the image scaling and the other half does nothing We set pinSpacing to false When we start scrolling: The image section pins at the top and loses all its height because we didn't put a pin spacer We scroll 100vh, during which our image grows, and our spacer gets moved up the page After the spacer has completely scrolled, we will be halfway through our scrub, and therefore halfway through our animation The second half of the animation is empty, so the section remains pinned as our text comes into view Once the text section is completely within view, we reach 200% of our image section and the pin releases I think this should be the solution you are looking for. @Rodrigo and @Cassie came up with solutions for the original thread, so either might be able to provide more input. I think it would be interesting if instead of making a spacer element we could customize the pin-spacer, but that's not currently possible as I understand.
  10. Yeah, I rectified the issue by adding the mouse movement effect to a wrapping element and then moving the orb in and out of it. Problem solved. I'm still not completely sure what the issue was but it's a fine enough solution.
  11. Yeah, I had to take a break and focus on some other stuff. Life is strange. I considered doing something like this where instead I wrap each "orb" in a container and animate that container. It's not impossible, but it doesn't help me understand what is happening. My basic understanding of FLIP would seem to indicate that it should work. Or, at least, that it shouldn't break specifically in the way it is breaking.
  12. I'm creating a section on a site where when the user clicks on a "bubble" it animates to a different container using FLIP. It works beautifully by itself, but when I apply a hover effect to the bubbles, it instead snaps to the new container instead of animating. I saw this thread which seems somewhat close to the issue I'm having, but I can't really identify what is causing my problem.
  13. The pinned text with images is somewhat simple to achieve and does not require Scrollbar.js If you are talking about smooth scrolling, there is a paid GSAP plugin, ScrollSmoother, that can be used to get smooth scrolling.
  14. Something like this should work:
  15. Sliders and slideshows are where I learned how difficult web animations can be. With GSAP, it is particularly easy to try and use all of the built in functionality even if it isn't a perfect fit. The benefit of GSAP though is that it is super easy to write your own solutions. First of all, the issue with text remaining is above all else an HTML issue. I tried to debug it, but codepen just isn't the correct environment and your styles are fairly complex. Second, instead of writing all the code you have, it's much easier to write a single function that transitions from x slide to y slide, and then call that on a timed loop. Here is an example I wrote that is much less code than what you have currently. https://codepen.io/StevenStavrakis/pen/MWzmwxo This isn't exactly what you asked for, but it should help quite a bit in progressing your debugging.