poudreuse Posted September 27, 2020 Share Posted September 27, 2020 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 Link to comment Share on other sites More sharing options...
Visual-Q Posted September 27, 2020 Share Posted September 27, 2020 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 2 Link to comment Share on other sites More sharing options...
poudreuse Posted September 28, 2020 Author Share Posted September 28, 2020 It does work using CSS variables. Thank you @Visual-Q Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 28, 2020 Share Posted September 28, 2020 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". 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now