Upper elements vertical margin animation does not affect scrollTrigger of the element underneath

[anzorAs]

Hello! 

 

I am using 2 different animations with scrollTriggers: 

1: negative bottom margin on my .hero so the content underneath "scrolls over" the hero

2: "the content" being cards that are pinned and snapped to the top of the page.

 

Animation number 2 works fine without animation number 1. 

Animation number 1 changes the top offset of animation number 2 and thus the scrollTrigger point does not get updated. 

 

Is there any way to get around it?

Any help would be appreciated   

I am attaching 2 pens, one with "hero" animation, that messes up my "cards" scroll trigger, and one without the "hero" animation

 

 

See the Pen YzgveGJ?editors=1010 by BobbyMcBobbyboy (@BobbyMcBobbyboy) on CodePen

See the Pen jOJKYGR by BobbyMcBobbyboy (@BobbyMcBobbyboy) on CodePen

[Rodrigo]

Hi,

 

Animating the hero element on the Y axis and on top of that, animating the margin bottom, will result in a layout shift that will throw off all the calculations made by ScrollTrigger.

 

We strongly recommend to not animate the trigger element, especially in the Y axis for the same reasons.

 

Also you had this on your code:

tl.to(wrapper, {
  scale: 0.97,
  scrollTrigger: {
    trigger: wrapper,
    start: "top top",
    end: "bottom top",
    pin: true,
    pinSpacing: false,
    snap: 1,
    scrub: 0.1,
  },
});

// hides the card when done animating
tl.to(wrapper, {
  autoAlpha: 0,
  scrollTrigger: {
    trigger: wrapper,
    start: "top+=5 top",
    end: "+=50",
    scrub: true,
  },
});

That creates a logic issue as explained here:

https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens

 

Finally I forked your demo and came up with this:

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

 

Hopefully this helps.

Happy Tweening!

[anzorAs]

Thanks for your response @Rodrigo

 

Ad Hero Animation:

In the provided solution you created the ScrollTrigger, but I am not sure it does anything. Or I am just missing the point. 

 

Ad nested ScrollTriggers: 

I was aware of that logic issue and I think I managed to get it working without glitching. Unfortunately, I do need the second trigger because I want to hide the card when its out of sight, which lead me to this solution (combined your and my solutions):

cardWrappers.forEach((wrapper, i) => {
  gsap
    .timeline({
      scrollTrigger: {
        trigger: wrapper,
        start: "top top",
        end: "bottom top",
        pin: true,
        pinSpacing: false,
        snap: 1,
        scrub: true,
        id: (i + 1).toString(),
        markers: { indent: 150 * (i + 1) },
      },
    })
    .to(wrapper, { scale: 0.97 })
    // pinning and scaling is finished here, the next card covers the current card completely 
    .to(wrapper, {
      autoAlpha: 0,
      scrollTrigger: {
        trigger: wrapper,
        start: "top+=5 top",
        end: "+=50",
        scrub: true,
      },
    });
    // further scrolling hides the current card 
});

 

[Rodrigo]

Hi,

 

Is not really 100% clear what you're trying to achieve here, that's why my demo is my best guess in terms of that.

 

Please read the link I added in my previous post, this is a logical issue that, while it seems to be working, is introducing an update conflict:

gsap
  .timeline({
  scrollTrigger: {
    trigger: wrapper,
    start: "top top",
    end: "bottom top",
    pin: true,
    pinSpacing: false,
    snap: 1,
    scrub: true,
    id: (i + 1).toString(),
    markers: { indent: 150 * (i + 1) },
  },
})
  .to(wrapper, { scale: 0.97 })
// pinning and scaling is finished here, the next card covers the current card completely 
  .to(wrapper, {
  autoAlpha: 0,
  scrollTrigger: {
    trigger: wrapper,
    start: "top+=5 top",
    end: "+=50",
    scrub: true,
  },
});

A GSAP Timeline is a container for Tweens and other instances, basically a Timeline's playhead controls the progress of each instance inside it contains. ScrollTrigger with scrub, does the same to either a Tween or a Timeline but based on the scroll position, it controls the Tween/Timeline's playhead position based on scroll. So now you have a timeline who's playhead is controlled by scroll, that at the same time is controlling the progress of the .to() instances inside of it, but at the same time one of those isntance's playhead is also controlled by a second ScrollTrigger instance, so you have TWO different ScrollTrigger instances battling for controlling the second to() instance, see the problem?

 

Happy Tweening!

[anzorAs]

Hello!

 

my bad, i didnt explain it well enough: 

I want my card-container to overlap the hero on scroll (just like in the first pen of my initial post) and once the card-container reaches the top of the screen i want my cards to get pinned and scaled away to "make room" for the next card (just like in the second pen).

But since the hero marginBottom changes the y position of the card-container it messes up my scrolltriggers for the cards. that was my issue that i couldnt figure out.

 

I understand the ScrollTrigger issue and I thought there is no way to achieve what I wanted without two scrollTriggers. But lets put it aside for now. 

[mvaneijgen]

The timing could still be better, but I would create one timeline with a ScrollTrigger that controls your whole animation. I've write a guide for creating a card stacking animation which allows you to make any effect you want with the same setup, see:

 

 

That is what I've implemented in your pen (it is a bit different to what you had, but you could easily fix it to be what you want). I've created some more elements in your setup, so that we have steady triggers that don't get moved with GSAP and add some CSS to have everything layed out correctly. 

 

And the only thing that is different is an extra ScrollTrigger that pins .extra-trigger so that the card animation gets pinned when it needs to. Again the timing could be better, but I hope this shows you how you could go about it. Please check the post I've linked it explains how everything works and I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen mdojxbN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[anzorAs]

Finally got around to review and respond!

 

Thanks @mvaneijgen! Your approach is definitely the closest to what I've imagined. 

However, I am afraid it breaks if user has disabled JavaScript. 

Maybe its an irrational fear, but I am keen on websites working without JS, just in case

[Rodrigo]

19 minutes ago, anzorAs said:

However, I am afraid it breaks if user has disabled JavaScript. 

Maybe its an irrational fear, but I am keen on websites working without JS, just in case

Yeah, to avoid that your HTML/CSS needs some basic structure first, then figure a way to animate said structure. Sometimes is necessary to overwrite something set in the CSS files in order to make something work as expected.

 

Finally in over 12 years of doing web development I've never heard of a single person who told me that ran into an user that had JS disabled on the browser. Normal users don't do that, so more than an irrational fear is an unfounded one IMHO.

 

Happy Tweening!

[mvaneijgen]

Yeah same here as @Rodrigo stated, but it is a good thing to keep in the back of your head.

 

My guide is to explain a basic concept it is not a full on guide what the best way to set this up for accessibility, that is something you as the developer has to keep in mind, but you could easily set the CSS when the JS loads either by adding a class or setting up the properties with a gsap.set() as @Cassie does in the video linked in my guide. 

 

https://www.youtube.com/watch?v=l-Cw6PncvxE

 

[anzorAs]

You guys are right, 

thank you for taking time to help me out, I appreciate it a lot!