How to add fade in/fade out effects to pinned horizontal scroll animation?

[Laurence]

Hi, I'm struggling to create a fade in/out animation to a pinned section using GSAP's horizontal scroll. What I'm trying to do is to fade in/out between sections, mainly the content and the background or an image inside each sections.

 

I tried using this code function:

function setSection(newSection) {
  if (newSection !== currentSection) {
    var tl = gsap.timeline();
    tl.to(".col-fade", { y: -30, autoAlpha: 0, duration: 0.3 });
    tl.to(currentSection, { autoAlpha: 0, duration: 0.5 });

    var tl = gsap.timeline();
    tl.to(newSection, { autoAlpha: 1, duration: 0.5 });
    tl.to(".col-fade", { y: -30, autoAlpha: 1, duration: 0.3 });

    currentSection = newSection;
  }
}

and set it to gsap.to(sections, {}); function like this:

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
  trigger: ".container",
  pin: true,
  scrub: 1,
  snap: 1 / (sections.length - 1),
  end: () => "+=" +     document.querySelector(".container").offsetWidth
  },
    onToggle: (self) => self.isActive && setSection(sections)
  });

 

However, it doesn't seem to have an effect. Any Idea why I'm not able to successfully solve the issue? I'm still learning GSAP`s up to this point. Any ideas would be a great help. Thanks a lot.

See the Pen VwBOjKR by laurence-albano (@laurence-albano) on CodePen

[akapowl]

 

Hello Laurence.

 

The way your demo is set up, the onToggle callback of your fake-horizontal ScrollTrigger, will (except for when the STs are being created) never be called, because that ScrollTrigger will always be active - you can check that by adding some console.log() to that callback.

 

[Some slight correction: It will trigger at the end in this scenario - you just did not add the onToggle callback to the scrollTrigger object, but outside of it instead.]

 

But if you want to trigger something for individual sections inside that container, using that callback wouldn't be the way to go to begin with, as it would only trigger when that ScrollTrigger toggled between active/inactive - not the individual parts inside of it.

 

If you want to trigger something on individual parts of your fake-horizontal tweening container/sections, you should have a look at containerAnimation.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen  and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.