jaripp Posted March 13, 2023 Share Posted March 13, 2023 Is it possible to keep pinned titles in place while fading out after ScrollTrigger end? I don't want the titles to slide under my logo. So when the "end" is triggered, titles would just fade out in place. See the Pen QWVQYaB by jaripp (@jaripp) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 13, 2023 Solution Share Posted March 13, 2023 Here's one approach: See the Pen YzOazaL?editors=0110 by GreenSock (@GreenSock) on CodePen Just use a scrubbed timeline and put the fade toward the end using the position parameter. 1 Link to comment Share on other sites More sharing options...
jaripp Posted March 13, 2023 Author Share Posted March 13, 2023 Nice!! Thanks! Is there a way to do the same without scrubbing? Link to comment Share on other sites More sharing options...
Rodrigo Posted March 13, 2023 Share Posted March 13, 2023 50 minutes ago, jaripp said: Is there a way to do the same without scrubbing? An alternative is to give scrub a small value 0.25~0.3 but, without scrubbing you get exactly what you had in the first place using ScrollTrigger's callbacks. gsap.utils.toArray('.content-block').forEach((section, i) => { const pretitle = section.querySelector('.pre-title'); let tl = gsap.timeline({ scrollTrigger: { trigger: section, start: "top 50px", end: "bottom 150px", pin: pretitle, pinSpacing: false, scrub: 0.25 } }); tl.to(pretitle, { autoAlpha: 0, duration: 0.5 }, 2.5) }); If you want to avoid that situation you have to tie the animation to the scroll progress and that's what scrub is for. As far as I know these are kind of the two options you have. Happy Tweening! 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