<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="angularjs@1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TimelineMax.min.js"></script>
<script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js"></script>
<script data-require="scrollmagic@*" data-semver="2.0.5" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script data-require="scrollmagic@*" data-semver="2.0.5" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
<script data-require="scrollmagic@*" data-semver="2.0.5" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src=""></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myRepeatPlnkr">
<h1>Hello Plunker!</h1>
<div ng-controller="Controller">
<div ng-repeat="n in slides">
<div slide="" data="n" scroll-controller="smc"></div>
</div>
</div>
</body>
</html>
// Code goes here
angular.module('myRepeatPlnkr', [ScrollMagic])
.controller('Controller', function($scope, $timeout) {
//console.log('Controller');
console.log('Controller');
$scope.smc = new ScrollMagic.Controller();
$timeout(function() {
$scope.slides = {
'slide-1': {
title: 'Slide 1',
items: [
{text: 'Item 1'},
{text: 'Item 2'},
{text: 'Item 3'},
{text: 'Item 4'},
{text: 'Item 5'},
{text: 'Item 6'},
{text: 'Item 7'},
{text: 'Item 8'},
]
}, 'slide-2': {
title: 'Slide 2',
items: [
{text: 'Item 1'},
{text: 'Item 2'},
{text: 'Item 3'},
{text: 'Item 4'},
{text: 'Item 5'},
{text: 'Item 6'}
],
items2: [
{text: 'Item again 1'},
{text: 'Item again 2'},
{text: 'Item again 3'},
{text: 'Item again 4'},
]
}, 'slide-3': {
title: 'Slide 3',
items: [
{text: 'Item 1'},
{text: 'Item 2'},
{text: 'Item 3'},
{text: 'Item 4'},
]
}
}
}, 100);
})
.directive('slide', function($timeout) {
return{
link: function(scope, elem, attrs) {
// $timeout(function() {
console.log('slide', scope);
var items = $(elem).find('.item, .item-again'),
boxes = items.find('.box');
// var smController = smController;
// pin slide scene
new ScrollMagic.Scene({
triggerElement: elem[0],
duration: $(elem).height(),
triggerHook: 0
})
.setPin(elem[0])
// .addIndicators({name: 'pin'})
.addTo(scope.scrollController);
var intro = new TimelineMax()
.staggerFromTo(items, 1.0, {
alpha: 0,
y: 10,
},{
alpha: 1,
y: 0,
ease: Cubic.easeInOut
}, 0.1)
.pause();
var outro = new TimelineMax()
.to(items, 1.0, {
alpha: 0,
ease: Sine.easeInOut
})
.pause();
new ScrollMagic.Scene({
triggerElement: elem[0],
duration: $(elem).height() * 0.8,
triggerHook: 0
})
.on('enter', function() {
outro.kill();
intro.invalidate()
.restart();
}).on('leave', function() {
intro.kill();
outro.invalidate()
.restart();
})
// .addIndicators({name: 'items'})
.addTo(scope.scrollController);
var intro1 = new TimelineMax()
.staggerFromTo(boxes, 0.4, {
alpha: 0,
y: 10,
},{
alpha: 1,
y: 0,
ease: Cubic.easeInOut
}, 0.01)
.pause();
var outro1 = new TimelineMax()
.to(boxes, 0.4, {
alpha: 0,
ease: Sine.easeInOut
})
.pause();
new ScrollMagic.Scene({
triggerElement: elem[0],
duration: $(elem).height() * 0.8,
triggerHook: 0,
offset: 100
})
.on('enter', function() {
outro1.kill();
intro1.invalidate()
.restart();
}).on('leave', function() {
intro1.kill();
outro1.invalidate()
.restart();
})
.addIndicators({name: 'boxes'})
.addTo(scope.scrollController);
// });
},
templateUrl: 'slide.html',
scope: {
data: '=',
scrollController: '='
}
}
})
/* Styles go here */
.slide {
min-height: 800px;
background-color: #cbddff;
padding: 1em;
margin-bottom: 1em;
}
.slide .item,
.slide .item-again {
height: 100px;
display: inline-block;
margin-right: 2em;
}
.box {
width: 35px;
height: 20px;
display: inline-block;
margin: 2px;
}
.red {
background-color: #aa0000;
}
.blue {
background-color: #0000aa;
}
<div class="slide">
<h1>{{data.title}}</h1>
<div class="item" ng-repeat="n in data.items">
<div>{{n.text}}</div>
<div class="box red"></div>
<div class="box red"></div>
<div class="box red"></div>
<div class="box red"></div>
<div class="box red"></div>
</div>
<div class="item again" ng-repeat="n in data.items2">
<div>{{n.text}}</div>
<div class="box blue"></div>
<div class="box blue"></div>
<div class="box blue"></div>
<div class="box blue"></div>
<div class="box blue"></div>
<div class="box blue"></div>
<div class="box blue"></div>
</div>
</div>