I created a function for adding scroll magic animations, this avoids repetition, aids readability & understanding.

Scrol Magic Factory Function

//Ideally all the code below should be inside a self executing anonymous function 

var controller = new ScrollMagic.Controller();
function setSMAnim(tweenArray,triggerElement,triggerHook,dur,funcOnStart){
	var tweenQuote = new TimelineMax();
    	tweenQuote.add(tweenArray);


	  new ScrollMagic.Scene({
	        triggerElement: triggerElement,
	        triggerHook: triggerHook,
	        duration:dur
	    })
	    //.addIndicators()
	    .setTween(tweenQuote)
	    .addTo(controller)
	    .on('start', funcOnStart)
}

// Creating an animation on #quote4Triangle, (has to be an array, even if its a single tween)
// which starts when #quote4 enters the screen, can also be set in number between 0-1
// set for 150% of scroll
setSMAnim(
	[ TweenMax.from("#quote4Triangle", 1.5, {delay:0.3,strokeDashoffset: '1000',ease:Power1.easeIn}) ],
	'#quote4',
	"onEnter",
	'150%'
);


// Inspired by https://prashantsani.com/
// Dependency : Scroll Magic and GSAP