Angular JS 1.2.0rc2 Animations

Angular JS 1.2.0rc2 Animations

I'm trying to create a carousel type effect using ngAnimate along with the
TweenMax library. The problem is that I can't get the animation effects to
change based on the directional arrow clicked.
I've tried this:
var animationDirection = function (direction) {
if (direction === "left") {
return {
leave: function (element, done) {
TweenMax.to(element, 1, {x: -$('.portfolio-slider').width() +
10, onComplete: done});
},
enter: function (element, done) {
TweenMax.from(element, 1, {x: $('.portfolio-slider').width(),
onComplete: done});
}
};
} else {
return {
leave: function (element, done) {
TweenMax.to(element, 1, {x: $('.portfolio-slider').width() +
10, onComplete: done});
},
enter: function (element, done) {
TweenMax.from(element, 1, {x: -$('.portfolio-slider').width(),
onComplete: done});
}
};
}
}
app.controller('PortfolioCtrl', function ($scope, $animate) {
$scope.visibleSlide = 1;
var totalSlides = 2;
$scope.goLeft = function () {
$scope.visibleSlide--;
if ($scope.visibleSlide < 1) {
$scope.visibleSlide = totalSlides;
}
app.animation(".slider-entry", animationDirection("left"));
};
$scope.goRight = function () {
$scope.visibleSlide++;
if ($scope.visibleSlide > totalSlides) {
$scope.visibleSlide = 1;
}
app.animation(".slider-entry", animationDirection("right"));
};
});
Which didn't work. However I was able to get it to work in a single
direction by using:
app.animation(".slider-entry", function () {
return {
leave: function (element, done) {
TweenMax.to(element, 1, {x: -$('.portfolio-slider').width() + 10,
onComplete: done});
},
enter: function (element, done) {
TweenMax.from(element, 1, {x: $('.portfolio-slider').width(),
onComplete: done});
}
};
});
placed outside of the controller function. My experience doing it that way
showed that the function was only called once, when the view was initially
loaded.
Any idea on how to make this work?