[How can I add fade out to each of the section?]

Hi @mvaneijgen, I understand what are you trying to say but at the moment i'm still new to Javascript and I don't have enough experience on it currently. Thanks for your reply and here's the proper demo i've created, cleaner and straight to the point. Now I already have the horizontal scroll but I want to add fade animation for each of the item when scrolled. Thank you!

See the Pen bGObeEP by syedzaquan (@syedzaquan) on CodePen

[How can I add fade out to each of the section?]

Hi everyone, how can I add fade out to each of the section after almost finish sliding here? I tried to put autoAlpha to this part
 

gsap.to(sections, {
  y: -120,
  autoAlpha: 0,
  ease: "none",
  scrollTrigger: {
    trigger: sections,
    containerAnimation: scrollTween,
    start: "center 80%",
    end: "center 20%",
    scrub: true,
    id: "2"
  }
});

But it doesn't work, it will fade out the whole container. Somebody can help me what am i doing wrong here?

See the Pen poqzvvr by syedzaquan (@syedzaquan) on CodePen

[GSAP card stack with pinned title]

Hi I follow the example provided by @Rodrigo. But I want to add title and pinned the title with card stack section, yes the title pinned for now but all the cards are going down with the scroll. Can you guys help me? Thank you so much. 

See the Pen GRXdGGq by GreenSock (@GreenSock) on CodePen

 

See the Pen MWPLQqb by syedzaquan (@syedzaquan) on CodePen

[ScrollTrigger.min.js got error and site is broken]

8 hours ago, OSUblake said:

Hi @jacksmug

 

Can you verify the URL you are using for ScrollTrigger? It sounds like you might using a beta version, possibly from CodePen. Make sure you are using the ones hosted on CDN, like cdnjs. It should be at version 3.9.1 now.

 

https://cdnjs.com/libraries/gsap

 

Yes, i'm sorry that i've been using CDN from this codepen example. The issue now fixed already by updating to latest CDN.

See the Pen oNLqgBm by GreenSock (@GreenSock) on CodePen

Thank you @OSUblake & @GreenSock(Jack)!

[ScrollTrigger.min.js got error and site is broken]

Hey guys, I need your help and maybe it's quite general issue. After a long time I am not touching my project, my project is broken and got an error inside 'Console'.

Here's the error:


I cannot scroll down my page and seems like ScrollTrigger is not functioning.
Not sure what happened. I am using ScrollTrigger version 3.10.0 and I tried to update to latest version. Still get this issue.

[Scrolltrigger, smooth scrollbar & snapping]

I see, yes it worked too. Thanks @OSUblake!

[Scrolltrigger, smooth scrollbar & snapping]

Hi @Cassie, sorry it's me again. But how about when I scroll up? Is there any value that I can use to determine the scroll direction is going up/down?

So maybe I can do something like this:

if (value > 0.123 && value < 0.203 && scrollup === true)

EDIT:
Ah nevermind, i've found the solution. I added this on 'onUpdate:' to add class whenever we scroll up/down using self.direction

onUpdate: self => {
  if (self.direction === 1) {
    scroller.classList.add('scrolling-down');
    scroller.classList.remove('scrolling-up');
  } else {
    scroller.classList.add('scrolling-up');
    scroller.classList.remove('scrolling-down');
  }
  console.log("direction:", self.direction)
},

And once the class changed on scroller, I just put it in if else condition on 'snapTo'

if (value > 0.123 && value < 0.203 && scroller.classList.contains('scrolling-down'))

Thank you guys!

[Scrolltrigger, smooth scrollbar & snapping]

Hi @Cassie! Ah, now I get it. It's working! Responsive also working fine. Thanks a lot @OSUblake & @Cassie for helping me out!

So I get each scroll position manually from console.log, yeah maybe not a best way but I still able to achieve what I need.
Thank you!

snapTo(value) {
  console.log(value.toFixed(3), window.scrollY);
  if (value > 0.123 && value < 0.203) {
    return 0.232;
  } else if (value > 0.529 && value < 0.580) {
    return 0.655;
  } else if (value > 0.734 && value < 0.778) {
    return 0.915;
  } else {
    return value;
  }
}

 

[Scrolltrigger, smooth scrollbar & snapping]

I am sorry Blake, im a beginner in Javascript. That means 'value' represent scroll position?

I tried like this:

snapTo(value) {
  if (value > 2000) {
    bodyScrollBar.scrollTop = value;
    return value;
  }
  return value;
}

And nothing happens.

Then I tried something like this:

snapTo(value) {
  console.log(bodyScrollBar.scrollTop)
  if (bodyScrollBar.scrollTop > 1900 && bodyScrollBar.scrollTop < 2600 ) {
	bodyScrollBar.scrollTo(0, 3400, 1000);
  }
}

It make sense a little. Once I scroll between 1900 until 2600, it will go to the next section(3400) but after it snap, it jump back to the first section on the top.

[Scrolltrigger, smooth scrollbar & snapping]

Thank you @OSUblake, but how can I declare variable for 'value' since I am using 'smooth-scrollbar' and cannot use window offset?

[Scrolltrigger, smooth scrollbar & snapping]

Hi everyone,

I have a question here, is there any possible way to start the snap at the end of a section (not at the start of a section)? Because as you guys can see in the codepen, it scroll the whole section until end of section. So there's no chance for the user to read the text in each section. Not sure if my code isn't implemented correctly.

What I am going to achieve is, the user still should be able to control the scroll in order for them to read the text. Here's a visual reference for you guys in the attachment, hope it helps.

Thank you!

*in this pen, I use Scrolltrigger with smooth scrollbar
 

 

 

See the Pen XWaLGOq by syedzaquan (@syedzaquan) on CodePen