Trouble registering ScrollSmoother live, and breaking effects in CodePen

[TurdFerguson]

I have successfully started a CodePen to get ScrollSmoother activated and update some other code I have created.  The issues I'm having now are

1. Getting it to work live on this page:  2019+ Veloster N ECU Calibration (sxthelement.com).
2. The background blur effect is breaking when I add "data-lag".

 

I downloaded the new gsap-simply-green, but I cannot find where ScrollSmoother is in that zip.  I read somewhere that ScrollSmoother is built on top of ScrollTrigger, but I also had to initialize ScrollSmoother separately in CodePen.  Someone please help me.

See the Pen MWrKrQP?editors=1010 by chase-field (@chase-field) on CodePen

[Cassie]

Hi there!

 

Thanks for joining up to Club GreenSock, we always appreciate the support 💚

 

I'm afraid that ScrollSmoother is only available for 'Shockingly Green' and above though. If you need help upgrading let me know.

 

Animation wise -  I can't see what you mean by the background blur effect breaking either. Is this maybe a browser thing? I'm using Chrome on OSX 🤔

[TurdFerguson]

Thank you Cassie.  I was not aware of the membership tier I needed.  I just upgraded that and tried it again, but it keeps breaking all ScrollTrigger aspects when I try to register it.  I'm doing it the same way I did DrawSVG a year ago, but nothing works after that.

 

Also, I'll attach an image of the blur not working.  Stage 1 is working while Stage 2 and Stage 3 are not.

[Cassie]

There's a lot of code here so it's a little bit hard to work out exactly what's going on at a glance.

But this sounds a little more like a CSS/markup issue to me. I wanted to double check so I've just deleted the circles that weren't working, copied the HTML for the working 'stage 1' and pasted that exact code twice more... and it looks right now.

 

So if I were you I'd look for stray tags or typos.

See the Pen qBppJdw?editors=1100 by GreenSock (@GreenSock) on CodePen

 

Quote

but it keeps breaking all ScrollTrigger aspects when I try to register it

That sounds annoying sorry, but I'm not sure what you mean exactly. Can you elaborate? Do you have a minimal demo?
 

[TurdFerguson]

17 hours ago, Cassie said:

There's a lot of code here so it's a little bit hard to work out exactly what's going on at a glance.

Sorry about that.  It's been a work in progress.

 

 

17 hours ago, Cassie said:

But this sounds a little more like a CSS/markup issue to me. I wanted to double check so I've just deleted the circles that weren't working, copied the HTML for the working 'stage 1' and pasted that exact code twice more... and it looks right now.

 

So if I were you I'd look for stray tags or typos.

I'll double check everything on there then.  It seemed that it only happened once I added data-lag.

 

 

I've never used codesandbox before, but I will give it a shot if I keep having this issue.  Thank you for your help Cassie.