ferriss Posted April 15, 2022 Share Posted April 15, 2022 Hi, I couldn't find if there is something in the docs for this, but I have an element that has a basic transform parallax on it. That same element has a basic toggle class on it when it hits the top of the viewport, however, the makers on the this latter animation are wrong as it takes it from before the parallax. I guess I need to offset it with the transform? But is this performant as the trigger point is constantly changing? The two animations. gsap.to(".js-pick-me-up", { ease: 'none', scrollTrigger: { trigger: ".block-intro", scrub: true, start: "top top", end: window.innerHeight, }, y: window.innerHeight / 2 }); and ScrollTrigger.create({ trigger: ".js-pick-me-up", end: "bottom bottom", start: "top top", toggleClass: 'is-fixed' }); Thanks Link to comment Share on other sites More sharing options...
Cassie Posted April 15, 2022 Share Posted April 15, 2022 Hey @ferriss, I'm not really sure of timing or positioning from this code snippet, could you put together a minimal demo for us? I'm sure I can recommend an alternative approach with the appropriate context! Thanks 1 Link to comment Share on other sites More sharing options...
GreenSock Posted April 15, 2022 Share Posted April 15, 2022 Also, for the record, ScrollSmoother has parallax effects baked in (data-speed) and they automatically integrate with ScrollTrigger so that the positions are adjusted according to the parallax movement. Super convenient! https://greensock.com/scrollsmoother Link to comment Share on other sites More sharing options...
Solution ferriss Posted April 25, 2022 Author Solution Share Posted April 25, 2022 I started doing an MVP and adding a wrapping div fixed my issue. 1 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