Lenspre Posted February 26 Share Posted February 26 Something wrong with titles on resize. Please see sample: See the Pen zYbgLLL by Lenspre (@Lenspre) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted February 27 Share Posted February 27 Hi, Sorry about the delay in answering 🙏 This boils down mostly to overcomplicating this quite a bit IMHO, the logic you're using right now is probably creating conflicting tweens and/or ScrollTrigger instances. This can be done far simpler as far as I can tell: const sections = gsap.utils.toArray(".section"); const titles = gsap.utils.toArray(".title-wrapper"); // Initial position for all but the first title gsap.set(titles, { yPercent: (i) => i ? 100 : 0, }); const tl = gsap.timeline({ repeat: -1, }); titles.forEach((title, i) => { if (i) { const section = sections[i - 1]; console.log("not first & not last", i); gsap.timeline({ scrollTrigger: { trigger: section, start: "clamp(bottom center)", end: "bottom top", scrub: true, markers: { indent: 150 * i }, id: i + 1, } }) .to(titles[i - 1], { yPercent: -100 }) .to(title, { yPercent: 0 }, "+=0.5"); } }); Here is a fork of your demo: See the Pen yLrBzwY by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 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