How to trigger ScrollMagic Scene for multiple elements

Do you want to learn how to trigger GreenSock tween for multiple elements on the page?

Related ScrollMagic CodePen:

Learn ScrollMagic from scratch!

ScrollMagic Workshop:

[Shafeequeonline]

this is the answer I was looking for... Thanks a lot

[VisionWeb]

Thanks for the tutorial Petr! Looking forward to see more ScrollMagic videos soon :)

[zed]

Awesome as always... Your tutorials are very very helpful and inspiring.

[vallurisundeep]

I have added animation to intro section and when I scroll down animation is working well but when coming back to intro section from bottom intro animation is not working. Please help.

[Mrcrabzzzzzzz]

How can I hide the hooks while keeping everything fucntional? just hide them

[arunts]

how to avoid tween missing while the fast scroll, i have 3 position for triggering and a big scenes needs to play on trigger. but tween missing on long scroll.

[TausendTode]

Hello Petr,
is there a way to use here a delay for single elements in this tween? I am using your code, with have one class "fade-in", when this is set to a div or element it gets fade in, when scroll into Viewport. All fine. But what when I have multiple elements witch gets into view. How can I set here delay, so that they get visible one by one.

[russelllevin]

Very cool, but I'm trying it and am getting TweenMax is not defined error. Any clues?

[thuanhuynhduc]

Thanks Petr! Thanks you so much! It's very helpful!! :)

[ponchsbocca]

Hi! thank you!
but... for tweening multiple animation into a same your class .fade-in ?
like:
TweenMax.from(".fade-in .photo", 0.3, {autoAlpha: 0, scale: 0.5, y: '+=30', ease:Linear.easeNone});
TweenMax.from(".fade-in .text", 0.5, {autoAlpha: 0, scale: 0.5, y: '+=30', ease:Linear.easeNone});
TweenMax.from(".fade-in .title", 0.8, {autoAlpha: 0, scale: 0.5, y: '+=30', ease:Linear.easeNone});

thank you in advance

[raghavendrakondapalli]

Hi sir, I'm using lazy loading in the angular, element are generating dynamically, trigger element not working please help me with this

[kilianf]

This was incredibly helpful for toggling (with scene.setClassToggle) a class of the active <section> so I didn't have to manually set up 10 new scenes. Thanks!

[normandubois_design]

Great tutorial Petr. Thanks! It's very helpful!! :)

[raghu]

please help me with below issue scroll magic trigger hook dynamically added an element.
$('.mydiv').on("load", function () {
var controller = new ScrollMagic.Controller();
this.each(function () {
var scene = new ScrollMagic.Scene({
triggerElement: this,
duration: 400
})
.on("enter ", function (e) {
if (e.type == "enter") {
console.log("Enter");
}
})
.setClassToggle(this, "videoActive")
.addIndicators()
.addTo(controller);
});
})

[FernandoFas]

Hi Petr,

Thanks for another amazing tutorials of yours. You know your sh*t hehe

I'm wondering if there is a way to make the animation revert the process when going up out of the screen and when the user scroll up again the animation is restarted.

You rock.

Kind regards,

Fernando Fas

[richardpixel]

Awesome stuff Petr, thank you so much! Mine is a little more complicated as I’ll need to trigger different animations (selectable within CMS) from one universal class (if that makes any sense?!) but I'll see if I can figure it out. Thanks again.

[wswebus]

Nice tutorial!
But how can i prevent repeating this animation when I scroll up and down multiple times?
Example: I scrol down, Content 1 appear. I scroll UP. Again scroll down and Content appear again. How to remove repeating of this?

[gibbslm]

thank you, very helpful. if you really hate tomatoes, don't worry, with contents like this you won't get them (at least not thrown to you)