Search the Community

I still learning how to use Greensock, even i was a newbie with js or Jquery. But when i see what GSAP can do, i wanna learn it. I doing practice with bootstrap 4 carousel, but for the loops, i have to overide all. I not understand, how to overide just for the animation inside the ".carousel-caption". This one is the hardest one Y_Y /*RUN TIMELINE WHEN EACH OF THE SLIDES IS LOADED*/ $carousel.on("slid.bs.carousel", function (e) { TweenLite.to($carouselCaption, 0.1, { opacity: 1 }); var slideId = e.relatedTarget.id; if (slideId === "1") { pertamaTl.restart(); keduaTl.pause(); ketigaTl.pause(); } else if (slideId === "2") { if (counter === 0) { keduaTl = keduaTimeline(); } else { keduaTl.restart(); } counter++; }; if (slideId === "2") { pertamaTl.pause(); keduaTl.restart(); ketigaTl.pause(); } else if (slideId === "3") { if (counter === 1) { ketigaTl = ketigaTimeline(); } else { ketigaTl.restart(); } counter++; }; if (slideId === "3") { pertamaTl.pause(); keduaTl.pause(); ketigaTl.restart(); } else if (slideId === "1") { if (counter === 1) { pertamaTl = pertamaTimeline(); } else { pertamaTl.restart(); } counter++; }; }); Anyone can teach me, how to convert it / or writing , adapted to the gsap coding rules...? One thing, can anyone teach me how to create Progress bar, or animate that red line below the title, thanks Best Regards Mugi Sorry for my Bad Grammar

I'm a little confused about how to return a timeline for later use. I have a number of elements that I am looping through and playing my timeline on, however, I need to return the timeline outside of this loop, so that I can call the .kill() method on it, inside of another function. So my functions looks like this: dtnavs = { runStuff: function(){ dtnavs.cellFloatyTweens(); }, killStuff: function(){ // not sure how to kill the cellFloatTL here? }, cellFloatyTweens: function(){ dtnavs.cell.each(function(){ cellFloatTL = new TimelineMax() .to(this, dtnavs.getRandomNum(8,17), {xPercent: dtnavs.getRandomNum(0.5,12.5), yPercent: dtnavs.getRandomNum(1.5,14), rotation: "'-=" + dtnavs.getRandomNum(-20,1) + "'", yoyo:true, repeat:-1, ease: Power2.easeInOut}); cellFloatTL.seek(9); //So when it starts it's already moving }); } } Is it possible to call kill on this timeline, inside another method/function? I thought I could possibly do this, but it doesn't seem to be working: dtnavs = { runStuff: function(){ dtnavs.cellFloatyTweens().play(); }, killStuff: function(){ dtnavs.cellFloatyTweens().kill(); }, cellFloatyTweens: function(){ cellFloatTL = new TimelineMax(); dtnavs.cell.each(function(){ cellFloatTL.to(this, dtnavs.getRandomNum(8,17), {xPercent: dtnavs.getRandomNum(0.5,12.5), yPercent: dtnavs.getRandomNum(1.5,14), rotation: "'-=" + dtnavs.getRandomNum(-20,1) + "'", yoyo:true, repeat:-1, ease: Power2.easeInOut}); cellFloatTL.seek(9); //So when it starts it's already moving }); return cellFloatTL; } } The above code only runs my tween on one of the dtnavs.cell elements, and I need it to loop through them all and then be able to kill the whole thing at a later time. Thanks in advance for any insight. PS: I can add a codepen if you need, but my issue is really in syntax, not with the tween it's self, so I thought that just code would be sufficient here.

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.