Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'timelinemax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hi ! Hope you are fine guys, I have a problem with a timeline execution. Here is my code : this is in a click function : tl = new TimelineMax(); tl.to(".office-map", 2, {marginRight: '1800px'}, "s"); tl.to("#office-contact", 2, {left: '800px', onComplete: afterAnimation, onCompleteParams: [toSelect, currentSelected]}, "s"); tl.to(".office-map", 2, {marginRight: 0}, 'b'); tl.to("#office-contact", 2, {left: 0}, 'b'); And here the called function (afterAnimation) : function afterAnimation(toSelect, currentSelected) { currentSelected.removeClass('active'); currentSelected.hide(); toSelect.addClass('active'); toSelect.show(); } the first 2 lines of tl are made to move the objects of their position to the outside of the screen. After the function trigged, I have two other tl line in order to have them back. .office-map do properly the action (restoring margin in 2 seconds as asked) but #office-contact is coming back like a big block in 0.2s. We don't have a single transition. When I right click "inspect element" I can see the modification on the moving left element, but not on the right one... Do you have a clue about the problem ? Thank you in advance, jean ps: ofc on codepen it's working perfectly well but not in my code : http://codepen.io/anon/pen/gpvvEN So, my problem with my code is to have a move back - of the blue div - correctly displayed.
  2. Hi, I've been playing with your cursor demo and trying to incorporate it into a TimelineMax (just to get me started as I'm new to all of this). I'm seeing some random delay though in between the cursor stopping blinking, and the text actually being typed and I can't narrow down where it's coming from as it doesn't seem to happen in the original Codepen (although there were some errors in that for some reason!) In addition to that, Chrome is getting a lot of the following messages, these happen at the same time as the delay so I've obviously got something mixed up. invalid top tween value: NaN Does anyone have any ideas as to the cause of the delay and the errors? I've forked the original Codepen, and then recreated the delay by copying my code back in http://codepen.io/padders1980/pen/YXeMYN
  3. Hi all! Is it possible to disable animations in IE8? Basically, I've got a site with a ton of animations and in IE8 it's really struggling and the site will be much better off if I disable animations. I still need the results of the animations, just no tweening. Does that make sense? Cheers, Mike
  4. this is my coding sample: var timeline:TimelineMax = new TimelineMax(); timeline.staggerTo([mc1,mc2,mc3],1,{onComplete:Function}, 1); i want each mc to have a different function. is it possible?
  5. Hi there! I find there's something I'm not quite grasping using TimelineMax and fromTo, been trying all sorts of different variations, but shouldn't this work? Or am I missing something critical here? timeline = new TimelineMax(); timeline.append(TweenMax.fromTo(element, 1, {css: {left: "100", top: "100"}}, {css:{left:"130", top: "130"}} )); Appreciate all the help I can get, thanks!
  6. When using `TimelineMax.from`, only the first object returns to the original `TimelineMax.set` value. All objects obey as I expect, when all of the `set`'s are done first, then `from`'s. I understand the timeline is doing the following respectively. I know they are different but in either demo, I expect the all of the bars to be at a `y` value of `20px` at the end. http://codepen.io/anon/pen/aOVwXv tl set from set from set from http://codepen.io/anon/pen/waPeOX tl set set set from from from
  7. When working with TimelineMax, is it possible to use a relative position and have a label? I have tried to chain `addLabel` before and after the desired position, but it does not seem to be able to be referenced. Am I falling into some sort of anti-pattern? Here is a barebones demo: http://codepen.io/anon/pen/VLrpQX var tl = new TimelineMax(); var boxNode = $('.box'); tl .fromTo( boxNode, 8, { autoAlpha: 0 }, { autoAlpha: 1 }, 'fadeIn' ) // Start the movement alongside the fade .addLabel('moveFromTop') .to( boxNode, 1, { top: '200px' }, 'fadeIn+=0' ) //.addLabel('moveFromTop') // One second after moving from top, move from the left .to( boxNode, 1, { left: '200px' }, 'moveFromTop+=1' );
  8. Hello, is there a possibility to manually set the position of my draggable element? I want to use it as an scrollbar that move synchronized with my timeline and it should automatically get updated when the timeline continues. Ive already added an onUpdate handler to my timeline and an onDrag handler to my draggable with all the calculations already implementet. I just dont know how I can set the position of my draggable. My Markup is the following: <nav id="drag-nav"> <div class="dragger"></div> </nav> Javascript: $dragNav = $("#drag-nav"); draggerInstance = Draggable.create(".dragger", { type: "y", bounds: $dragNav, onDrag: onDragHandler })[0];
  9. Hello, I have a few divs that will contain separate TimelineMax animations. Only one "slide" is visible at a time. Inside each slide are a few elements that I want to fade in using AutoAlpha... <div class="slide" id="Slide1"> <p>Line one</p> <p>Line two</p> <p>Line three</p> </div> <div class="slide" id="Slide2"> <p>Line one</p> <p>Line two</p> <p>Line three</p> </div> In an effort to save memory, I reuse the same variable called "tl" to store my TimelineMax object. After "Slide1" is done I call tl.kill() then re-instanciate it for "Slide2", and so on... The problem is when I go back to "Slide1" I kill then re-attach a new TimelineMax object. But now the animated elements do not appear. Inspecting the code, after an element is supposed to fade in it has the inline style="visibility:hidden" where as the first time TimelineMax gave them style="visibility:inherit". My guess is that TimelineMax appropriately adds the inline styles and everything works well. But the second time "visibility:inherit" doesn't work because they are inheriting "hidden" from the previous TimelineMax animation. Or something along those lines. My question(s) Is there some way to "reset" my elements so they are ready for a new TimelineMax instance? 1. Should I remove all inline styles created by TimelineMax so that I can attach a new instance later on? 2. Perhaps I should just add a TimelineMax instance once to each slide. I'm worried however that this will create memory issues with a large number of slides. 3. Finally, maybe I'm just not using kill() properly? I hope my question is clear. If not I'll try to setup a Codepen. Thanks!
  10. Hello, I've been fighting with this for way too long now (I've probably read 14000 forum posts and know the documentation by heart) and I thought it was about time I asked for some advice. http://codepen.io/anon/pen/rVLEbE After you've finished basking in the gloriousness of this fabulous unicorn (and recovered from viewing my lazy code), perhaps you could help me out. Essentially, all I want to do is remove the delays from the respective timelines. The actual code I'm working with is much complex than this (obviously) and involves animating a bunch of SVG elements, hence the nested timelines. When the animation plays for the first time, I'd like there to be a delay at the beginning and then a delay before the second timeline begins, simple. However, using the clever GSAP magic I want users to be able to click on an element to take them to a certain "state", this will be animated using tweenTo(). The issue is if a user goes from one end of the animation to the other they have to sit through the delays as well. I'd like to remove these delays. The animation only needs to play with delays once (when the page first loads), so it could be removed at the end of each timeline (or both delays removed at the end of the master timeline). I've tried calling .delay() directly in the timeline, it works but it removes the delay before it has played, which is no good. I've tried .delay() in a function, I've tried this function via onComplete and via .call(). No joy (I read something about .delay only working once or something along those lines but I was in a state of delirium so I can't be certain). I've also tried doing weird stuff with labels then removing them later but removing them broke everything (and made my cry a bit). I tried some other things that I can't quite remember as well, but they didn't work either. Then I basically lost my mind and made a unicorn themed Codepen example to illustrate my plight. Please help, it would be most appreciated. Peter.
  11. Hi everybody, I hope this doesn't seem too dimwitted, but I can't for the life of me figure out how to get my banners to repeat 3 times. I just started delving into the GSAP tools the other day. I have been tweaking the code below to try and get it working but I keep running into a brick wall. Any suggestions? import com.google.ads.studio.ProxyEnabler; var enabler:ProxyEnabler = ProxyEnabler.getInstance(); ///////////////////////////////////////////// import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import com.greensock.TweenMax; import flash.display.MovieClip; //import com.greensock.plugins.BlurFilterPlugin; //TweenPlugin.activate([blurFilterPlugin]); ////////////////////////////////////////////////// /////vars ////////////////////////////////////////////////// var tt = TweenNano.to; var tf = TweenNano.from; var td = TweenNano.delayedCall; var tm = new TimelineMax({repeat:3}); stop(); //TweenLite.to(mc, 1, {blurFilter:{blurX:10, blurY:10}}); ////////////////////////////////////////////////// /////utility ////////////////////////////////////////////////// function makeBtn(_clip:MovieClip, _over:Function, _out:Function):void{ _clip.addEventListener(MouseEvent.ROLL_OVER, _over); _clip.addEventListener(MouseEvent.ROLL_OUT, _out); //_clip.addEventListener(MouseEvent.CLICK, btnClick); _clip.useHandCursor = true; _clip.buttonMode = true; } function btnOver(e:MouseEvent):void{ endframe.cta.gotoAndPlay(2); } function btnOut(e:MouseEvent):void{ endframe.cta.gotoAndPlay(1); } /*function btnClick(e:MouseEvent):void{ var sURL:String; if ((sURL = root.loaderInfo.parameters.clickTag)){ navigateToURL(new URLRequest(sURL), "_blank"); } trace("the " + e.target.name + " has been clicked"); }*/ function getElapsedTime():void{ trace("elapsed time " + getTimer() / 1000); } ////////////////////////////////////////////////// /////animation ////////////////////////////////////////////////// function slideFromLeft(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { _mc.alpha=1; tf(_mc, _time, {x:-500, ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } function slideFromRight(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { _mc.alpha=1; tf(_mc, _time, {x:500, ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } function fadeAlphaIn(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { tt(_mc, _time, {ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } ////////////////////////////////////////////////// /////banner ////////////////////////////////////////////////// function init():void{ makeBtn(btn, btnOver, btnOut); eventOne(); } function eventOne():void{ slideFromLeft(orange_mc, .5, 1, 0); slideFromLeft(logo1_mc, .5, 1, 0); td(.5, eventTwo); } function eventTwo():void{ slideFromLeft(text1_txt, .25, 1, 0); slideFromRight(text2_txt, .25, 1, .75); td(1.75, event3); } function event3():void{ fadeAlphaIn(image1_mc, .5, 1, 0); td(1, eventThree); } function eventThree():void{ fadeAlphaIn(image2_mc, .5, 1, 0); td(1, event4); } function event4():void{ fadeAlphaIn(text1_txt, 0, 0, 0); fadeAlphaIn(text2_txt, 0, 0, 0); fadeAlphaIn(image1_mc, 0, 0, 0); fadeAlphaIn(image2_mc, .5, 0, 0); fadeAlphaIn(logo1_mc, .5, 0, 0); fadeAlphaIn(orange_mc, .5, 0, 0); td(.5, eventFive); } function eventFour():void{ slideFromLeft(text3_txt, .5, 1, 0); slideFromRight(logo2_mc, .5, 1, .5); td(2.5, eventFourB); } function eventFourB():void{ tt(orange_mc, 1, {x:-600, ease:Strong.easeOut}); tt(text3_txt, 1, {x:-600, ease:Strong.easeOut}); tt(logo2_mc, 1, {x:-600, ease:Strong.easeOut}); td(.5, eventFive); } function eventFive():void{ fadeAlphaIn(endframe, 0, 1, 0); slideFromRight(endframe.choice_logo, .5, 1, 0); slideFromRight(endframe.ef_copy, .5, 1, 0); tf(endframe.ht1, .5, {y:"50", ease:Strong.easeOut, delay:.15}); tf(endframe.ht2, .5, {y:"50", ease:Strong.easeOut, delay:.2}); tf(endframe.ht3, .5, {y:"50", ease:Strong.easeOut, delay:.25}); tf(endframe.ht4, .5, {y:"50", ease:Strong.easeOut, delay:.3}); td(1.75, eventSix); } function eventSix():void{ tt(endframe.ef_copy, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht1, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht2, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht3, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht4, 1, {x:-600, ease:Strong.easeOut}); slideFromRight(endframe.ef_copy2, .5, 1, 0); slideFromRight(endframe.cta, .5, 1, .5); fadeAlphaIn(endframe.ef_copy3, 1, 1, 1); //tt(endframe.cta, 1, {x:-600, ease:Strong.easeOut, delay:2.5}); //tt(endframe.choice_logo, 1, {x:-600, ease:Strong.easeOut, delay:2.5}); td(.5, getElapsedTime); tm(0, eventOne); } ////////////////////////////////////////////////// init();
  12. Hi, I using TimelineMax and i use lot off labels, I want to know when label enter (start or finish), how can i know this?
  13. I'm a little bit stumped on how to make this feature work... I've got cards are flipping the way I'd like them to (Thank you GSAP!) However I want to add the functionality that if a card is already flipped over and the use clicks on another card's 'view' to flip a second card over... I want the first card (that is already flipped over to it's back) to play in reverse (and go back to its starting position) and then the second card can flip over. Much like this: http://www.google.com/landing/now/#cards/ Any help is GREATLY appreciated, as I can't figure out the proper way to achieve this effect. (you can see I get stumped at line 42 of the codepen)
  14. Hello Every One, I would like some advice from this community of experienced interactive animators! I've been tasked with a "simple" scroll-based animation. With the first part of it featuring simple collision detection of circular objects. I'm wondering if I should FAKE the physics with static animation, OR use some kind of simple 2D physics with collision detection. I'll be using ScrollMagic to control a TimelineMax sequence, animating with SVG elements. Here is a brief overview of the animation: About 10 circles of various sizes float in 2D space, bouncing off each other, and showing a stressed effect on impact. (This could either be sortof random, or hard coded.. this is what I'm asking advice on. ) After a few collisions, the scroll based animation continues.. Next, a few circles highlight and overlap instead of colliding.. THEN, the overlapping section highlights.. A ven diagram.. Then, that ven diagram (oval) shape is animated in some way.. I have TWO primary questions: Should I use .svg elements with the image tag: <img id="circle1" src="image.svg"> or as that big string of svg code? Should I FAKE the collision detection? or implement some sort of simple 2d physics engine w/collision detection that I don't know about? (is there a GSAP class for this?) ALSO, any general advise about how to execute this would be helpful. Thanks in advance! -HaunGO
  15. How can I force each segment of TimelineMax to be TweenMax instead of TweenLite as it seems it is happening now. I have: var tl:TimelineMax = new TimelineMax(); tl.to(mc, 1, {x:100}); if I check this with trace ( tl.getActive(false,true,false)[0]; ) I will get TimelineLite. do I have to do tl.add ( TweenMax.... ) or there is a way to make TweenMax to be default for each addition to TimelineMax if lined with .to, .from, .fromTo ... ?
  16. I want to control my GASAP timeline that I have created in Adobe Edge Animate so this is what I do. //declare my variables var square1 = sym.$("square1"); square2 = sym.$("square2"); square3 = sym.$("square3"); square4 = sym.$("square4"); var tl = new TimelineLite(); //my simple timeline tl.to(square1, 2, {x:445}) .to(square2, 1, {x:-150}) .to(square3, 1, {y:"-=160"}) .to(square4, 1, {y:"-=160"}) sym.$("pauseBtn").click(function() { tl.pause() }); sym.$("playBtn").click(function() { tl.resume() }); and so on... (yeah I figured it out and this is the course I used to figure it out http://greensock.com/sequence-video AWESOME easing_2.html
  17. 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.
  18. Hi, I'm working on a new interface using SVG, GSAP and JQuery. I'd like a fluid interface with smooth interactions, and without staggered effects as you can see on this codepen (when the mouse move too fast between the plygons). I'd like something like this (each area back to its place before activating the new MouseEvent) but without the memory effect wich append a new Timeline each time the mouse is over a new area. I tried a lot of things like tl : new Timeline ({onStart:removeMouseEvent, onComlpete:addMouseEvent}) but the result is never what i want exactly. Is there a way to do that ? I hope I was clear enough, my english is pretty approximate. Thanks for reading and thanks for your amazing API.
  19. In the Greensock Home Page animation it shows how to use a different code for IE8 using an if (_isOldIE) ..else statement. Then, in the codepen it states: tl.add( new TweenMax(star, duration, etc. etc. Is it possible to add a TimelineMax sequence there instead of TweenMax and is there a codepen example of this anywhere?
  20. After a lot of back & forth regarding animation on a current project, I whipped up an export script to translate After Effects CC compositions into TweenMax/TimelineMax documents. I'll be adding more documentation & examples, but if you'd like to give it a try, you can find the script at: https://github.com/Meandmybadself/AfterMax
  21. I haven't been able to find an exact way to reproduce this. I have a simple timeline ($elBg is a jquery element): tl.add('intro').addPause('intro') .to($elBG, 2, {left: '-1040px'}) .add('something').addPause('something') .to($elBG, 2, {left: '-2040px'}) .add('ending').addPause('ending') .to($elBG, 2, {left: '-3040px'}); And I have two buttons that trigger .play or .reverse to move between the scenes. Every now and then the pause is skipped over and it continues to the next scene. I can't find an exact way to reproduce this I'm afraid as most of the time it works as expected. I have solved the issue by using tl.tweenTo(tl.getLabelBefore()); and tl.tweenTo(tl.getLabelAfter()); instead for my buttons but thought you might like to know incase there was a bug. Adam.
  22. Hello (first of all sorry for my poor english...) I want to stop my animation (drawing svg path using timelineMax and TweenMax) at the end, I try several things but nothing works... My code looks like this : var tween = new TimelineMax() .add(TweenMax.to($path1, 2.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path1 for 2.5 .add(TweenMax.to($path2, 1, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path2 for 1 .add(TweenMax.to($path3, 1.2, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path3 for ... .add(TweenMax.to($path4, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path4 for ... .add(TweenMax.to($path5, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path5 for ... .add(TweenMax.to($path6, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path6 for ... .add(TweenMax.to($path7, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path7 for ... .add(TweenMax.to($path8, 0.3, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path8 for ... .add(TweenMax.to($path9, 0.2, {strokeDashoffset: 0, ease:Linear.easeNone})); // draw path9 for ... someone have an idea ? Thank you ! Thomas
  23. I have three timelines, playButtonAppear, playButtonPulse, and playButtonDisappear. Basically, the appear and disappear ones will always overlap the basic pulse state, so the goal is to smoothly transition between the pulse's bounce, and the animation of the appear or disappear. To control this, there is an offset where one meets the other, and fiddling with it helps to dial in to make sure the overlapping items are in sync. This is all great, but I'm noticing that the values I set (even when absolute as opposed to += or -=) are not the actual values being used. For instance, if say I want the pulse to shrink down to 0.8 scale, it will shrink down anywhere from no shrink down to 0 scale depending on exactly where it intersects the appear timeline. The results also differ based upon load times for the page... if one timeline was bumped a bit, the values for the next one overlapping it are different. This is not what I want. I want it to exactly shrink and grow under all circumstances from the absolute values I've set. I understand this will mean some nasty jumps if the interval overlap timing isn't correct, but I can work to dial that in. If I say shrink down to 0.8 and loop, for instance, it should always oscillate between 1 and 0.8 regardless of where the previous timeline had it when they overlapped. I'm not sure what this sort of interpretation is called, but I vaguely remember stumbling across it once in the documentation. Any pointers as to how to alter this behavior?
  24. I wonder how to skip resp. merge tweenTo() event when triggered multiple times. Let me give an example first of all to illustrate my purpose: http://jsfiddle.net/vvweosts/1/ For now every single animation finalizes seperate each time when the button is triggered multiple times before given tweenmax is complete. But i would like to some kind of merge all triggered tweenTo() to one single animation. One tweenMax has a duration of 2sec that scale for 0.1. When i trigger the button 4 times immediately consecutively i would like the animation to end at scale(0.4) with a duration of about 2sec. Thank you in advance
  25. Hi All, I have created a timeline which triggers an animation of a few lines of text and a couple of images. I heavily simplified the code to keep it simple in my Codepen example. My problem is that when I click to re-trigger the animation whilst it is already animating, the animation starts behaving in a way that I would not expect it to. Some of the text and/or images fade out or stop loading. I'm two months into Javascript and GSAP so I'm sure it's down to my logic. I just cannot work out how to stop this happening. Help will be very much appreciated. Thanks for your time. Steven