CODEWITHSUNDEEP
scrollmagic
Sam
Sam

Reputation: 462

Scrollmagic duration

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!

Upvotes: 5

Views: 9976

Answers (2)

Lisa
Lisa

Reputation: 361

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.

Upvotes: 0

Bob H
Bob H

Reputation: 71

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

Upvotes: 6

Related Questions