ScrollTrigger: Trying to have a parallax effect and set a class at the same time

[poudreuse]

Hello,

 

I've just discovered ScrollTrigger plugin and I have a lot of fun with it.

I'm trying to reduce the brightness of a element with a CSS filter (using toggleClass) and at the same time have a parallax effect (using yPercent).

 

Problem is the class is removed when the end of the#wrapper is reached, which removes the brightness suddently.

It works with once:truebut the animation is not reversed when you scroll back.

I'm not sure what I'm doing wrong ?

See the Pen oNxOgjB by poudreuse (@poudreuse) on CodePen

[Visual-Q]

It does seem problematic with using toggleClass. I could set it to reverse but toggleActions did not seem to prevent the class from being removed at end of trigger. Is this expected? I would have expected "play none none reverse" or "play none reverse none"should have prevented the class from being removed when it reached the trigger end?

 

You could animate the filter value using css variables instead:

 

See the Pen poyBgoG by Visual-Q (@Visual-Q) on CodePen

 

 

[poudreuse]

It does work using CSS variables. Thank you @Visual-Q

[ZachSaucier]

toggleClass is doing what it was created to do - toggleActions don't apply to it (the values don't make much sense for just toggling a class). If you need different functionality just use the callbacks:

See the Pen RwaOLvX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side notes:

• ease: true is an invalid ease. See the ease docs for more info.
• start: "=+40" is invalid. I think you meant start: "+=40".