OSUblake

@chimp1nski are you using SvelteKit or Vite and something else? I saw you made a post in a thread related React, so I'm trying to narrow down the issue to SvelteKit or Vite.

On 4/26/2022 at 8:16 AM, chimp1nski said:

Don't think it's a Netlify / Vite issue though.

It's definitely an issue related to SvelteKit or Vite as this does not happen with other build tools. 

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.

issue.zip

You should register everything, including the ease to guarantee that it will work in a production environment.

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.

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.

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.

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.

https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray()

function createTimeline() {
 const tl = gsap.timeline();

  gsap.utils.toArray("img").forEach(element => {
    tl.add(createTween(element))
  });
  
 return tl;
}

Sure, you can animate particles randomly, but it's hard to advise without seeing what you are doing in context. Can you put what you've tried inside a minimal demo?

Thanks, I'll check it out.

You'd have to normalize the end values based on some constant that you like. 

let scrollSpeed = 3500;

And then something like this should give you constant speed.

end: () => `+=${scrollSpeed * (maxWidth - window.innerWidth) / scrollSpeed }`

I'm not seeing anything unusual about it. If you want the second one to move at the same speed as the first one, then you'd need to increase the second ScrollTrigger's end value.

So like I was saying, you need to target the elements. nuxt-picture is a component, so the actual element would be $el on the ref object. And I'm assuming you were wanting a v-for for the images.

https://codesandbox.io/s/vue-gsap-image-rotator-forked-1jxi5u?file=/pages/index.vue

Welcome to the forums @big aaron

this.images is an array of JavaScript objects for the urls. Your animations need to target the actual image elements. If you can make a minimal demo we can look at it. You can fork this CodeSandbox. Just make it as basic as possible. 

https://codesandbox.io/s/gsap-nuxt-starter-r5lkg

Hi ripmurdock,

I've read your posts several times, and I'm very confused about what you're asking or having problems with. It's not clicking for me what those console log statements are supposed to mean, or why they're wrong. What are you expecting to happen in the demo above and what do you think should be the correct behavior?

Hi Sean,

Animating particles like that is really not something GSAP can really help with you with. Those projects you found are complicated for a reason... that is a very complicated effect that requires a good understanding of WebGL and shaders.

It's hard to answer a question without seeing the problem. Can you try to recreate the problem on CodeSandbox? It has a bunch of different templates that you can use to match your project's setup. 

https://codesandbox.io/

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.

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

https://css-tricks.com/almanac/properties/f/font-display/

Quote

• 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.

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.

You need to create your animation outside of the handler. Then you can toggle the reversed state of the animation like so...

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

Welcome to the forums @NickPish

You can convert that into a timeline, and then add empty space on the end of the timeline like so. Just adjust the position parameter to get the spacing you need.

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

Hi gn90,

It's really hard to answer ScrollTrigger questions without a minimal demo. You can have multiple pages as you want on CodeSandbox. If you're just doing vanilla JavaScript, meaning no framework, you can use HTML5 static template.

https://codesandbox.io/

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

Welcome to the forums @Chybosky

We really can't troubleshoot a live site for you. If you're having issues, please make a minimal demo of your issue. Thanks!

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.