OSUblake

11 minutes ago, scottlynotlie said:

Would there be any issue with not using data-scroll-section?

That feature will not work with ScrollTrigger, so it's fine. Also, we have our own smooth scrolling plugin for Club GreenSock members.

https://greensock.com/scrollsmoother/

23 minutes ago, Milk0 said:

Regarding the problem on iOS.. if someone has a way to fix it feel free to share, i can't find a way out from this at the moment

We're looking into that. Can you confirm if the issue is still present if you don't create and the ScrollSmoother and just do ScrollTrigger.normalizeScroll?

// let smoother = ScrollSmoother.create({
//   smooth: 1,
//   normalizeScroll: true
// });

ScrollTrigger.normalizeScroll(true);

Welcome to the GSAP forums @omi

I would suggest using a different ease. Check out the graph of a circ.in ease. Notice how the very end is almost a vertical line, which can result in a snapping-like behavior once the animation gets near the end.

Welcome to the forums @Priti Parikh

Before continuing any further, you should refactor your code as you have nested timelines, which is going to mess stuff up. Please check out the Most Common ScrollTrigger Mistakes article, especially the part about nesting ScrollTriggers inside tweens.

It runs fine on CodeSandbox for me. Am I missing something?

If you're using React 18, maybe the issue is related to this. If not handled properly, your from animations might end up creating a from logic issue. 

I would also make sure that your effect has a dependency array and you kill of any animations you created in it. See the Cleaning Up part of our React Guide for more information about that.
 

Hi Shaun,

I would keep everything scoped inside a function, kind of like this. And I would also use fromTo animations just to make sure you don't into any from logic issues.

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

Then I'm not sure what to really recommend and this point. If that CodeSandbox version works fine for you, I would reduce everything you have down to that, so just some basic panels and nothing else, and then start adding in the rest of your page's layout, images, text, etc until you figure out what might be causing the issue.

Here's a starter template with nuxt if you want to see a basic setup. Notice how we add transpile: ["gsap"] to the build in the nuxt.config. Otherwise, you would need to import plugins from the dist folder.

https://codesandbox.io/s/gsap-nuxt-starter-r5lkg?file=/pages/index.vue

Thanks for demo. Like I was saying earlier, you can use a Timeline's position parameter to control that.

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

Also, if you are going to animate the same element more than once, you may want to consider use fromTo animations instead so that you don't create from logic issues.

I'm still a little unsure about what you're having an issue with. Can you make a minimal demo that clearly shows what you are having an issue with? You don't need to include React or anything else not-related to the animation issue. Just something simple like an animation with a colored block. Thanks!

7 hours ago, nicolaseielll said:

How can I make sure I don't? At least this is what my package.json says:

Can you verify that it is the latest version. Look for the version number inside the package.json in node_modules > gsap > package.json.

Welcome to the forums @Hernanbp

It's very hard to answer a question like this without a minimal demo. You can use CodeSandbox if you need to use next. Thanks!

Hi nattha,

There's some basic dragging demos here.

And there are a couple in our CodePen collection.

https://codepen.io/collection/KpNYOd

Hi mea_culpa,

Did you have a question? 

Welcome to the forums @oskar råhlén

It doesn't look like you have installed correctly as all of the bonus plugins are missing from your screenshot. Maybe you have an older version cached.

And you'll need to import every plugin from the dist folder in next.js for the time being.

Welcome to the forums @b-link

To do the animations on the site, ScrollTrigger is probably not the best tool. Notice how you freely scroll around on that site. That's because all the animations are event driven, which is the kind of stuff the Observer plugin can help out with. 

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

See the Pen vYWvwXV by cassie-codes (@cassie-codes) on CodePen

5 hours ago, Trang said:

I did think of animating 2 waves and flipping one but I thought there might be a more elegant solution. I always feel my solutions are very clumsy.

That's the only thing I can think of that would work without actually modify the actual plugin, so it's not too clumsy of an idea.

And you should also get rid of those nested ScrollTriggers. Check out the section about nesting ScrollTriggers here...

20 minutes ago, Maga Pascansky said:

First, I had to disable "scroll-behavior: smooth", which makes my nav work kind of awfully.

I'm not sure what you mean, but you really shouldn't have that set if you're doing anything remotely related to scrolling with JavaScript.

20 minutes ago, Maga Pascansky said:

Also, killing the scrolltrigger made all of the following sections (which also work with scrolltrigger) break 😕

Also, I'm not sure what mean here. What breaks? 

I was nudging you towards the first solution in that thread because I know more people have had success with that solution, but I don't know what issues you are experiencing.

Oh, I think I see the problem now. Gatsby is wrapping everything in a focusable element. That is why I recommended to try it without Gatsby to make it easier to narrow the problem down.

https://github.com/gatsbyjs/gatsby/issues/7310

So now I can reproduce the issue in vanilla html. We'll need to investigate if this is something ScrollSmoother can resolve.

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

48 minutes ago, PointC said:

Okay, it's May The 4th so I couldn't resist. I present Fly Wars.

Please add in a fire button so we can shoot at the fly. 🙏

Hi BC, 

That seems a little odd so I'll need to investigate that some more, but here's a work around for now.
 

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

Hi Neontrenton,

Sorry to hear about that, but there is not a lot we can really suggest if it works on CodePen as GSAP doesn't do anything special in a WordPress environment.

You say the ScrollTrigger events don't work, but how to do you really know that? To debug stuff, I would turn your markers on and maybe add an onUpdate callback to your ScrollTriggers just to log something out so you know if it's working.

onUpdate(self) {
  console.log("updating my scrolltrigger", self.progress)
}

Hi Anup,

It's not clear what you're asking or having problems with. Can you be a little be more specific with your question?

Welcome to the forums @Maga Pascansky

Check out the solutions posted in this thread.

Also, I would recommend switching over the newer GSAP syntax.

// var headerAnim = new TimelineMax();
var headerAnim = gsap.timeline();

You can check out the syntax changes in the Migration Guide.