Scrollmagic does not respond to trigger element

Question

I have problems with ScrollMagic. It does not respond to the trigger element at all. Below I will give the code:

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 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?

Answer 1

Your JS has basically two errors.

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

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

• You are using version ScrollMagic > = 2 (what you need), but use their functions from version 1 . Here is their documentation for current versions.

  The correct way to initialize container and scene now:

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

When applying 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 can also see their examples .

EDIT

Bulletpoint 2 Supplement :

In ScrollMagic version 1, container and scene were initialized in a script as follows:

 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 as follows:

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

That is why you script did not work before. styling is still done in CSS .