AngularJS + TweenMax + Router

var app = angular.module('app', ['ngRoute','ngAnimate']); app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider .when("/home", {redirectTo: "/"}) .when("/home", {templateUrl: "home.html", controller: "home"}) .when("/page1", {templateUrl: "page1.html", controller: "page1"}) .when("/page2", {templateUrl: "page2.html", controller: "page2"}) .otherwise({redirectTo: "/" }); $locationProvider.html5Mode(true); }]); app.controller('TimeLine', function($scope, $timeout){ // Enter $timeout(function() { $scope.initialize = true; }); // Leave $timeout(function() { $scope.initialize = false; }, 4000); }); app.animation(".page", function() { return { enter: function(element, done){ TweenMax.from(element, 1, {autoAlpha: 0, scale: 0.5, onComplete:done}); }, leave: function(element, done){ TweenMax.to(element, 1, {autoAlpha: 0, scale: 0.5, onComplete:done}); } }; }); app.controller('home', function($scope){ $scope.pageClass = 'page-home'; $scope.message = "HOME"; }); app.controller('page1', function($scope){ $scope.pageClass = 'page-1'; $scope.message = "PAGE 1"; }); app.controller('page2', function($scope){ $scope.pageClass = 'page-2'; $scope.message = "PAGE 2"; });
Simple navigation website with angularJS and Greensock tweenmax for transition pages

1 Response

Hi,
How would the html?

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.