Sam124 Posted September 27, 2021 Share Posted September 27, 2021 Hi there, in the codepen url, the animation is what I was looking for but would like to change how animation is being triggered. For instance, on scrolling down of mouse the currently the second image is being revealed slowly and on scrolling upwards the it gets back to its initial first image slowly. So, is there a way to reverse/change what is happening on scroll downwards at the moment to scroll upwards and vice versa. So, the animation would remain same but the direction of scrolling of the mouse would change (would like to have what is happening currently on scroll down of mouse to happen on scroll up and what is happening on scroll up of the mouse to happen on scroll down of mouse). See the Pen XWMPLQg by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted September 27, 2021 Solution Share Posted September 27, 2021 Welcome to the forums @Sam124 Is this what you're going for, animating it from 0% instead of to 0%? gsap.from(masks[1], { height: "0%", ease: "none", scrollTrigger: { trigger: ".revealer", start: "top top", pin: true, end: "+=100%", scrub: 0.5 } }); Link to comment Share on other sites More sharing options...
Sam124 Posted September 27, 2021 Author Share Posted September 27, 2021 Hi @OSUblake, Thank you so much for your help. Exactly what I was looking for. 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