arual Posted June 4, 2021 Share Posted June 4, 2021 Hi everyone, Is it possible to end trigger when the element reaches another container (to create an overlapping effect) ? E.g. end: ".newContainer" Also, is it possible that while on scrolling the element to be transparent and when it reaches the end point the opacity to be set to 1? Thanks! Link to comment Share on other sites More sharing options...
akapowl Posted June 4, 2021 Share Posted June 4, 2021 Hey @arual This sounds like you want to take a look at endTrigger in the docs. endTrigger String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default. 1 Link to comment Share on other sites More sharing options...
arual Posted June 4, 2021 Author Share Posted June 4, 2021 9 minutes ago, akapowl said: Hey @arual This sounds like you want to take a look at endTrigger in the docs. endTrigger String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default. Yes, I read this but I didn't figure it out. Please se my code below: gsap.to(".hero__image", { xPercent: 40, scrollTrigger: { trigger: ".hero__image", start: "center center", pin: true, endTrigger:".hero__end", scrub: true } Link to comment Share on other sites More sharing options...
akapowl Posted June 4, 2021 Share Posted June 4, 2021 Maybe you just need to define a proper end alongside your endTrigger to make it end where you want. But it's pretty hard to tell from just a code-snippet - a minimal demo would really help us helping you. In this example I also included a way to show how to make your element lose its transparency when it reaches its destination. See the Pen 54e828a06191c5fe84f34c1795acb7e8 by akapowl (@akapowl) on CodePen 4 1 Link to comment Share on other sites More sharing options...
arual Posted June 4, 2021 Author Share Posted June 4, 2021 19 minutes ago, akapowl said: Maybe you just need to define a proper end alongside your endTrigger to make it end where you want. But it's pretty hard to tell from just a code-snippet - a minimal demo would really help us helping you. In this example I also included a way to show how to make your element lose its transparency when it reaches its destination. This is perfect. Thank you very much. I really appreciate your help! 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