I am using Scroll Magic for the first time and I am in general very new to JavaScript/jQuery.

I got it to work but it is very messy and repetitive code.

Here is the fiddle: https://jsfiddle.net/y0mrf5kg/

This is the messy code (I just gave this as an example, in my project there is about 50 scenes after each other in this manner!):
 

var controller = new ScrollMagic.Controller();

var tween1 = TweenMax.to('#animation1', 0.7, {
    opacity: 0
  });
var scene1 = new ScrollMagic.Scene({
    offset: 200,
    reverse: true
})
.setTween(tween1)
.addTo(controller)
.addIndicators();

var tween2 = TweenMax.to('#animation2', 0.7, {
    opacity: 1
  });
var scene2 = new ScrollMagic.Scene({
    triggerHook: 'onEnter',
    offset: 500,
    reverse: true
})
.setTween(tween2)
.addTo(controller)
.addIndicators();

Is there any way I can make this code more DRY?

Thank you for your help!!

I am using Scroll Magic for the first time and I am in general very new to JavaScript/jQuery. I got it to work but it is very messy and repetitive code.

Here is the fiddle. This is the messy code (I just gave this as an example, in my project there is about 50 scenes after each other in this manner!):

var controller = new ScrollMagic.Controller();

var tween1 = TweenMax.to('#animation1', 0.7, {
    opacity: 0
  });
var scene1 = new ScrollMagic.Scene({
    offset: 200,
    reverse: true
})
.setTween(tween1)
.addTo(controller)
.addIndicators();

var tween2 = TweenMax.to('#animation2', 0.7, {
    opacity: 1
  });
var scene2 = new ScrollMagic.Scene({
    triggerHook: 'onEnter',
    offset: 500,
    reverse: true
})
.setTween(tween2)
.addTo(controller)
.addIndicators();

Is there any way I can make this code more DRY?

I am using Scroll Magic (https://github.com/janpaepke/ScrollMagic) for the first time and I am in general very new to javascript/jquery.

I got it to work but it is very messy and repetitive code.

Here is the fiddle: https://jsfiddle.net/y0mrf5kg/

This is the messy code (I just gave this as an example, in my project there is about 50 scenes after each other in this manner!):

var controller = new ScrollMagic.Controller();

var tween1 = TweenMax.to('#animation1', 0.7, {
    opacity: 0
  });
var scene1 = new ScrollMagic.Scene({
    offset: 200,
    reverse: true
})
.setTween(tween1)
.addTo(controller)
.addIndicators();

var tween2 = TweenMax.to('#animation2', 0.7, {
    opacity: 1
  });
var scene2 = new ScrollMagic.Scene({
    triggerHook: 'onEnter',
    offset: 500,
    reverse: true
})
.setTween(tween2)
.addTo(controller)
.addIndicators();

Is there any way I can make this code more DRY?

Thank you for your help!!

I am using Scroll Magic for the first time and I am in general very new to JavaScript/jQuery.

I got it to work but it is very messy and repetitive code.

Here is the fiddle: https://jsfiddle.net/y0mrf5kg/

This is the messy code (I just gave this as an example, in my project there is about 50 scenes after each other in this manner!):

var controller = new ScrollMagic.Controller();

var tween1 = TweenMax.to('#animation1', 0.7, {
    opacity: 0
  });
var scene1 = new ScrollMagic.Scene({
    offset: 200,
    reverse: true
})
.setTween(tween1)
.addTo(controller)
.addIndicators();

var tween2 = TweenMax.to('#animation2', 0.7, {
    opacity: 1
  });
var scene2 = new ScrollMagic.Scene({
    triggerHook: 'onEnter',
    offset: 500,
    reverse: true
})
.setTween(tween2)
.addTo(controller)
.addIndicators();

Is there any way I can make this code more DRY?

Thank you for your help!!