Jump to content
GreenSock

miketipp

Members
  • Posts

    8
  • Joined

  • Last visited

Posts posted by miketipp

  1. Hi
    my example in codepen

    shows, which functionality I wanted to achieve:

     

    there are two horizontal menus. If I click the left button (regardless of whether it is the warm or cold button), the clicked left button moves the left menu to the right and the right menu to the left.
    This works.

     

    the other need is, if I click the button on the right side (regardless of whether it is the warm or cold button), it should stay where it is.
    This works not fine, cause there are some animation before at last the right menu stays at the right side.
    I want to fix this in a clean way.

     

    My preferred idea is: in the play button to ask whether the warm-menu is in position x then play timeline x and if not then play the timeline y.

     

    Could you help me with this query to get the current position or css attribute.
    it is because of my lack of javascript that I am asking you and it is my interest to work with this amazing gsap.
    Thanks a lot in advance

     

    Michael
     

    See the Pen zxVPjg by codepenmicha (@codepenmicha) on CodePen

  2. Hi Carl,

     

    thanks for your interest. the example is taken from someone who translated your actionscript into javascript

     

    no, there are no errors with seperate timelines, no matter which combination I click.

    the only thing is if I click another item before the previous is finished then the previous disappear abrupt.

    But I think this has only to do with bad timing not with wrong code.

    What do you think?

     

    Michael

  3. hi,

     

    I worked with the example from Carl at:

    http://www.snorkl.tv/2011/04/bullet-proof-timelinemax-transitions-part-3-reverse-out-or-forward-out/

     

    so far so good

    There is a mistake in the getLabelAfter query I guess.

     

    After clicking some times there is a combination where Link 2 and another combination where link 1 is blocked.

    My codepen is:

    See the Pen hetFr by codepenmicha (@codepenmicha) on CodePen

     

    I suggest that there is a mistake in this row

    // //if ( myTimeline.getLabelAfter().indexOf("_in") != -1 )
    
    function navClick(evt){
    
    		targetSection = $(evt.target).attr('title');
    		$('div#navcontainer div').removeClass('active');
    		$(evt.target).addClass('active');
    	//alert(targetSection);	
    		if ( targetSection != currentSection ){
    			// mit getLabelBefore trit der fehler von teil3 auf teil 2 NICHT mehr auf
    			if ( myTimeline.getLabelAfter().indexOf("_in") != -1 ){
    				//alert(getLabelAfter);
    				myTimeline.tweenTo(myTimeline.getLabelAfter(), {onComplete:introduceTargetSection});
    			} else {
    				myTimeline.timeScale = 1;
    				myTimeline.tweenTo(currentSection + '_in', {onComplete:introduceTargetSection});
    			}
    		}
    		
    		evt.preventDefault();
    	}
    

    I thank you for helping with this query of the section1_in label.

    Is there anaother possibilty to check whether section1_in or section1_complete is palyed?

     

    thank you very much for answering

    Michael

  4. Hi Rodrigo,
    I thank you very much for this solution. I did know that there are more than one blob element in the var blob (all with class blob) but I didn't know how to compare these elements in the for loop. so this is the trick: var blobAmount = blob.length;
    and the other thing was to connect the several blobs with element via: var element = blob;
    Again I thank you;

    for me a very important step.
    Michael

  5. thank you very much for staying with me.
    I've learned to declare an array literally.  And to use and go for class with $(".blob") instead of #blob.
    And to use a chain of blobani.to().to().to(); instaed of insertMultiply.

    To further understand Rodrigos genial codepen, I reduced some things: I delete the timelineDelay and therefor use a staggernumber after "sequnce".
    so this is my codepen (with $.each loop):

    See the Pen fhaIq by codepenmicha (@codepenmicha) on CodePen

    $(window).load(function(){
    	
    	var tl = new TimelineMax();
    	var	blobTweens = [];
    	var restartBtn = $("button#restartBtn");
      
    function createBlobs() {
    	var blob = $(".blob");
    
    
    	$.each(blob, 
    	//for(i=0; i < 7; i++){
    	
    	function(index, element) {
    						  
    		var blobAni = new TimelineLite({});
    
    		blobAni
    			.to(element, 2, {x:480})
    			.to(element, 0.5, {y:-250}, '-=1.75')
    			.to(element, 0.5, {rotation:350}, '-=1.75')
    			.to(element, 0.5, {y:-140});
    
    		blobTweens.push(blobAni);
    	}
    )}
    
    	function createMasterTimeline() {
    		tl.add(blobTweens, 0, "sequence", -2.0); 		
    	}
      
    createBlobs();
    createMasterTimeline();	
    	  
    });
    
    

    My question is: can you help me to express the loop with a javascript for(i=0; i < array.length; i++) loop instead with the jquery each loop?
    codepen link:

    See the Pen satGp by codepenmicha (@codepenmicha) on CodePen

    just for my understanding.
    Second question is: I thought the advantage of Calrs method in the activetuts tutorial was: to have only one html element and multiply it through the javascript code. Am I wrong with this idea?

    thanx for working with you.
    Michael

     

  6. Hi rhernando, hi bassta

    thanks for answering.
    I learned about literal arrays and the links to javascript sites were extremely helpful.

    And:

    I tried the proposal with $("<div class='blob' />"), but I couldn't get it to work.

    here my codepen:

    See the Pen vnhuF by codepenmicha (@codepenmicha) on CodePen

    It seems this it not what you mean.

     

    sorry about making it big, but I'm faszinated of the idea of multiple objects and I like to show you the actionscript from Carl first (just for orientation) and then my attempt to get it work with javascript and tweenMax only.

    here is the actionscript (from: http://hub.tutsplus.com/tutorials/timelinelite-ultimate-starter-guide-advanced-sequencing--active-10331):

    package {
    
    import flash.display.MovieClip;
    import com.greensock.*;
    import com.greensock.easing.*;
    //import com.greensock.TweenAlign;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import fl.controls.Button;
    import fl.controls.Slider;
    import fl.events.SliderEvent;
    
    
    
    public class MultipleNestedTimelines extends MovieClip {
    
        public var tl:TimelineMax;
        public var blobTweens:Array;
    
        //stage instances
    
    
        public var slider:Slider;
        public var restart_btn:Button;
    
        public var meet_mc:MovieClip;
        public var the_mc:MovieClip;
        public var blobs_mc:MovieClip;
    
        public function MultipleNestedTimelines():void {
    
            if (stage) {
                init();
            }
            else {
                addEventListener(Event.ADDED_TO_STAGE, init);
            }
        }
    
        private function init(e:Event = null):void {
    
            //set up nav events
            slider.addEventListener(SliderEvent.THUMB_DRAG, sliderChange);
            restart_btn.addEventListener(MouseEvent.CLICK, restart);
    
            blobTweens = [];
    
    
            //create blobs and their respective timeline animations
    
            createBlobs();
    
            createMasterTimeline();
    
        }
    
    
        private function createBlobs():void {
    
            for (var i:int = 0; i < 30; i++) {
                var blob:Blob = new Blob();
                blob.y = 475;
                addChild(blob);
    
                var blobAni:TimelineLite = new TimelineLite();
    
                blobAni.insertMultiple([
                   TweenLite.to( blob, 2, {x:680, ease:Linear.easeNone}),
                   TweenLite.to( blob, .5, {y:Math.random() * 200}),
                   TweenLite.to( blob, .9, {rotation:360, delay:.1}),
                    TweenMax.to( blob, .5, {y:230, ease:Quad.easeIn, delay:.5})
                   ]);
                
                blobTweens.push(blobAni);
    
            }
        }
    
    
    
        private function createMasterTimeline():void {
    
    
            tl = new TimelineMax({onUpdate:trackProgress});
            
            //pass an array of clips to allFrom();
            tl.insertMultiple( TweenMax.allFrom( [meet_mc, the_mc, blobs_mc], .5, {scaleX:0, scaleY:0, ease:Back.easeOut} ), 0, TweenAlign.NORMAL, .3);
            
            
            //blobTweens array was populated with TimelineLite's in createBlobs()
            tl.appendMultiple(blobTweens, 0, TweenAlign.NORMAL, .4);
    
        }
    
        //slider and nav controls
        private function trackProgress():void {
            slider.value = tl.currentProgress * 100;
        }
    
        private function sliderChange(e:SliderEvent):void {
            tl.pause();
            tl.currentProgress = slider.value * .01;
        }
    
        private function restart(e:MouseEvent):void {
            tl.restart();
        }
    }
    }
    

    and here is my attempt in codepen:

    See the Pen oAgcD by codepenmicha (@codepenmicha) on CodePen

    $(window).load(function(){
    	
    var tl = new TimelineMax;// ({onUpdate:myupdateHandler});
    	var blobTweens = [];//array literal 
    	
    	
    	createBlobs();
    	createMasterTimeline();		
    
    
    
    
    
    
    
    
    function createBlobs() {
    
    	for (var i=0; i<4; i++){  
    
    		var blob = $("#blob"); 
    		//var blob = $("<div class='blob' />");// doesn't work
    		//var blob = $(".blob");
    	
    		var blobAni = new TimelineLite();
    		
        blobAni.insertMultiple([
    	TweenLite.to(blob, 2, {x:480}),
    	TweenLite.to(blob, 0.5, {y:-250}),
    	TweenLite.to(blob, 0.5, {rotation:350, delay:.1}),
    	TweenLite.to(blob, 0.5, {y:-140, delay:0.5})
        ]);
    		
    	blobTweens.push(blobAni);
       }
    }
    
    
    
    function createMasterTimeline() {
       tl = new TimelineMax();
       tl.appendMultiple(blobTweens, 0, "normal", .5);
       //tl.add(blobTweens, 0, "normal", .5);
    			
    }
    
    });
    

    How do I check if blobTweens.push(blobAni); works?

    and how do I fill the MasterTimeline with the looped timeline so that I get multiple instances of blob?
     

     

    I hope this is interesting

    thank you for advices

    Michael

  7. Hi,
    I'm studying the video-tutorial "advanced sequencing - meet the blobs".
    http://hub.tutsplus.com/tutorials/timelinelite-ultimate-starter-guide-advanced-sequencing--active-10331
    by Carl Schooff
    I want to rebuild it in javascript not AS.
    in the video at 25'45 I'm stucked with looping through the blobani timeline with insertMultiple and push the created timelines into an array.
     

     var blobTweens = new Array();
    
    function createBlobs() {
    
    for (var i=0; i<10; i++){  
    var blob = $("#blob");
    
    var blobani = new TimelineLite();
    blobani.insertMultiple([
        TweenLite.to(blob, 2, {x:480}),
        TweenLite.to(blob, 0.5, {y:-250}),
        TweenLite.to(blob, 0.5, {rotation:360, delay:.1}),
        TweenLite.to(blob, 0.5, {y:-140, delay:0.5})
        ]);
    blobTweens.push(blobani);
    or
    blobTweens = (blobani);
    }
    }
    

    I can't push the timelines that were created by the for loop into the blobTweens array. can you please help me with the right javascript syntax for this wonderful idea to create multiple objects?

    thank you for the timeline guide videos and for your answer

    Michael
     

×