scrollmagic not responding to the trigger element

Question

I have problems with the ScrollMagic. It's not responding at all on the trigger element. Below I'll provide with the code:

the CSS:

.container {
    height: 3000px;
}

#trigger {
    position: relative;
    top: 300px;
}

.katrori {
    opacity: 0; 
    position:relative; 
    top:300px; 
    background-color:#eee; 
    height:400px; 
    padding:25px; 
    font-family:Arial, Sans-serif;
    font-weight:bold;
}

and the JS:

$(document).ready(function($)) {
    var controller = new ScrollMagic();
    var tween = TweenMax.to(".katrori", 0.5, {opacity: 1, backgroundColor: "#1d1d1d"})
    var scene = new ScrollScene({triggerElement: "#trigger"})
    .setTween(tween)
    .addTo(controller);
});

what am I missing?

You are missing **proper indentation** for one thing ;) But seriously, could you set up a [CodePen](http://codepen.io/) or [JSFiddle](https://jsfiddle.net/)? — Ivan Modric, Feb 12 '16 at 15:02

Ivan Modric · Accepted Answer · 2016-02-12T16:03:12.543

Your JS has mainly two errors.

You have one parenthesis (")") too many.

$(document).ready(function($)) {
                            ^^ --> one of those

You are using ScrollMagic version >=2 (which you should) but use their functions from version 1. Here is their documentation for the current versions.

The correct way to initialize the container and scene is now:
```
var container = new ScrollMagic.Container({...});
var scene = new ScrollMagic.Scene({...});
```

When you apply these changes a working example of your code might look like this:

$(document).ready(function ($) {
    var controller = new ScrollMagic.Controller(),
        tween = TweenMax.to(".katrori", 0.5, {opacity: 1, backgroundColor: "#1d1d1d"}),
        scene = new ScrollMagic.Scene({triggerElement: "#trigger"});

    scene
        .setTween(tween)
        .addTo(controller);
});

You might also want to look at their examples.

EDIT

Addition to bulletpoint 2:

In ScrollMagic version 1 the container and scene were initialized in the script this way:

var controller = new ScrollMagic({ *global options applying to all scenes added*});
var scene = new ScrollScene({ *options for the scene* })

In version 2 the same thing is done this way:

var container = new ScrollMagic.Container({...});
var scene = new ScrollMagic.Scene({...});

That's why you script didn't work before. The styling is still done in CSS.

thanx a lot man :) this helped me a lot even though i had to add duration and offset to make it work. so what about the container u mentioned above? i didnt understand it quite well. i styled the container via css. do i have to initialize it on the JS file as well ? — Ilir Bajrami, Feb 12 '16 at 15:55
yah, nice. thanx for the edit as well. i didnt know that there r 2 versions of scrollmagic. i just stumbled through different examples on interent and abviously i mixed it up :P now im aware of the second version so this heleped me a lot. thanx again ;) maybe i'll have other questions while working on this... — Ilir Bajrami, Feb 12 '16 at 16:07

scrollmagic not responding to the trigger element

1 Answers1