ScrollTrigger, move element down, fade out, then start horizontal scroll

[amit95]

I've been struggling with this one for quite some time (as you may be able to tell with my previous posts 😅).

 

Nevertheless, thanks to the forums, and demos, I have been able to experiment with multiple approaches, none which work in the the way I want.

 

In short, here is my expected behaviour:

 

1. User scrolls down the page and .horizontalScroller__intro pins and moves down to the center of my .horizontalScroller which I've currently defined as end: "+=30%").
2. Once it has reached the end, as the user continues to scroll down, I now want .horizontalScroller__intro to fade out slowly
3. Once .horizontalScroller__intro has faded out completely, I now want to fade in .horizontalScroller__items which has an opacity of 0 in the css.
4. Once .horizontalScroller__items has faded in completely, I want the user to be able to scroll horizontally.
5. Then the reverse when the user is scrolling back up

 

Current results:

 

1. .horizontalScroller__intro starts to fade out immediately (and is completely gone by the end position). I'm looking for .horizontalScroller__intro to start fading out after it has reached its end position. 
2. I have a separate scrollTrigger defined for the horizontal scroll (which just contains an image). When this trigger is used alongside the .horizontalScroller__intro trigger, the .horizontalScroller__intro jumps.
3. Cannot get the .horizontalScroller__items to fade in (unsure if it doesn't like it because it's defined in the css?)

 

What have I tried?

 

1. See the Pen JjWGzyN?editors=1010 by GreenSock (@GreenSock) on CodePen

2. See the Pen YzXdbQo?editors=1010 by GreenSock (@GreenSock) on CodePen

3. Tried the below snippet to get intro to fade out

 

 const tl = gsap.timeline( {
  scrollTrigger: {
    trigger: ".horizontalScroller__intro",
    start: "top",
    end: "+=30vh",
    scrub: true,
    // markers: true,
    toggleActions: "play reverse play reverse",
  }

});

tl
  .to('.horizontalScroller__intro', { autoAlpha: 1, duration: 0.5 })
  .to('.horizontalScroller__intro', { autoAlpha: 0, duration: 0.5 }, 0.5);

 

Appreciate I've asked a few questions in this post. Any help would be appreciated

 

See the Pen wvPKqoK by amit_rai95 (@amit_rai95) on CodePen

[Cassie]

Hi @amit95

 

The main difficulty you're facing here is that your markup and styling isn't reflective of what you're trying to do.

It's often far more confusing when you try to copy things over from previous demos as the code in those demos is solving different problems. It's best to break down your individual problem, try to learn from the approaches the demos take and start from scratch on your own solution.

Advice:

• You have a sequence of steps you want to achieve, this is best approached using a timeline.
• Be careful when you're pinning elements inside other pinned elements, you can use pinReparent   to reparent the pinned element - but more often than not, it's just a sign that you need to rethink your markup.
• Simplify simplify simplify. If it's not working, reduce your code as much as possible, get it working step by step and then build up.

Does this help get you closer?

 

See the Pen podjdro?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[amit95]

Hi @Cassie,

 

Appreciate the advice and the demo, both are extremely helpful

 

I will have a play around and see if I can make things work, and more importantly, understand what's happening.