[Advices for using Locomotive Scroll and Gsap ScrollTrigger pin horizontal scroll]

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/

 

[iOS Mobile problem - ScrollSmoother + pin large section glitching]

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);

 

[animation jumping issue on ending]

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.

 

 

[ScrollTrigger and click event button animation of content]

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.

 

 

[Gsap and react]

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.
 

 

[Accordion causing problems with Scroll Trigger due to page height changing...]

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

 

[Nuxt.js site laggy on mobile versus desktop]

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.

[GSAP + MorphSVG - trying to animate circle segment]

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

[Gif Control]

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.

 

 

[Gif Control]

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!

[Nuxt.js site laggy on mobile versus desktop]

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.

[Gsap and react]

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!

[Create draggable Momentum Slider with GSAP Observer (without Draggable Plugin)]

Hi nattha,

 

There's some basic dragging demos here.

 

And there are a couple in our CodePen collection.

https://codepen.io/collection/KpNYOd

 

 

[Mouseover / mouseout with e.offset]

Hi mea_culpa,

 

Did you have a question? 

[Module not found - ScrollSmoother]

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.

 

[Vertical parallax + horizontal scroll with snap]

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

 

[GSAP - Wavify]

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.

[iOS Mobile problem - ScrollSmoother + pin large section glitching]

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

 

 

[ScrollTrigger backwards scrub (space above section on kill)]

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.

 

 

[ScrollSmoother + Gatsby — First click instantly scrolls to top of page]

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

 

 

[repeatDelay on timeline containing infinite tween]

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

[How to update the width when resize screen on timeline with scrollTrigger]

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

 

[Scrolltrigger Only Working Properly When Logged into Wordpress]

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)
}

 

[How to control long animation and I need help to set column width in responsive according to container width using GSAP]

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?

 

[ScrollTrigger backwards scrub (space above section on kill)]

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.