Pinned scene is jumping. (Alt: managing scene height with transitions.)

[scallemang]

Hi SM community,

Summary

I'm working with ScrollMagic and GSAP for the first time, on a timeline animation where the scene gets pinned, you scroll through a list of items (with y-axis manipulation to 'spoof' scrolling), and then it concludes.

When I don't give my trigger a z-index above the next section, the next section overlaps it and then jumps back. When I do give it one, it's mostly good, except for the large white space, because I've moved contents up on the y-axis.

---

Demonstration of issue

YouTube clip

Here is a CodePen with the relevant JS included, also pasted below:

(function($) {
  // Init ScrollMagic
  var controller;
  // Create scene
  var smScene;
  gsap.registerPlugin(ScrollTrigger);
  ScrollTrigger.saveStyles(".mobile, .desktop");
  ScrollTrigger.matchMedia({

    // desktop
    "(min-width: 1366px)": function() {
      controller = new ScrollMagic.Controller({
        globalSceneOptions: {
          triggerHook: 0,
          offset: 100,
        }
      });

      smScene = new ScrollMagic.Scene({
        triggerElement: '#advantages__trigger',
        duration: '500%'
      });

      var advantagesSM = gsap.timeline();

      advantagesSM
        // Images
          // Text
            // Container
        .fromTo($('#advantage-r-1'), {y: '+=20'}, {duration: 0.7, y: 0, autoAlpha: 1, ease:Power1.easeOut}, 0.4)
          .fromTo($('#advantage-l-1 .advantage__text-wrapper p'), {color: '#737373'}, {duration: 0.7, color: 'black', ease:Power1.easeOut}, '<')
            .fromTo($('#advantages__col--left'), {y: 0}, {duration: 0.7, y: 0, ease:Power1.easeOut}, '<')
        .to($('#advantage-r-1'), {duration: 0.5, autoAlpha: 0, ease:Power1.easeNone}, '+=1.5')
          .to($('#advantage-l-1 .advantage__text-wrapper p'), {duration: 0.5, color: '#737373', ease:Power1.easeNone}, '<')
            .to($('#advantages__col--left'), {duration: 0.5, y: -105, ease:Power1.easeNone}, '<')
        .fromTo($('#advantage-r-2'), {y: '+=20'}, {duration: 0.7, y: 0, autoAlpha: 1, ease:Power1.easeOut}, '-=0.1')
          .fromTo($('#advantage-l-2 .advantage__text-wrapper p'), {color: '#737373'}, {duration: 0.7, color: 'black', ease:Power1.easeOut}, '<')
            .to($('#advantages__col--left'), {duration: 0.7, y: -105, ease:Power1.easeOut}, '<')
        .to($('#advantage-r-2'), {duration: 0.5, autoAlpha: 0, ease:Power1.easeNone}, '+=1.5')
          .to($('#advantage-l-2 .advantage__text-wrapper p'), {duration: 0.5, color: '#737373', ease:Power1.easeNone}, '<')
            .to($('#advantages__col--left'), {duration: 0.5, y: -210, ease:Power1.easeNone}, '<')
        .fromTo($('#advantage-r-3'), {y: '+=20'}, {duration: 0.7, y: 0, autoAlpha: 1, ease:Power1.easeOut}, '-=0.1')
          .fromTo($('#advantage-l-3 .advantage__text-wrapper p'), {color: '#737373'}, {duration: 0.7, color: 'black', ease:Power1.easeOut}, '<')
            .to($('#advantages__col--left'), {duration: 0.7, y: -210, ease:Power1.easeOut}, '<')
        .to($('#advantage-r-3'), {duration: 0.5, autoAlpha: 0, ease:Power1.easeNone}, '+=1.5')
          .to($('#advantage-l-3 .advantage__text-wrapper p'), {duration: 0.5, color: '#737373', ease:Power1.easeNone}, '<')
            .to($('#advantages__col--left'), {duration: 0.5, y: -315, ease:Power1.easeNone}, '<')
        .fromTo($('#advantage-r-4'), {y: '+=20'}, {duration: 0.7, y: 0, autoAlpha: 1, ease:Power1.easeOut}, '-=0.1')
          .fromTo($('#advantage-l-4 .advantage__text-wrapper p'), {color: '#737373'}, {duration: 0.7, color: 'black', ease:Power1.easeOut}, '<')
            .to($('#advantages__col--left'), {duration: 0.7, y: -315, ease:Power1.easeOut}, '<')
        .to($('#advantages__col--left'), {duration: 0.7, y: 0, ease:Power1.easeOut}, '-=0.1');

      smScene
        .setPin('#advantages__trigger')
        .addTo(controller)
        // .addIndicators()
        .setTween(advantagesSM)
        .addTo(controller);
    },
    "(max-width: 1365px)": function() {
      if(controller) {
        controller.destroy(true);
        smScene.destroy(true);
      }
    },
  });

})(jQuery);

---

Request

Can you either advise what I'm doing wrong that's causing the jumping section? Or, if there's not a viable solution, advise how I could gracefully animate the white space height down at the conclusion of the timeline?

Thank you kindly in advance!

[masoombscs]

Hi Samuel, I saw your post on upwork. I wanted to submit the proposal but i am new on upwork so i thought maybe it might not get your attention. Anyways i check your codepen link and figured out that your are triggering your animation on the inner div(id="advantages__trigger") you should add this ID selector to the parent section of this div(class="section--advantage").

[scallemang]

Hi Samuel, I saw your post on upwork. I wanted to submit the proposal but i am new on upwork so i thought maybe it might not get your attention. Anyways i check your codepen link and figured out that your are triggering your animation on the inner div(id="advantages__trigger") you should add this ID selector to the parent section of this div(class="section--advantage").

Thank you for the comment, I will reply to you on that site. @masoombscs, what is your username/account there so I can connect with you?

[masoombscs]

Hi, I didn't bid on your Post. If you say then i will bid on it.

[scallemang]

Hi, I didn't bid on your Post. If you say then i will bid on it.

Please do. I need this resolved ASAP – project deadline.

[masoombscs]

https://www.upwork.com/freelancers/~017e5ae33b7cc09838 here is my profile link. Thanks

[scallemang]

(Closing issue: GSAP's ScrollTrigger ended up covering my use case, so I removed Scroll Magic for now. Thank you, SM community.)