[DrawSVGPlugin failed to draw after the first time]

7 minutes ago, vivek1234 said:

I dont know how gsap workins differs with and without strict mode

 

GSAP works the same regardless. It's React that is changing its behavior with strict mode. In strict mode, it calls everything twice to help surface bugs;  but unfortunately, that also unintentionally creates bugs.

 

 

 

 

 

As Dan brought up with his thought experiment with clicking a button really fast, that will create from logic issues. 

 

 

Check out how the opacity breaks if you click restart really fast. That's exactly what React is doing in strict mode.

 

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

 

[Another vertical reveal related question + ScrollSmoother]

2 hours ago, akapowl said:

Blake is totally right, though - It will be a lot easier thinking of this as one long animation that you can easily hook up to one ScrollTrigger, instead of creating a bunch of ScrollTriggers, i.e. one forEach of the images.

 

Yes. I think this is much easier to wrap your head around.

 

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

 

[DrawSVGPlugin failed to draw after the first time]

Sorry, what are you having problems with?

 

If you need help, please provide a minimal demo. And if you're using React 18, you need to read that post I linked to.

 

[Visibility and Scroll not working]

Your original demo is all CSS issues. If you want to toggle something, you can do it like this.

 

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

 

[How to pin fixed item with ScrollSmoother active?]

Gotcha. To replicate that, we would need to append the fixed item outside of the content because position: fixed won't work inside an element that has transforms on it, which is what ScrollSmoother does.

 

So this seems to work.

 

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

 

[DrawSVGPlugin failed to draw after the first time]

Welcome to the forums @vivek1234

 

If you need help, please provide a minimal demo. You can use CodeSandbox of React if you want.

 

https://codesandbox.io/s/gsap-bonus-plugins-react-starter-je6ln?file=/src/App.js

 

And if you're using React 18, you need to make sure your animation doesn't get created twice as that will mess up an from animations.

 

 

[How to pin fixed item with ScrollSmoother active?]

Hi chailandau,

 

I'm a little confused about what you're trying to do. Can you make a demo of what you are expecting to happen without ScrollSmoother?

[Visibility and Scroll not working]

Hi Charlyta,

 

I'm not sure what you're asking here, but your #content has display: none and visibility: hidden on it, so you would need to resolve both of those. And you don't visibility: hidden if display is set none.

 

[Another vertical reveal related question + ScrollSmoother]

Hi Sam,

 

I would recommend going through this thread and reading what I have to say about approaching everything from a purely animation point of view, meaning don't think about scrolling. So instead of thinking about how can I do x when y scrolls into view, think about the animation in an isolated context. That cuberto animation should be pretty straightforward if you just think about what's happening as a normal animation. All you need to do is create a timeline that animates the text container and images up.

 

 

 

[Scrolling list with Image in horizontally scrolling sections]

2 hours ago, DK7 said:

but why does this code set the 3rd section pinned? If I replace the * 2 with a * 3, the 4th section is pinned. I just don't get the point no matter how hard I try to understand. Doesn't the code actually mean that each section gets an xPercent value of -100 * 2, i.e. -200?

 

I don't how familiar you are with arrays, but knowing that arrays are zero-based is key to understanding all that. Zero-based means the first item has an index of 0. So the second item would have an index of 1, the third item would have an index of 2, and so on.

 

And think about it in terms of math. How many screen widths is the first panel away from the viewport? It's already in view, so that would be 0. The second panel is 1 screen width away, the third panel is 2 screen widths away and so on.

 

And that's why you'll commonly see this calculation to do horizontal effects.

xPercent: -100 * (sections.length - 1),

 

We subtract 1 from the length because length is not zero-based. So if there are 5 sections, i.e. the array length, then the last section will have an index of 4. Yes, it can be confusing, but that's just how it is.

 

2 hours ago, DK7 said:

but why does a .to step have to come before tl.to(sections...) so that section 3 is pinned?

 

First off, that section is not being pinned. What is being pinned is the trigger you set here.

 

let tl = gsap.timeline({
  scrollTrigger: {
      trigger: ".main-container", // this is what gets pinned
      pin: true,
      scrub: 0.1,
      end: "+=2000"
    }
})

 

Throughout this thread, I've been trying to make it a point that you need to approach it as an animation problem and not a scrolling problem. 

 

So here's essentially what a horizontal animation would look like if you could scale it down. The red box is meant to represent the viewport of your screen.

 

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

 

And ScrollTrigger is very similar to GSDDevTools in that it can scrub animations. If scrubbing that animation looks fine in GSDevTools, it will look the same if we hook it up to ScrollTrigger.

 

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

 

So I would suggest trying to make a timeline just like I did. If it works without ScrollTrigger, it will work with it. That's a hint that you should not have any nested ScrollTriggers inside your timeline, like I see here.

 

tl.to('.list-left ul', {
  scrollTrigger: { // !!! you should never have a nested ScrollTrigger
      trigger: '.list-left ul',
      start: "83% center",
      scrub: true,
      markers: true,
  },
  ...
})

 

See the most Common ScrollTrigger Mistakes for more information.

 

 

And for the images, I would not change the src as you can't animate that. To do a crossfade you need to have all the images inside the DOM, and then absolutely positioned on top of each other.

 

[ScrollTrigger: Weird behaviour at the endpoint]

And you don't need those resize and load event listeners as ScrollTrigger automatically does that.

[Adobe animate and GASP3]

Hi Spycatcher,

 

I don't use Animate so I can't give specifics, but you can use the MotionPathPlugin to animate EaselJS objects in Animate. 

 

@Carl do you have any courses on how to use Animate + GSAP?

 

 

[Scroll trigger - trigger all items with the same class issue]

Hi David,

 

If you need help, please start a new topic and include a minimal demo of your issue. Thanks!

[Migrating a demo to the latest version]

Welcome to the forums @Lighton

 

Your conversion seems fine, but I think you might have stumbled upon a bug. When it messes up, the press init x value is different than the press value, causing it to jump. Please standby while we investigate.

 

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

 

8 hours ago, Lighton said:

I've read the migration docs and I thought that I was already there.

 

Also check out the part about Getting an object's properties. You'll need to do that for all the _gsTransform stuff in that applySnap function.

 

[Timeline Animation issue in Safari]

Hi tracta,

 

Do this work for you? I just added will-change: transform; to the CSS.

 

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

 

[scrolltrigger last section overlap second last section and no height limit]

Seems to work fine here.

 

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

 

[Fluid SVG animation with filter + random duration flickering]

Just for future reference if you ever want to randomize durations you can create your animations inside a function that gets called again when it's done.

 

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

 

[Swaying item]

Nothing stands out as being off, and you can certainly animate PNGs, but I'm not sure you would see that animate if the rotation is going from -1 to 1. That's a tiny amount of movement.

 

Can you make a minimal demo of the issue?

 

[Gsap scrolltrigger not working in React component]

Thanks! I'll be sure to check out that course.

[Stagger animation not all the object of the array.]

Welcome to the forums @Konnan933

 

stagger isn't going to work for a single element, so you could do something like this. 

 

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

 

More info about staggers...

 

https://greensock.com/docs/v3/Staggers

 

[Gsap scrolltrigger not working in React component]

7 minutes ago, OSUblake said:

Would you mind adding what you did with Supense to your CodeSandbox so other people can see in case they have the same issue?

 

I'm also asking for curiosity because I've never used Suspense before. 😋

[scrolltrigger last section overlap second last section and no height limit]

That panel class is messing with your last section. I removed that and added position: relative to everything to avoid any stacking context issues.

 

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

 

[Gsap scrolltrigger not working in React component]

Would you mind adding what you did with Supense to your CodeSandbox so other people can see in case they have the same issue?

[scrolltrigger last section overlap second last section and no height limit]

And that would be same as not even including the 4th panel. All the content after the 3rd panel will scroll like normal.

 

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

 

[scrolltrigger last section overlap second last section and no height limit]

Please don't create duplicate topics.

 

And just like I mentioned in your other thread, I'm not sure what you mean. The demo seems fine to me.

 

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