Horizontal Scroll whilst detecting elements in Viewport

[JoshPS]

Hi,

 

I am having a few issues with Horizontal Scrolling and then detecting when an element comes in sideways.

 

 

What I am trying to achieve with my codepen is when the next '.panel' comes atleast 15% into the viewport via horizontal scroll I want the '.inside-panel' to turn red. I have found examples similar but they only show examples using vertical scroll. Similar posts but using vertical scroll.

 

 

Thanks all

 

See the Pen MWQqQKp by Josh-Millard (@Josh-Millard) on CodePen

[Cassie]

Hey there Josh 

 

This sounds like a job for containerAnimation - Good luck!
 

https://greensock.com/3-8/#containerAnimation

 

[JoshPS]

Hi Cassie,

 

Thanks for your quick response. This is exactly what I needed, I have updated my Codepen and posted it below;

 

Thank you very much!

 

[Cassie]

Excellent stuff! Glad we could help.

[JoshPS]

Hi @Cassie,

 

Thanks again for previously for your help - I've hit another problem!

 

For some reason my elements are 'skating' from right to left, not during the scroll.

 

For example - Similar to my codepen above, where the divs are changing colours, I am having an image start at -30% then as they enter the viewport, I want them to move to 0%, What I have so far works BUT I am getting a skating effect so they just seem to slide from their starting position to end position. Hope this makes sense?

 

const sections = gsap.utils.toArray(".meet-the-team div.member");

let maxWidth = 0;
sections.forEach((section) => {
  maxWidth += section.offsetWidth;
});

/**
 * Horizontal Scroll for Team Members
 */
let memberAnimation = gsap.to(sections, {
  scrollTrigger: {
    trigger: ".meet-the-team",
    start: 'top top',
    end: () => `+=${maxWidth - window.innerWidth }`,
    scrub: 1,
  },
  x: () => `-${maxWidth - window.innerWidth}`,
  ease: "none",
});

/**
 * only animate when the img comes into viewport
 */
gsap.utils.toArray( 'img.member' ).forEach(el => {
  gsap.to( el, {
    scrollTrigger: {
      trigger: el,
      containerAnimation: memberAnimation,
      start: 'left 85%',
      end: 'center 20%',
      scrub: true,
    },
    x: "-30%",
    ease: "none",
  });
});

 

[Cassie]

I'm not sure what a skating effect is I'm afraid.

Can you pop together a demo for me with a few coloured divs and start a new thread? Thank you!

[JoshPS]

Thanks again for your reply,

 

I managed to resolve this - I actually had left 'transition: all 0.6s ease' on the element I was moving which was causing it to drag slowly then skate from position A to position B!