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.