CODEWITHSUNDEEP
javascriptjqueryscrollmagic
al404IT
al404IT

Reputation: 1418

Scrollmagic add end trigger

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

Upvotes: 4

Views: 8676

Answers (3)

Tets Tets
Tets Tets

Reputation: 85

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

Upvotes: 0

user2157847
user2157847

Reputation:

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

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

Referenced from: Scrollmagic duration

Upvotes: 8

Bob H
Bob H

Reputation: 71

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.

Upvotes: 1

Related Questions