5

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!

Sam
  • 472
  • 1
  • 8
  • 19
  • 1
    Try not to use an id more than once in your html. You should be using a class instead of an id in this case. – Lisa Nov 27 '19 at 09:16

2 Answers2

6

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

Bob H
  • 71
  • 1
  • 1
    This would only work if the id was used one time. This situation looks like it would need a loop, or 3 different scenes. – Lisa Nov 27 '19 at 09:17
0

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.

Lisa
  • 323
  • 3
  • 14