ScrollMagic: How to recalculate scene height and tween parameters?

[honestbitchnosorry]

I am using the wipe effect for my website: http://scrollmagic.io/examples/advanced/section_wipes_manual.html

Each layer is auto height.

 

My current code is like this:

onst wipeAnimation = new TimelineMax()
        .to(".panel.one .layer", 2, {
          y: -panelOneScrollHeight,
          ease: Linear.easeNone
        })
        .to(".panel.one", 1, { y: "-100%", ease: Linear.easeNone })
        .to(".panel.two .layer", 1, {
          y: -panelTwoScrollHeight,
          ease: Linear.easeNone
        })
        .to(".panel.two", 1, { y: "-100%", ease: Linear.easeNone })
        .to(".panel.three .layer", 1, { y: "-100%", ease: Linear.easeNone })
        .to(".panel.three", 1, { y: "-100%", ease: Linear.easeNone })
        .to(".panel.four .layer", 2.5, {
          y: -panelFourScrollHeight,
          ease: Linear.easeNone
        })
        .to(".panel.four", 1, { y: "-100%", ease: Linear.easeNone })
        .to(".panel.five .layer", .5, { y: -(panelFiveScrollHeight), ease: Linear.easeNone });

      // create scene to pin and link animation
      new ScrollMagic.Scene({
        triggerElement: ".pinContainer",
        triggerHook: "onLeave",
        duration: "1100%"
      })
        .setPin(".pinContainer")
        .setTween(wipeAnimation)
        .on("progress", function(event) {
        //   console.log("Scene progress changed to " + event.progress);
          if (
            (event.progress > 0.266 && event.progress < 0.448) ||
            event.progress > 0.948
          ) {
            headerLogo.classList.add("primary");
          } else {
            headerLogo.classList.remove("primary");
          }
        })
        .addTo(controller);

 

 

The thing is, a certain page (or layer) has dynamic content that will affect the height (such as accordion, when you expand the content, this action will affect the height of the page). I need Scrollmagic to recalculate the height. How can I do it?

 

Please see the following images. The first one is when accordions are not expanded. The second one is when an accordion is expended. See how it messes up the page. So I need ScrollMagic to calculate the height and stuff. What's the way to do it?

 

Thanks.

 

[PointC]

I'm not sure I understand the question and there is no demo included, but it sounds like you'd want to look at the refresh() method.

http://scrollmagic.io/docs/ScrollMagic.Scene.html#refresh 

 

I think all of your questions since joining the GS forum have been about ScrollMagic and I've answered several for you, but ScrollMagic is not a GreenSock product. They do have a support area here:

https://github.com/janpaepke/ScrollMagic/issues

 

We're happy to help with GSAP related questions and problems. Including a demo will get you the best possible answers.

 

Happy tweening.

 

[honestbitchnosorry]

1 hour ago, PointC said:

I'm not sure I understand the question and there is no demo included, but it sounds like you'd want to look at the refresh() method.

http://scrollmagic.io/docs/ScrollMagic.Scene.html#refresh 

 

I think all of your questions since joining the GS forum have been about ScrollMagic and I've answered several for you, but ScrollMagic is not a GreenSock product. They do have a support area here:

https://github.com/janpaepke/ScrollMagic/issues

 

We're happy to help with GSAP related questions and problems. Including a demo will get you the best possible answers.

 

Happy tweening.

 

 

Thanks for your help. I greatly appreciate it.

 

After some tinkering, removing the tween scene.removeTween() and then re-setting it Scene.setTween solves the problem for me.

Turns out it's not really about ScrollMagic, but the tween parameters.