4

I'm using ScrollMagic for the first time and as far as I got I understood how to trigger my animation based on starting element and duration

Isn't possible to set a end trigger instead of duration?

var smcontroller = new ScrollMagic.Controller();
var smscene1 = new ScrollMagic.Scene({
    triggerElement: "#products-box-1", 
    offset: 200, duration: 1600
})
.setTween(tweencan)
.addIndicators()
.addTo(smcontroller);
Mohammad
  • 21,175
  • 15
  • 55
  • 84
al404IT
  • 1,380
  • 3
  • 21
  • 54

3 Answers3

8

you can set the duration to the length of a certain div.

duration: $("#divid").height()

Referenced from: Scrollmagic duration

1

The best way I've found is to calculate the number of pixels from the top of the page to that point in the document by getting the heights and offsets of the elements you are trying to align with, and subtracting the pixels to the top of the element that you want to scroll and its height.

For example, if you have a right rail containing a <div class="rail"> that you want to scroll alongside a <container class="content"> and you want the object to scroll down to the bottom of "content":

duration = ($("content").offset().top + $("content").height()) - ($("rail").offset().top + $("rail").height().top);

It seems so simple once you see it, but I racked my brain for a good hour trying to figure out how to do what you want to do before I realized it was this easy.

currarpickt
  • 2,290
  • 4
  • 24
  • 39
Bob H
  • 71
  • 1
0

Very old question, I know but for whoever finds this as I did just to find there was no answer. To have a callback when the scene ends, do the following:

var smcontroller = new ScrollMagic.Controller();
var smscene1 = new ScrollMagic.Scene({
    triggerElement: "#products-box-1", 
    offset: 200, duration: 1600
})
.setTween(tweencan)
.addIndicators()
.addTo(smcontroller);

// Callback for scene ending
smscene1.on('end', () => {
    console.log('Callback called amigo!');
});

If you would like to check the cheatsheet, take a look here: https://ihatetomatoes.net/wp-content/uploads/2016/08/ScrollMagic-CheatsheetV2.pdf

Tets Tets
  • 85
  • 8