Jump to content
GreenSock

lance1572

Members
  • Posts

    10
  • Joined

  • Last visited

Posts posted by lance1572

  1. Fixed. Had to enclose in a function and then move the var tl out of the click function.

    j(function(){ 
    		
    			var tl = new TimelineLite(); 
    		
    			j('.slide a').click(function() {
    			  
    				var tri1 = document.getElementById("tri-one");
    				var tri2 = document.getElementById("tri-two");
    				var tri3 = document.getElementById("tri-three");
    				var tri4 = document.getElementById("tri-four");
    				var tri5 = document.getElementById("tri-five");
    				
    				
    				tl.add (TweenMax.to (tri1, .25, {opacity: 1}));
    				tl.add (TweenMax.to (tri2, .25, {opacity: 1}));
    				tl.add (TweenMax.to (tri3, .25, {opacity: 1}));
    				tl.add (TweenMax.to (tri4, .25, {opacity: 1}));
    				tl.add (TweenMax.to (tri5, .25, {opacity: 1}));
    		 });
    		
    			
    			j('.info a').click(function() {
    					tl.restart();
    			});
    
    		 });
    
    
  2. I have looked around cant seem to figure this out. Any help would be very appreciated!!

     

    I have a few navigation tab items that show certain content. One of the peices of content animates when one of the tabs are clicked. I'd like to know how to restart or bring the timeline back to its original state when someone clicks on another tab.

     

    Right now what happens is the animation runs fine when a assigned tab is clicked. When I shuffle through the other tabs and come back to the original assigned tab the animation doesnt start - it is in it's end state.

     

    I tried to replicate it in codepen

     

     

     

    I'm thinking this is more of scope issue with the variable?

     

    Many thanks!!!

    //Tab to start animation
    
    j('.slide a').click(function() {
    		  	runAnimation();
    			
    		 }); 
    		 
    		function runAnimation() {
    			var tri1 = document.getElementById("tri-one");
    			var tri2 = document.getElementById("tri-two");
    			var tri3 = document.getElementById("tri-three");
    			var tri4 = document.getElementById("tri-four");
    			var tri5 = document.getElementById("tri-five");
    			
    			var tl = new TimelineLite(); 
    			
    			tl.add (TweenMax.to (tri1, .25, {opacity: 1}));
    			tl.add (TweenMax.to (tri2, .25, {opacity: 1}));
    			tl.add (TweenMax.to (tri3, .25, {opacity: 1}));
    			tl.add (TweenMax.to (tri4, .25, {opacity: 1}));
    			tl.add (TweenMax.to (tri5, .25, {opacity: 1}));
    	
    		}
    
    //Other tab to reset the timeline
    
    var reSetTimeline = runAnimation();
    
    j('.info a').click(function() {
    		   	reSetTimeline.restart();	
    });
    
    
    

    See the Pen HcwFs by anon (@anon) on CodePen

  3. Thank you for the response gentlemen! I'm definitely rusty on this since I really havent touched TweenMax AS for sometime (been doing more CSS - Sass responsive dev etc...). So I am ready to jump back in. It seems that I have been missing out on a lot!! Technology goes so fast!!!

     

    I remember building out interactive banners and small applications with TweenMax AS and LOVED every minute of it. I know that JS is 'somewhat similar' so it shouldn't be too tough to pick it up. I have a pretty good understanding of JQuery so far.

     

    My only hesitation was the audio part. After searching here, I had only found maybe one or two posts on audio and those were saying that audio was limited.

     

     

    As far as timesheets go... I had to grab something an go :-D . The deadline put on me for that was unbelievable. :twisted:

     

    I'd prefer to ditch that in favor of this!!

     

     

    Many thanks!!!

     

    Sad I cannot go to NYC for the training!

     

    best,

    Lance

    • Like 1
  4. Hi all!

     

    I come from using TweenMax for AS and have now been tasked with creating a slide presentation with audio without using Flash so it can be viewed on ipads etc.

     

    Here are my tasks. I have a narrator discussing different slides much like a powerpoint presentation. Each slide could potentially have its own bulleted animations synced with the audio. Each slide progress automatically. The user can scrub forward or backwards and there is a time-code.

     

    I have built one already using timesheets.js but it only allows for slide to slide animations not animations within a particular slide or at least thats what I'm getting.

     

    i guess its a two-fold question.

     

    Can GSAP be integrated with timesheets

     

    Or can I build something like I mentioned above with GSAP alone?

     

    Many thanks!

     

    Lance

     

     

     

     

  5. So what I did was just put all of the tweens into a movieclip and looped that.

     

    Anyone interested heres what I did:

     

    
    //Loop
    var intervalId:Number;
    var count:Number = 0;
    var maxCount:Number = 2;
    var duration:Number = 15000;
    
    function executeCallback():Void {
    if(count < maxCount) {
    	launchMe();
    } else if(count >= maxCount) {
    	clearInterval(intervalId);
    } 
    count++;
    }
    
    intervalId = setInterval(this, "executeCallback", duration);
    
    function launchMe():Void {
    main.removeMovieClip();
    this.attachMovie("Main", "main", getNextHighestDepth(), {_x:0, _y:0});
    }
    
    launchMe();
    
    
    
    

  6. Hi all sorry if this has been addressed before. I cannot seem to find anything that is working for me. I'm trying to do a banner that loops 3 times with a delay between the end of timeline and the beginning.

     

    All that is happening is it runs through the timeline. It does not delay or restart.

     

    I'm okay at as2 but havent delved into as3 and this project requires as2.

     

    I've tried a restart function that I had seen in another post but it's not working. I tried it with TimeLineMax and used the repeat and that worked but unfortunately added 10 more k to my swf. I've read some on the docs but still unclear.

     

    Any help would be appreciated!!!! Thanks!

     

    
    var timeline:TimelineLite = new TimelineLite({onComplete:done});
    
    timeline.append( TweenLite.to(text_01, .75, {_alpha:100, _xscale: 100, _yscale: 100, ease:Linear.easeOut}));
    timeline.append( TweenLite.to(text_01, .5, {_alpha:0, ease:Regular.easeOut}), 1.25);
    timeline.append( TweenLite.to(arrowRight, .5, {_x:162, ease:Regular.easeOut}));
    timeline.append( TweenLite.to(arrowLeft, .5, {_x:-1, ease:Regular.easeOut}));
    timeline.append( TweenLite.to(arrowTop, .5, {_y:155, ease:Regular.easeOut}));
    
    function done() {
    TweenLite.delayedCall(4, timeline.restart);
    }
    
    

×