[ScrollMagic: How to recalculate scene height and tween parameters?]

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.

[ScrollMagic: How to recalculate scene height and tween parameters?]

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.

 

[Unwanted white space at the bottom of the page generated by ScrollMagic]

9 minutes ago, PointC said:

I'm not seeing any white space. In what browser(s) are you seeing this?

 

Chrome. When you scroll to the end,  there's white space.

 

However, it looks fine on Safari...

 

 

[Unwanted white space at the bottom of the page generated by ScrollMagic]

There is white space at the bottom of the page. I think it's generated by ScrollMagic (or GSAP). How can I get rid of this?

See the Pen dqNEKE by joshuajazleung (@joshuajazleung) on CodePen

[ScrollMagic section wipe wrong order]

That's right! Thanks so much!!

[ScrollMagic section wipe wrong order]

I am following the scrollmagic website's example http://scrollmagic.io/examples/advanced/section_wipes_manual.html to create wipe effect. I want the section scrolls from bottom to top. Right now section 4 sits on top, and the scroll order is wrong, some sections is missing when I scroll. What did I do wrong?

See the Pen OoWYXJ by joshuajazleung (@joshuajazleung) on CodePen

[ScrollMagic Section Wipes with multiple sections in each panel]

I am trying to mimic the wipe effect of this website, http://www.romance-journal.com/issues/issue-02-resistance/,  which is using ScrollMagic.

Each panel has more than 1 section. After all sections in a panel is scroll, the wipe effect executes, transitioning to the next panel.

 

I know the ScrollMagic website includes an example showing the wipe effect: http://scrollmagic.io/examples/advanced/section_wipes_manual.html

But how do I extend the example to include multiple sections in each panel? I would love to receive some insight. An example would be great too.

Thanks!

[How GSAP tween duration works with ScrollMagic scene duration?]

var wipeAnimation = new TimelineMax()
		.fromTo("#half",    1, {y:  "100%"}, {y: "0%", ease: Linear.easeNone})  // in from right
		.fromTo(".swipe.two",    1, {y:  "0%"}, {y: "-100%", ease: Linear.easeNone})  // in from right
		.fromTo(".swipe.three .subslide",    1, {y:  "0%"}, {y: "-100%", ease: Linear.easeNone})  // in from right
		
	// create scene to pin and link animation
	new ScrollMagic.Scene({
			triggerElement: "#pinContainer",
			triggerHook: "onLeave",
			duration: "500%"
		})
		.setPin(".swipes")
		.setTween(wipeAnimation)
		.addTo(controller);

 

Take that code for example. wipeAnimation has 3 tweens, each with 1s duration. The scene has a duration of 500%. How exactly is the duration of the animation fits with the scene duration? What is the animation triggered? When do the second tween and third tween start?