scrollTrigger with smooth-scrollbar

[Juku123]

Hi, 

 

I am trying to play with the code discussed in this topic. If you look at the example below, you will see that the image animation (scale) only works when the slider scrolls to the left. When the slider scrolls to the right, the image animation does not work. And here I am stuck. Unfortunately, I can't handle it myself. Can someone please show me what I'm doing wrong? Thank you.

 

See the Pen VwzeYwJ by Juku123 (@Juku123) on CodePen

[akapowl]

Hello @Juku123

 

You will have to incorporate a similar logic to the end and start of the individual ScrollTriggers as is used for the x-property of the fake-horizontal tween.

 

When you horizontal section moves to the left, the left side (0% of the element) will be the nearest to the center so then you'd want its start to be "0% 50%" and its end to be when the side that is further away (100% of the element) hitse the center, so "100% 50%".

 

When your horizontal section moves the other way though, so to the right, the nearest side of each element will be the right side (so 100% of the element) and the side that is further away being the left (so 0% of the element) - making the start and end exactly the opposite of when your horizontal section moves to the left.

 

This is how you could implement that logic above with ternary operators; hope it helps.

 

  ...

  // Add class to active item
  // =========================
  sections.forEach((sct, i) => {
    
    ScrollTrigger.create({
      trigger: sct,
      containerAnimation: scrollTween,
      start: thisAnimWrap.classList.contains('to-right') ? "100% 50%" : "0% 50%",
      end: thisAnimWrap.classList.contains('to-right') ? "0% 50%" : "100% 50%",
      toggleClass: { targets: sct, className: "active" },
      // markers: true
    });
    
  });

 

 

See the Pen 7310d420d471b75bb9ed61a6b395fae1 by akapowl (@akapowl) on CodePen

[Juku123]

Now I see. Well explained. I would never have come up with it myself. I learned something today. Thank you very much.