cssgirl Posted October 17, 2021 Share Posted October 17, 2021 Hello! I am attempting to create an experience where as you scroll through a page the body background color changes based on an attribute value (data-bg-color) being grabbed from the current element in view as you scroll. I have it working partially, but because I am using a faux horizontal scroll in one area that contains a set of panels it messes up when using the same start/end values as the vertical scrolling sections. By default my start and end values use a calculation to determine the height of the start/end positions for vertical sections like: start: () => (i - 0.25) * (innerHeight - 100), end: () => (i + 0.25) * (innerHeight + 100), And I'd like to switch to something like the following for my horizontal sections: start: () => (i - 0.25) * (innerWidth - 100), end: () => (i + 0.25) * (innerWidth + 100), I thought I would be able to define a new start/end by defining a scrollTrigger that specifically targeted the items within the horizontal scrolling section, but it didn't work. I may be approaching this completely wrong, but my question is - based on the the current element in view can we switch the start/end values of the scrollTrigger? Or maybe there is a different way to approach the start/end that I am missing that can apply to both the vertical and horizontal sections? Any help or suggestions would be greatly appreciated! Thank you in advance! See the Pen 3a3369a2fc62b853670c6ecbbfdc5ee2 by cssgirl (@cssgirl) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted October 17, 2021 Share Posted October 17, 2021 Hi there CSSgirl - could you make this pen public so we can fork it? In the interim I might do something like this? I'll check and simplify it down when I can fork your pen. ScrollTrigger.defaults({ toggleActions: "play none none reverse" }); gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); const verticalSections = gsap.utils.toArray("[data-bg-color].content"); const horizontalSections = gsap.utils.toArray("[data-bg-color].panel"); // Horizontal Scroll Section let scrollTween = gsap.to(horizontalSections, { xPercent: -100 * (horizontalSections.length - 1), ease: "none", immediateRender: false, scrollTrigger: { trigger: ".container", pin: true, start: "top top", scrub: 1 } }); horizontalSections.forEach((section, i) => { gsap.to("body", { duration: 1, backgroundColor: section.getAttribute("data-bg-color"), scrollTrigger: { trigger: section, containerAnimation: scrollTween, // magic! start: "left center", end: "right center", markers: true, } }); }); verticalSections.forEach((section, i) => { gsap.to("body", { duration: 1, backgroundColor: section.getAttribute("data-bg-color"), scrollTrigger: { trigger: section, start: "top center", end: "bottom center", markers: true, } }); }); More on containerAnimation here - Thanks! 4 Link to comment Share on other sites More sharing options...
cssgirl Posted October 18, 2021 Author Share Posted October 18, 2021 Hey, I fixed the privacy on the pen. Thank you so much for your quick response - I'll try that out. Appreciate it! Link to comment Share on other sites More sharing options...
cssgirl Posted October 19, 2021 Author Share Posted October 19, 2021 Hello again! I took the updated code you provided and forked a new pen. I made a few tweaks for timing to get the background color transitions closer to what I am aiming for and it is looking way closer to what I wanted. I'm going to keep tweaking until I get the timing a bit smoother, but this is pretty close to what I was attempting to achieve. See the Pen ExvKzvB by cssgirl (@cssgirl) on CodePen Many, many thanks @Cassie! 1 Link to comment Share on other sites More sharing options...
Cassie Posted October 19, 2021 Share Posted October 19, 2021 Woo! Nice job pal! 🥳 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