Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
akapowl

scrollTrigger with smooth-scrollbar

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 2
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.
×