Jump to content

OSUblake last won the day on June 4

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by OSUblake

  1. There is definitely something horribly wrong with how SvelteKit and or Vite handles imports. In production is not even importing ScrollTrigger. What's strange is that it works when importing the minified version. 🤷‍♂️


    // works
    import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.min.js';


    What's even stranger is that it's mixing imports. It's definitely importing the ES Module version of gsap, but importing the ES Module versions of the plugins doesn't work, which is why you have to import the UMD files from the dist folder, but it should not be like that.


    I'm still investigating how to fix this. Not sure if it's something we need to add to our package.json, or it's something that can be resolved with Svelte or Vite configuration.


    In the meantime, here's a workaround that seems to work, and is actually what I recommend for any project that uses modules. Create a file to import gsap and all the plugins you are going to use and register the plugins in that file. That will save you from having to write multiple imports in your files and registering the plugins over and over again.




    • Like 1
    • Thanks 2
  2. 2 hours ago, chimp1nski said:

    Calling the refresh() method of ScrollTrigger when executing the scrollTo callback fixes this.
    I don't know if this is the best solution since I am a newbie myself.


    Yep, that's what I mentioned above.


    On 4/21/2022 at 5:04 PM, OSUblake said:

    And we need to kill some ScrollTriggers and effects when navigating to a new page. We also need to refresh ScrollSmoother on new routes.


    • Like 1
  3. Hi vanduc,


    As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects. 


    We are more than happy to answer GSAP-specific questions though. So if you give this effect a go yourself and get stuck in the process, feel free to post a minimal demo here and we'll give you some advice on how to get closer to your goal.


  4. Hi TGC,


    I would recommend ignoring anything scroll related at the moment, and just focus on figuring out the animation first. If you can make it work with a timeline, then all you have to do is hook up ScrollTrigger. I gave similar advice here. It's much easier to approach as an animation problem and not a scrolling one.



    • Like 1
  5. Welcome to the forums @navug


    3 hours ago, navug said:

    But i wanna do it the right way (the efficient, readable and clean way)


    There is no right way. That's something you'll figure out over time as every situation is unique. What works well in one case may not work that well in another. 😉


    And your code looks fine. If you wanted, you could shorten it a bit with GSAP's toArray utility.



    function createTimeline() {
     const tl = gsap.timeline();
      gsap.utils.toArray("img").forEach(element => {
     return tl;


    • Like 1
  6. You can also change the font-display to tell it how to load the font. Right now you have it set to swap, which will show the fallback first.





    • swap: Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.




    • Like 2
    • Thanks 1
  7. I looked at your demo, but I'm not sure what you're asking.


    4 hours ago, gn90 said:

    index.html is the "short" page and test.html the "longer". If you just scroll once with the mouse on both sites you can clearly see that on test.html it jumps way further than on index.html because the page itself is longer.


    What are you expecting to happen, or what do you think should happen when you saying this? Everything looks fine to me. The horizontal animations are matched up with the scrollbar position.


    • Like 1
  8. Instead of messing with the z-index, you can animate autoAlpha instead of opacity. It's just like opacity except that when it is at 0, it will set the visibility to hidden. That means you click your first panel while the second panel is hidden.


    So now you just need to hook it up to ScrollTrigger. I added some empty .set() tweens in there just to add a little gap in between each section's animation. 


    See the Pen BaJXBrb by GreenSock (@GreenSock) on CodePen


  9. Welcome to the forums @AlesS


    I would recommend starting out by solving the animation first. Once your animation like you want, then all you have to do is hook it up to a ScrollTrigger and you should be good to go.


    I'm assuming you're trying to do a crossfade, so you'll probably need to absolute position the second section over the first section. Then use a Timeline and the position parameter to do your fading.


    If you get stuck along the way, just a post a demo of your work and we nudge in the right direction.


    • Like 4