Scrollmagic duration - scrollmagic

Question

Is there a way to set the scrollmagic duration on a scene as long as the height of the scene? I want to use the class toggles functionality and certain scenes are heigher than the viewport height.
<section id="sec1">I'm 400px in height</section>
<section id="sec1">I'm 100% in height (1 viewport)</section>
<section id="sec1">I'm 2500px in height (2,2 viewports)</section>
Duration in px: {duration: 400}
Duration in vh: {duration: '100%'}
Duration in element height: ???
Thanks for helping!

Answer 1

Try using $("#sec1").height() in the duration option.

Answer 2

To make the duration the height of a scene, you would need to find the height of the item, and then apply that to the duration.
Seeing as all your scenes are sections, you could loop through all sections.
(function() {
let controller = new ScrollMagic.Controller();
// Run through all sections
let items = document.querySelectorAll("section");
items.forEach(function(element, index) {
let height = element.clientHeight; //height of current element
let scene = new ScrollMagic.Scene({
duration: height
//Other scene options go here
})
.on("leave enter", function() {
//Element instructions
})
.addTo(controller);
});
Note: Unless the goal is to give each section their own ID, I would change the ID to class on your sections as pages should only have an ID appear once on the page, while classes can be used multiple times.
An example of this in use.