Jump to content
Search Community

scrollTrigger: Can you switch start/end values based on the current element in view?

cssgirl test
Moderator Tag

Recommended Posts

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

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!
 

 

  • Like 4
Link to comment
Share on other sites

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!

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...