Jump to content
Search Community

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. Is the repo you provided in the original post up to date? I'll take a deeper look today.
  2. Additionally, if you have to wait 200-300 ms to do anything inside an effect or otherwise state related, it is worth looking at the tick() function.
  3. @Rafal Potasz Not sure what solution you came up with, but I tried my hand and made something work: https://github.com/StevenStavrakis/svelte5-gsap-scrollsmoother (You'll have to install GSAP yourself because I get a 403 when trying to use the private npm registry for some reason) The meat of the code is here: <script lang="ts"> import "../app.css"; import { navigating } from "$app/stores"; import { ScrollSmoother } from "gsap/ScrollSmoother"; import {ScrollTrigger} from "gsap/ScrollTrigger"; import gsap from "gsap"; let { children } = $props(); gsap.registerPlugin(ScrollSmoother, ScrollTrigger); $effect(() => { // on first load, we need to create the smoother ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", }); }) $effect(() => { const smoother = ScrollSmoother.get(); if ($navigating === null) { // When navigating is null, that means we are no longer navigating; the page has been loaded ScrollSmoother.refresh(); } else { // when we start navigating, we scroll to the top otherwise we get some weird behavior if (!!smoother) { smoother.scrollTo(0) } } }); </script> <div class="flex" id="smooth-wrapper"> <div class="h-screen w-[200px] bg-slate-600 text-white p-8"> <h2 class="text-xl font-bold">Menu</h2> <a class="block" href="/">Home</a> <a class="block" href="/second-page">Second page</a> </div> <div class="w-full" > <div id="smooth-content"> {@render children()} </div> </div> </div> It makes use of effects and the `navigating` store. There is some strange behavior where the scroll position isn't reset when navigating pages, so I just force a scroll to the top of page. I'm sure there is a more elegant way to deal with it, but that is probably already covered in another post.
  4. I've been loving this combination so far. If someone is looking to combine the two, hopefully, they come across this post.
  5. 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.
  6. 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.
  7. I'm not sure I understand your question or the issue it is rooted in. Could you elaborate?
  8. 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.
  9. I see. It wasn't snapping, it was just putting in the mouse directed transform. Makes sense.
  10. 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?
  11. I'm on Firefox and it looks the same as the Safari video you posted.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  • Create New...