Can't seem to get 3.8's preventOverlaps to work

[dfreerider]

Hi,

 

The new preventOverlaps for ScrollTrigger sounds like just what I need for my project, but I'm having a hard time getting it to work.

 

I'm using the modules with webpack, and I downloaded the newest files 3.8 including bonus files, and ran : npm update ./gsap-bonus.tg

 

Then I replaced my 

scrub:1

with

 

  toggleActions: "play none none reverse",
         preventOverlaps: preventOverlaps,

Then I ran npx webpack

 

 

However when I try to use the resulting main.js in my code Chrome console just says : main.js:2 Uncaught ReferenceError: preventOverlaps is not defined

 

I guess there is something simple I haven't done but I'm a little lost on how to start to debug this. 

 

Any help would be much appreciated!

 

Thanks!

 

-Espen

[Cassie]

Ah, that demo is a little misleading. I'll update the article.

 

it's preventOverlaps: true you're looking for.

 

In the demo the variable passed to preventOverlaps is a boolean.

[Cassie]

preventOverlaps

Boolean | String - this feature activates as a ScrollTrigger is about to trigger an animation; it finds preceding scrollTrigger-based animations and forces those previous animations to their end state – avoiding unsightly overlaps. if true, it will affect all preceding ScrollTriggers. You can use an arbitrary string to limit their effect to only others with a matching string. So preventOverlaps: "group1" would only affect other ScrollTriggers with preventOverlaps: "group1". See a  See the Pen 7d22c763b9edd0c0c48150ecd1c921c9 by GreenSock (@GreenSock) on CodePen .

[dfreerider]

5 minutes ago, Cassie said:

Ah, that demo is a little misleading. I'll update the article.

 

it's preventOverlaps: true you're looking for.

 

In the demo the variable passed to preventOverlaps is a boolean.

 

Aha, that makes a lot of sense  

 

I knew it had to be something simple. Thanks a lot for the quick and helpful reply!

 

-Espen

[Cassie]

Thanks for spotting that - article updated ☺️