Home > Developer > Web Develop
Timelinelite is a piece of the Greensock Tweenmax library that provides the ability to create sequenced animation with Ver Y little code or Setup.
Key value:
Read more:https://egghead.io/lessons/angularjs-greensock-timelinelite-animation-sequences
Example:
Angular.module (' website ', [' nganimate ']). Controller (' Mainctrl ',function($scope) {$scope. Slides=[{bg:' Images/bg3.jpg ', Avatar: ' Images/john.png ', title: ' Big Boss ', subtitle: ' Monkey king '}, {bg:' Images/bg1.jpg ', Avatar: ' Images/joel.png ', title: ' Second Boss ', subtitle: ' Monkey leader '}, {bg:' Images/bg2.jpg ', Avatar: ' Images/lukas.png ', title: ' Other Monkeys ', subtitle: ' Mopsi '} ]; $scope. Direction= ' Left '; $scope. Currentindex= 0; $scope. Setcurrentslideindex=function(index) {$scope. Direction= (Index > $scope. currentindex)? ' Left ': ' Right '; $scope. Currentindex=index; }; $scope. Iscurrentslideindex=function(index) {return$scope. Currentindex = = =index; }; }). Animation ('. Slide-animation ',function () { return { //Remove the current cardBeforeaddclass:function(element, className, done) {if(ClassName = = ' Ng-hide ') { varScope =Element.scope (), Finishpoint=element.parent (). width (); Console.log (Element.parent (). width ()); if(Scope.direction!== ' right ') Finishpoint =-Finishpoint; Tweenlite.to (element,0.5, {left:finishpoint, Ease:Ease.easeInOut, oncomplete:done}); } Else{done (); } }, //fade in selected cardRemoveclass:function(element, className, done) {if(ClassName = = ' Ng-hide ') { varScope =Element.scope (), StartPoint=element.parent (). Width (),//Start a timelineTL =NewTimelinelite (); if(scope.direction = = = ' right ') StartPoint =-StartPoint; //chain methods, animate one by one //. FromTo (Target:object, Duration:number, Fromvars:object, Tovars:object, position:*) //FromTo (Element.find ('. Title '), 0.5, {left: -200, alpha:0}, {left:0, alpha:1, ease:Ease.easeInOut}) //element.find ('. Title '): Find the element //0.5:500ms //{left: -200, alpha:0}: Animate start with Left: -200 and alpha:0 //{left:0, alpha:1, ease:Ease.easeInOut}: Animate end With left:0 ....Tl.fromto (element, 0.1, {left:startpoint}, {left:0, Ease:Ease.easeInOut, Oncomplete:done}) . FromTo (Element.find ('. Title '), 0.5, {left: -200, alpha:0}, {left:0, alpha:1, Ease:Ease.easeInOut}) . FromTo (Element.find ('. Subtitle '), 0.5, {left: -200, alpha:0}, {left:0, alpha:1, Ease:Ease.easeInOut}) . FromTo (Element.find ('. Avatar '), 0.5, {left:800, alpha:0}, {left:380, alpha:1, ease:Ease.easeInOut}); } Else{done (); } } }; });
<!DOCTYPE HTML><HTMLNg-app= "website"> <Head> <MetaCharSet= "Utf-8"> <title>Egghead.io-greensock Timelinelite</title> <Linkhref= "Assets/css/bootstrap.css"rel= "stylesheet"> <Linkrel= "stylesheet"href= "Assets/css/timeline.greensock.css"> </Head> <BodyNg-controller= "Mainctrl"> <Divclass= "Slider"> <Divng-repeat= "Slide in slides"Ng-hide= "!iscurrentslideindex ($index)"class= "Slide Slide-animation"> <imgclass= "Nondraggableimage"ng-src= "{{slide.bg}}"> <imgclass= "Nondraggableimage Avatar"ng-src= "{{Slide.avatar}}"> <H1class= "title"><span>{{Slide.title}}</span></H1> <H3class= "subtitle"><span>{{Slide.subtitle}}</span></H3> </Div> </Div> <Divclass= "NAV"> <Divng-repeat= "Slide in slides"Ng-class= "{' Active ': Iscurrentslideindex ($index)}"Ng-click= "Setcurrentslideindex ($index)"> <H3>{{Slide.title}}</H3> </Div> </Div> <Scriptsrc= "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></Script> <Scriptsrc= "//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></Script> <Scriptsrc= "//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></Script> <Scriptsrc= "//cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/tweenmax.min.js"></Script> <Scriptsrc= "Js/timeline.greensock.js"></Script> </Body></HTML>
[Angularjs+ GSAP] Greensock timelinelite Animation Sequences
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
