miketipp

Hi my example in codepen http://codepen.io/codepenmicha/pen/zxVPjg 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

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

Hi Rodrigo, thank you for your proposal to create seperate timelines. It works like this: http://codepen.io/codepenmicha/pen/yIBzt thanks for your valuable help Michael

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: http://codepen.io/codepenmicha/pen/hetFr 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

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

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): http://codepen.io/codepenmicha/pen/fhaIq $(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: http://codepen.io/codepenmicha/pen/satGp 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

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: http://codepen.io/codepenmicha/pen/vnhuF 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: http://codepen.io/codepenmicha/pen/oAgcD $(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

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