javascript - Scrollmagic add end trigger - Stack Overflow

admin管理员组

文章数量:1345007

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);

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);

• javascript
• jquery
• scrollmagic

Share Improve this question Follow edited Aug 5, 2016 at 17:19 Mohammad 21.5k1616 gold badges5656 silver badges8484 bronze badges asked Aug 5, 2016 at 17:10 al404ITal404IT 1,41844 gold badges2525 silver badges5858 bronze badges 1

• I think there is no such provision as per the documents. I don't think there is any actual need of it. – Vishal Sharma Commented Aug 6, 2016 at 5:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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

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

Referenced from: Scrollmagic duration

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.

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/wp-content/uploads/2016/08/ScrollMagic-CheatsheetV2.pdf

本文标签： javascriptScrollmagic add end triggerStack Overflow