Search the Community
Showing results for tags 'arrays'.
Found 7 results
-
const removeFromQueue = (pos, track) => { const refList = itemsRef.current; const delRefEl = refList[pos]; const otherRefItems = refList.slice(pos + 1); const updateList = Array.from(tracks); updateList.splice(pos, 1); gsap.to(delRefEl, { duration: 0.5, opacity: 0, onComplete: tweenFinished, onCompleteParams: [otherRefItems, pos], }); function tweenFinished(otherItems, rIdx) { console.log({ otherItems, rIdx }); const tl = gsap.timeline({ onComplete: onAnimationComplete, onCompleteParams: [rIdx], }); otherItems.forEach((item) => { const tween = gsap.to(item, { y: "-70", clear: "y", }); tl.add(tween, 0); }); } function onAnimationComplete() { dispatch({ type: PLAYING_LIST_ACTIVE_TRACKS, payload: updateList, }); } };
-
I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. ! I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. <div id="home-about" class="div-pics div-left"> <h1 class="div-title">About</h1> <div class="div-desc dl"> <div class="div-arrow"> <div class="arrow-part arrow-top"></div> <div class="arrow-part arrow-bottom"></div> </div> <p class="div-text dt-left"> Lorem ipsum ... </p> <li class="div-link"><a href="#">Order parts</a></li> </div> </div> function loopDivs() { divArray.forEach(div => { div.addEventListener("mouseover", showDetails); function showDetails() { tlDetails = new TimelineLite(); tlDetails .to(".div-desc", 0.5, { top: "0%" }); } }); } event.target - instead of ".div-desc" won't work since in my case I can't hover the .div-desc, because it is sent all the way down and it's invisible. My idea is to hover its parent and then it would appear. Thanks in advance!
-
hi guys , what the good way to do this in a timeline ? .from([item1,item2,item3], 1, {rotation:Math.randomFrom(1,4), ease: Power4.easeOut },'#item') My arrays items are dynamic and never same, and i want to dispatch the random value in properties for each items in the array ? what the best way to proceed and for keep a good readable structure in the timeline. I can maybe do something like this , but it kind weird ! and ugly code. tl.call(() => { items.forEach(it => {tl.from(it, 0.2, {rotation:Math.randomFrom(1,4), ease: Power4.easeOut },'#item') }) },null,null,'#item') If you have some suggest, i take it
-
This is what I would like to happen: 1) Loop through a 2 dimensional array, each array contains a story segment: approx. 9 sentences/lines per segment. 2) Loop through the segment, display 3 lines of the segment. Each line is staggered for a fadeIn display 3) After the fade-in, Delay for short reading period before fading out the display. Sounds easy enough, but I never got it right. I tried doing this using jQuery and setIntervals, then switched to setTimeouts, before giving it a go with GSAP. I'm lacking knowledge when it comes to looping with timers and the end result is I only see few sentences from my multi-dimensional array. Sorry, ES5 is all I know, but it feels like I'm missing a closure or something in this codepen Here's what the html, and the javascript looks like: HTML: <body> <section class="hero"></section> <section class="tribute"> <div class="tribute-line1"></div> <div class="tribute-line2"></div> <div class="tribute-line3"></div> </section> </body> Javascript: $(function() { var tribStory = [ [ "Line 1-1", "Line 1-2", "", "Line 1-4", "Line 1-5", "", "Line 1-7", "Line 1-8", "Line 1-9" ], [ "Line 2-1", "Line 2-2", "", "Line 2-4", "Line 2-5", "", "Line 2-7", "Line 2-8", "Line 2-9" ] ]; // end array var tl = new TimelineLite(); var $line1 = $(".tribute-line1"); var $line2 = $(".tribute-line2"); var $line3 = $(".tribute-line3"); var $currFade; var delay = 1000; var i = 0; var storyLen = tribStory.length; function displayTribute( tribute, j ) { console.log( tribute[j], tribute[j+1], tribute[j+2]); $line1.text( tribute[j] ); $line2.text( tribute[j+1] ); $line3.text( tribute[j+2] ); tl.staggerTo( [$line1, $line2, $line3], 3, { opacity: 1 }, 0.5 ) .delay(2).to( [$line1, $line2, $line3], 1, { opacity: 0 } ); } var tribAnim = function() { if ( i < storyLen ) { var tribArray = tribStory[i]; var tribArrLen = tribArray.length; for ( j = 0; j < tribArrLen; j+=3 ) { (function( tribArray, j){ displayTribute( tribArray, j ); }(tribArray,j)); } i++; } if ( i < storyLen ) tribAnim(); }; tribAnim(); });
-
Hello. I am in need of serious help with this problem I'm facing. First off let me tell you what I want to achieve with my code. On click of a button at the top-center of my screen, 4 fishes are to be tweened with bezier movements to simulate 'swimming' through water. They have other functions but this is the part that I need to get working. function tweenFish():void { var numY:Array = new Array; for (var count:Number = 1; count < 5; count++) { numY.push(count+8); } numY.reverse(); trace(tweenArr, round); for (var numX:Number = 0; numX < 4; numX++) { var randomStart:Number = (Math.floor(Math.random() * (460 - 140 + 1)) + 140); _difficulty[numX].y = randomStart; _difficulty[numX].x = -50; if (round == 1) { tweenArr[numX] = TweenMax.to(_difficulty[numX], (numY[numX]/round), {bezier:{curviness:2, autoRotate:true, values:[{x:50, y:randomStart+5}, {x:150, y:randomStart-5}, {x:250, y:randomStart+5}, {x:350, y:randomStart-5}, {x:450, y:randomStart+5}, {x:550, y:randomStart-5}, {x:770, y:randomStart+5}]}, ease:Cubic.easeInOut}); } } tMax.add(tweenArr); } This is the function I use to setup the tweens for the fishes. Each fish (set in an array called _difficulty) is given a set x value (offscreen) and a random y value so that each run they will 'swim' across the stage. This works perfectly. In fact, all of it runs perfectly...until I try to run it again. This is my initialization which basically stops the round if the fishes make it off the stage without being clicked (intended functionality). var tMax:TimelineMax = new TimelineMax({onComplete:endRound}); And this is the function it calls. function endRound():void { GoFishing.removeEventListener(MouseEvent.CLICK, fish); while (tweenArr.length > 0) { tweenArr.length = 0; } // tMax.clear(); POSSIBLE CODE? gotoAndStop("endGameResults"); scoreBox.text = "Your score is: " + points; gameResultsBG.width = 1; gameResultsBG.height = 1; TweenLite.to(gameResultsBG, 1.5, {scaleX:1.1, scaleY:1.1}); TweenLite.to(gameOverText, 3, {autoAlpha:1}); TweenLite.to(playAgain, 2, {visible:true}); timerX.stop(); timerX.removeEventListener(TimerEvent.TIMER, clock); playAgain.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { MovieClip(root).gotoAndStop(1); GoFishing.addEventListener(MouseEvent.CLICK, fish); round = 0; } ); } Don't mind the commented line at the top. Anyway, this function leads to frame 2 where it's an end-game screen and it allows you to retry. 'playAgain' would take you to frame 1 and play the tween again when the button at the top is clicked, or so I thought. This is where the fishes are frozen off screen (I expanded the window and saw), and they do not move when the function is called, BUT the timer for the timeline STILL RUNS. Know why? The timeline takes 10 seconds to run each time at first. On the second run, 10 seconds pass and it leads me to the end-game screen. So clearly the timeline is running as I would expect it to, but the fishes aren't being moved. Is there something wrong with my code here? Do I need a different approach? Also I just thought of this: Would disabling these fishes, or switching to another frame at any point mess up the tween functionality? Thank you for your help.
-
I'm trying to create a system of spawns for an as3 game. The goal is to have my enemy tweens spawn from one of the 4 different spawn points defined in the array of new Points, randomly. I've successful debugged my process so far, as the code at the very bottom illustrates. However, the problem comes when I attempt to enter my random spawn call into the starting point of the greensock tween. The code below shows if the random spawn call starts at the x value, that is to say: {startAt:{x:myArray[random]}, the problem here is that when myArray[random] is called in that manner it's going to return both an x and a y value which of course is not going to work b/c both points are put into the x value of the tween, and separating the x and y values into two different arrays will call random x and y values, voiding my original intent of them spawning from a static point randomly. That being said, I'm asking if there is a way that I could combine both an x and y value in one place so, in theory the tween I'm looking for might look like this: myTween = TweenMax.to(mc, 3, {startAt:{myArray[random]}, x:end.x, y:end.y}); *notice how I want the starting point to be the randomly picked point in the array. * here is the idea put into action, but notice starting point below is { x:myArray[random] } var spawnPoint_Array:Array = [new Point(270, 808), //////// X and Y value of SPAWN 1 new Point(-81, 768), //////// X and Y value of SPAWN 2 new Point(1024, 768), //////// X and Y value of SPAWN 3 new Point(566, 809)] //////// X and Y value of SPAWN 4 var random = Math.round(spawnPoint_Array.length * Math.random()); //////picks a random spawn point myTween = TweenMax.to(mc, 3, {startAt:{x:myArray[random]}, x:end.x, y:end.y}); *in the above tween, mc just refers to the movieclip name Any ideas on how I would fix this problem?
-
Hi, I have found the following code to loop through an array of swf's - which works really smoothly (thanks). I would like to re-use this code to load other arrays of swf's. Could I make a separate class so I could re-use the code in a more streamlined way rather than pasting it over and over (any advice how to do this would be great)? Also how can I center the x and y co-ordinates of the loader? Thanks! import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; private var loaderIndex:Number = -1; private var currentLoader:SWFLoader; private var urls:Array = ["movie0.swf","movie1.swf","movie2.swf",]; private var swfs:LoaderMax = new LoaderMax({onComplete:completeHandler,onChildComplete:childCompleteHandler}); private function startMovieOne(event:MouseEvent):void { homePage_mc.visible = false; // Loop through urls and create a queue of swf loaders for (var i:Number = 0; i < urls.length; i++) { swfs.append( new SWFLoader(urls, {container:movieTwo_mc, autoPlay:false, width:480, height:480, scaleMode:"proportionalInside"}) ); } swfs.load(); btnListener(); } function childCompleteHandler(e:LoaderEvent):void { trace(e.target + " loaded"); e.target.content.visible = false; } function completeHandler(e:LoaderEvent):void { trace("all swfs loaded"); initCurrentLoader(); addEventListener(Event.ENTER_FRAME, trackSWFPlayback); } function initCurrentLoader() { loaderIndex++; if (loaderIndex == swfs.numChildren) { //reset back to 0 if the last swf has already played loaderIndex = 0; } //dynamically reference current loader based on value of loaderIndex currentLoader = swfs.getChildAt(loaderIndex); //make the content of the current loader visible currentLoader.content.visible = true; //tell the current loader's swf to to play currentLoader.rawContent.gotoAndPlay(1); } function trackSWFPlayback(e:Event):void { //trace(currentLoader.rawContent.currentFrame); //detect if the loaded swf is on the last frame if (currentLoader.rawContent.currentFrame == currentLoader.rawContent.totalFrames) { trace("swf done"); //hide and stop current swf currentLoader.content.visible = false; currentLoader.rawContent.stop(); //set up and play the next swf; initCurrentLoader(); } } private function btnListener():void { home_btn.addEventListener(MouseEvent.CLICK,resetScreens); } public function resetScreens(event:MouseEvent):void { //unload content currentLoader.content.visible = false; currentLoader.rawContent.stop(); trace("unloaded"); homePage_mc.visible = true; }
