Search the Community

Hello, thanks in advance for replying. I am trying to change a Timeline.vars.css property on the fly (changing it on the onStart event). When I change it without navigating through the timeline (using play or seek) it works. The problem is when I use play('hide'). Although the onStart event gets called, I'm not being able to change the vars.css property. Here are samples of my code: function getAnimateOut () { tl = new TimelineLite({onStart: onHideFunctions, onStartParams: ["{self}"], onComplete: next}); // ... here I add some childs } onHideFunctions = function (tl) { var children = tl.getChildren(); $.each(children, function (index, child) { if (child.vars.marginLeft) child.vars.marginLeft = 675.5; if (child.vars.css && child.vars.css.marginLeft) child.vars.css.marginLeft = 675.5; console.log('============'); console.log(child.vars.css); console.log(child.vars.marginLeft); } From my point of view, what's happening is that css properties are inside child.vars.css when I do not use play('hide'), while css properties get into child.vars (i.e. child.vars.marginLeft) when I do use play('hide'). This is the console output for the console.logs: ============ (normal behavior, css property effectively gets changed) undefined 675.5 ============ (this is after I do play('hide'). Althought marginLeft property gets changed, it's not what happens on the element Object {clearProps: "all", marginLeft: 675.5} undefined ============ It's also worth mentioning that this tween is nested inside another: tween = new TimelineLite(); tween.add(getNavigationTween()) .add('show') .add(getAnimateIn(), 'show') .add('hide', '+=5') .add(getAnimateOut(), 'hide'); Seems like a strange behavior to me. Please let me know if I'm doing something wrong. Thank you.

I've been working with Timeline and divs of a 50% width to adjust for window resize. The problem I've encounters is that if you plan on reversing a timeline, it does not recognize that you have resized your divs. I didn't have a good way of showing this in code pen, but this is the site I'm working on: http://heroicdreams.com/test/#servicesportfolio The two divs that break are the colored backdrops. After it animates in, resize the window then click any link and you can see how it glitches from the beginning of the animation. It only remembers the previous div position, not the new resized one.

Hi there, I'm having issues trying to add pauses and next/prev buttons to control the animation. I added pauses in the Timeline using addPause(), and addCallback to change the value of next label but i'm confused and it doesn't work... Here's my simplified code: var nextLabel:String=""; var tl:TimelineMax= new TimelineMax(); tl.addLabel("step1"); tl.addCallback(setNext,"step1",["step2"]) tl.append( new TweenMax(my_MC,2,{alpha:1})); tl.append( new TweenMax(my_MC,1,{x:200})); tl.addPause(); tl.addLabel("step2") tl.addCallback(setNext,"step2",["step3"]) tl.append( new TweenMax(my_MC,2,{alpha:.5})); tl.append( new TweenMax(my_MC,1,{x:400})); tl.addPause(); tl.addLabel("step3") tl.append( new TweenMax(my_MC,2,{alpha:1})); tl.append( new TweenMax(my_MC,1,{y:200})); function setNext(t):void{ nextLabel=t; } my_NextButton.addEventListener(MouseEvent.CLICK,goToStep) function goToStep(e:MouseEvent):void{ tl.play(nextLabel) } I think i'm not doing things in the correct order. Any advices ? Thanks !

Hi Guys! I hope this post finds you well. I am writting because i am using timelinemax in order to create an animation that has 3 stops in between in which the user has the ability to either continue to the next point or go back. All my tweens are working well, and now is time to add the pauses. I thought about just adding them to the onComplete and calling it a day. Yet when reversing they were not firing... This made me find out about onReverseComplete which worked like a charm expect that when going backwards the onComplete was firing as well pausing my animation before it could even get started. After a second click on the back button, the animation started playing backwards correctly. Bceause of this effect, i decided to try adding a callback but to my surprise i ran into the same problem. Then i went to the docs and found information about the addPause function. Including this piece of text: "Remember, the virtual playhead moves to a new position on each tick (frame) of the core timing mechanism, so it is possible, for example for it to be at 0.99 and then the next render happens at 1.01, so if your callback was at exactly 1 second, the playhead would (in this example) move slightly past where you wanted to pause. Then, if you reverse(), it would run into that callback again and get paused almost immediately. However, if you use the addPause() method, it will calibrate things so that when the callback is hit, it'll move the playhead back to EXACTLY where it should be. Thus, if you reverse() it won't run into the same callback again." This is what is happening to me currently and thought this was the right fix. The problem now is that when i add the pauses this way: this.timeline.add( TweenMax.to(this.map.mapPoint,0.5,{frame:this.map.mapPoint.totalFrames, ease:Linear.easeNone}) ); this.timeline.add( TweenMax.from(this.map.line1,1,{scaleX:0, ease:Quint.easeInOut})); // this.timeline.add( TweenMax.to(this.map,1,{x:2286,y:-157, ease:Quint.easeInOut}) ); this.timeline.addPause() // this.timeline.add( TweenMax.to(this.map,15,{x:-57,y:778, ease:SlowMo.ease.config(0.9,0.3)}) ); The animations pauses correctly, but if i try to use resume() or play(). The animation doesnt move at all. Only works at this point if i call reverse() Any ideas what might be happening? thanks a ton alex

Hey guys, i'm trying to do something simple and that i've done before in a similar way, but for some reason it's not working on this project. I'm not sure where am i getting the syntax wrong. I just want to have a timeline to animate the rollover state for the button. Basically i'm going to have an animation for the <a> itself and another one for the span that is inside the <a>. does anybody see the error? http://codepen.io/anon/pen/gAolh Cheers, Thales

Hi there, i'm trying to do a basic animation for a button and it's not working when i put my code on my website. Here's the CodePen page(it works here): http://codepen.io/anon/pen/KnfLk When i drop that code in my website i get this: Nothing happens basically, and even the console.info doesn't work.

Hi - In a banner I'm working on, I have a secondary timeline which controls an object sliding up and down on my screen. The secondary timeline works properly, but I'd also like to be able to pause the main timeline when the secondary object slides up on the screen, and then resume playback of the main timeline once my object slides out of view. Here's my current code: <script> var tl = new TimelineLite(); tl.add( TweenLite.to("#studyDescription", 1, {top:20})); tl.to("bgMask", .5, {autoAlpha:1}); tl.pause(); var button = document.getElementById("openButton"); button.onclick = slideStudyUp; if (button.captureEvents) button.captureEvents(Event.CLICK); function slideStudyUp(){ tl.play(); } var closeButton = document.getElementById("closeButton"); closeButton.onclick = slideStudyDown; if (closeButton.captureEvents) closeButton.captureEvents(Event.CLICK); function slideStudyDown(){ tl.reverse(); } </script> I'm pretty sure that I just need to add something like "main timeline.pause()" to my slideStudyUp function, and "main timeline.play()" to my slideStudyDown function - but what's the correct way to reference the main timeline? Thanks!

Hello everybody, so far I am loving this plugin it is a great tool and this site is a great resource and I appreciate all the work that has been done in delivering such a great tool. I have a timeline that I created. The timline is not really that important. Just in case though: var tweenArticle = new TimelineMax() .from($('header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0) .from($('article.food > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0); This is the site I am trying to put it on: http://webshowcase.tk/wp1/?page_id=114 This is a wordpress site and what I am trying to do is affect every post on the page. When The article is in the viewport I would like to start animating just the elements in that article and if possible reverse but reverse is not super important at the moment. I can't seem to figure out how to get my timeline to play when the article is in the viewport. Any help would be greatly appreciated. Thank you.

I like to set pause on my timeline to help debug certain state. `timeline.addPause(1.3)` The issue is when I use `timeline.tweenTo(1.5)`, it skips the pauses.

Currently I can't find anything in the documentation to register a function to be called each time the playhead change. You can listen to `onUpdate`, but this function doesn't trigger when you `timeline.seek(2)` to a position. Any solution to be notified by every changed to the playhead without adding tons of timeline callbacks?

Greetings, I have been at this for a couple of hours now to no avail. I am trying to append some tweens to a timeline and use negative delays to offset them (they are the same animation otherwise). My problem is that the timeline is waiting each to finish before restarting, which is what I do not want Here's a link to what I have so far http://codepen.io/Zeaklous/pen/sGbku and my code: var timeline = new TimelineMax({repeat:-1}), electrons = document.querySelectorAll('.electron'), paths = document.querySelectorAll('.path'), atom = document.querySelectorAll('#atom'), startDuration = 2; for(var i = 0; i < electrons.length; i++) { var myDelay = -(i * 0.5); orbit(electrons[i], paths[i], myDelay); } function orbit(electron, path, delay) { var e = TweenLite.to(electron, startDuration, {rotationY:'-360', ease:Linear.easeNone, onComplete: function(){ //e.restart(); }, delay:delay }); //timeline.append(e); var p = TweenLite.to(path, startDuration, {rotationZ:'360', ease:Linear.easeNone, onComplete: function(){ //p.restart(); }, delay:delay }); //timeline.append(p); // The following line doesn't seem to add a negative offset... timeline.insertMultiple([e, p], 0, TweenAlign.START, -0.5); } atom.onmouseover = function() { timeline.timeScale(.2); } function TweenAlign() { } If you look at the demo it runs correctly the first iteration (before it's added to the timeline) but fails the next times Can you guys help me get this looking the way I'd like it to? Thanks

hi, I have objects with different timelines, I create them dinamically from DOM animation containers id and cache the timelines so that I can use them later: var subBlock=function(blockId){ this.blockId=blockId; this.showTl=new TimelineMax({paused:true,smoothChildTiming:true, onComplete:thisInstance.shownCallback,onCompleteScope:thisInstance}); this.hideTl=new TimelineMax({paused:true,smoothChildTiming:true ,onComplete:thisInstance.hiddenCallback,onCompleteScope:thisInstance}); switch (blockId) { //each element has it's own in and out animations case "block_0_0": this.showTl.set('#'+blockId,{display:"block"}); this.showTl.fromTo('#e_0_0_display',1,{opacity:0},{opacity:1}); this.hideTl.to('#e_0_0_display',1,{ opacity:0}); this.hideTl.set('#'+blockId,{display:"none"}); break; } }; Then I want to switch from a content to the other chaining the hide animation of the first and show animation of the new one. I do this creating a TimelineMax and appending the cached timelines to it, but there is something not working, it plays just once. If I call the single timelines play() they work. changeSubBlock:function(subIndex){ //object with show timeline var subBlock=appDisplay.subBlocks[appDisplay.selectedIndex][subIndex]; //object with hide timeline var oldSubBlock=appDisplay.subBlocks[appDisplay.selectedIndex][appDisplay.selectedSubIndex]; //update status appDisplay.selectedSubIndex=subIndex; //this works /* oldSubBlock.hideTl.play(0); subBlock.showTl.play(0); */ //this doesn not work var ntl=new TimelineMax({paused:true}); ntl.append(oldSubBlock.hideTl); ntl.append(subBlock.showTl); ntl.play(); } what can be wrong?

Hi Guys, The Timelines and delayedCalls method seems to forget time if they are paused when using the visibility API, when a tab loses visibility i'm setting the tween's timescale to 0 and pausing the audio. The audio play calls are trigger on a Timeline, I'm then using delayedCall to stop the audio after a certain duration. I have setup an example here http://jsfiddle.net/robaldred/nj9pY/ (requires sound& used fiddle because i needed to link multiple externals and don't have pen pro) On load, sound will play through nicely. All timelines and delayed calls work as expected. However if you switch to another tab for 30 seconds or so at some point during a playing clip. When when you return to the tab it really screws up the timeline and the delayedCall, it's like the play head jumps forward when setting timeScale back to 1. This only appears to happen when using visibility API callbacks. Something to do with RAF not being called when a tab is hidden? Any thoughts? Appreciate your time. Rob

Problem Solved.. Use eventCallback method.

Example: http://mailinator.com/index.jsp The background is a static blue and the cloud image found here: http://mailinator.com/assets/img/clouds-s.png , just subtracts along the x-axis. How would you duplicate this action in a timeline? I think I get the x:-1 and repeat:-1 part; I'm just not sure how you would reset the image so a small image can loop on forever? Any help would be greatly appreciated. Thanks.

Hi, first post. Hope i haven't overlooked something obvious. I have a series of 'cards' (divs w/ front and back) that look similar to this pen: http://codepen.io/GreenSock/pen/yzahJ except the flips all happen on a timeline instead of on hover. what we want is, in the middle of the timeline (which sequentially flips 8 cards), we want to be able to have a user hover, and stop that one card from flipping, and change its opacity. right now, all 8 cards are run together on one single timeline (b/c we need tight control of timing), so i don't know if i need put them onto their own timelines or something. Any pointers or clues would be much appreciated on how i could allow the single hovered card to drop out of the timeline and change its opacity, while still allowing the other cards to keep their animation/flipping happening. Thanks! m

How can you put timeline into two different timelines and then have ability to play it separate as well as play "container" timelines? To clear what I meaning, here is an example of 4 timelines: 2 simple, 2 combined (also interactive example available on jsFiddle): var moveRight = new TimelineMax({paused: true}) .fromTo(box, 1, {x: 0}, {x: 300}); var moveLeft = new TimelineMax({paused: true}) .fromTo(box, 1, {x: 300}, {x: 0}); var moveRightLeft = new TimelineMax({paused: true}) .add(moveRight.play()) // call `play` because timeline paused .add(moveLeft.play()); var moveLeftRight = new TimelineMax({paused: true}) .add(moveLeft.play()) .add(moveRight.play()); In this example, when we'll try to play each timeline, only last one (moveLeftRight) will work. Why is it so? Can we somehow play any timeline? This question also posted on Stackoverflow

Is there a way to clone timeline, so you'll be able to change it without causing original timeline? // Original timeline var moveRight = new TimelineMax().fromTo(el, 1, {x: 0}, {x: 100}); // Child timeline, wich works like original var moveFarRight = moveRight.clone(); moveFarRight.to(el, 1, {x: 200}); moveRight.pause(); // moveFarRight didn't paused, so it will play It's a little bit looks like classes and inheritence in OOP: basic timeline, child timeline.

Hey all, I'm currently playing with the timeline and setting up a sequence of animations. So far i've used tl.to in my sequencing and all went good. I then wanted to implement .fromTo however that seemed to mess up my timeline. My objective is fairly simple, summarized in the following steps. 1. I do some initial CSS tweening 2. I fade up some text 3. I tween my div to the outer right 4. I change up some text 5. ISSUE: I now want to re-position my div to the outer left and tween it into center again. Ive set up an illustrative codepen example here: http://codepen.io/mrsgs/pen/IeLrF Note: uncomment line 15 to see the issue apply

Hey Guys, I am still new to GSAP animation, and i need some help. I am implementing a timeline using greesock js which handles a presentation of different SVG images mainly made up of simple lines, circles and paths. What is want to achieve is the animation of these SVGs while to timeline is being moved. As far as the timeline implementation goes, all is well. But when it comes to animating the svg the way i want i am reaching a road block. I can animate the scaling, width and opacity with no problems. The code is as such: TimeLine.from($('#Shape2 polygon'), 2, { scale: 0, onStart: function () { //Dont mind the variables mainTimeline.timeScale(NormalTimeScale); } }, timeShift) What i want to achieve is the drawing effect of the lines circles etc... As the user moved the timeline scroll bar, the vector graphics should be drawn and of course the reverse effect should be obvious. I am mainly trying to achieve this with stroke-dashoffset and stroke-dasharray but i cannot alter these properties even after i included the AttrPlugin. This is what i am trying: Timeline.from($('#Shape2 line'), 1, { atrr: { 'stroke-dasharray': '20px' }}, timeShift + 1) Please note that these are just example blocks of code. Can you guys help me with this please?

I have a separate stepped animation that I am using on the onComplete of the TweenMax animations and it works great everywhere except the first 5 animations. Here is the code excerpt. The last onComplete will fire causing all previous onComplete's to fire. function treeanimation(treeFrame){ bgPos = treeFrame*211; $("#plant").css('background-position', '0px -'+bgPos+'px'); } var controller = $.superscrollorama({}) controller.pin($('#slides'), aniDur,{ anim: (new TimelineLite()) .append([ TweenMax.to($('#slide1-bg'), .5, {css: { top:"100%" }, onComplete: function(){ treeanimation(1); }, onReverseComplete: function() { treeanimation(0); } } ), TweenMax.to($('#slide1-content'), .5, {css: { top:"-50%", display: "none" }, onComplete: function(){ treeanimation(2); }, onReverseComplete: function() { treeanimation(1); } } ), TweenMax.to($('#slide1-body'), .5, {css: { display:"none" }, onComplete: function(){ treeanimation(3); }, onReverseComplete: function() { treeanimation(2); } } ), TweenMax.to($('#slide2-content'), .5, {css: { marginTop:"20%" }, onComplete: function(){ treeanimation(4); }, onReverseComplete: function() { treeanimation(3); } } ), TweenMax.to($('#slide2'), .5, {css: { top:"0" }, onComplete: function(){ $("#slide2-nav").html('<img src="img/active-btn.png" alt="Slide 2">') $("#slide2-nav").parent().addClass('active') treeanimation(5); }, onReverseComplete: function(){ $("#slide2-nav").html('<img src="img/inactiv-btn.png" alt="Slide 2">') $("#slide2-nav").parent().removeClass('active') treeanimation(4); } } ) ]) .append([ TweenMax.to($('#slide2'), .5, {css: { right:"-100%" }, onComplete: function(){ treeanimation(6); }, onReverseComplete: function() { treeanimation(5); } } ), TweenMax.to($('#slide2-content'), .5, {css: { marginLeft:"-90%", display: "none" }, onComplete: function(){ treeanimation(7); }, onReverseComplete: function() { treeanimation(6); } } ), TweenMax.to($('#slide3'), .5, {css: { left: "0%" }, onComplete: function(){ $("#slide2-nav").html('<img src="img/inactiv-btn.png" alt="Slide 2">') $("#slide3-nav").html('<img src="img/active-btn.png" alt="Slide 3">') $("#slide3-nav").parent().addClass('active') $("#slide2-nav").parent().removeClass('active') treeanimation(8); }, onReverseComplete: function(){ $("#slide3-nav").html('<img src="img/inactiv-btn.png" alt="Slide 3">') $("#slide2-nav").html('<img src="img/active-btn.png" alt="Slide 2">') $("#slide3-nav").parent().removeClass('active') $("#slide2-nav").parent().addClass('active') treeanimation(7); } } ), TweenMax.to($('#slide3-content'), 0.5, {css: { marginLeft: "10%" }, startAt: {css: { marginLeft: "110%" } }, onComplete: function(){ treeanimation(9); }, onReverseComplete: function() { treeanimation(8); } } ), ]) Any Help would be greatly appreciated. This is integrated with SuperScrollerama

Hi, I am trying to create a timeline that contains an ending pause of x seconds: now I can add a delay between tweens, a delay before a specific tween, but... how do I set a delay before onComplete is triggered? I could add a dummy tween at the end of the timeline, with a delay, but it look ugly to me. Am I missing the specific trick? Thanks

Hi, I have been struggeling figuring out a simple slideshow using next and previous buttons. Currently I have a slideShow container with 4 movieclips arrranged next to one another. Essentially what I would like is have the slideshow cycle through the 4 slides in the slideshow container and have a next and previous button executable at anytime, but I have no idea on how to accomplish this. This is what I have at the moment: import com.greensock.*; import com.greensock.easing.*; var timeline:TimelineLite = new TimelineLite(); timeline.append( new TweenLite(slideShow, 0.5, {x:"0"}) ); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-280"})); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-260"})); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-260"})); Any help is highly appreciated! Thanks, Dada

Hey all, I currently have a header with some repeating background pattern. What im looking to do is make this repeating background pattern move towards right and bottom from a point of position: absolute; - in the same speed and in an infinite loop. You can see a dummy here - hope it somewhat illustrates what im looking to do: http://codepen.io/anon/pen/oapnB Initially my idea was to have it move in one direction first for like 10secs and then change to another direction - as the codepen illustrates. However lets just keep it simple: - Would anyone be able to tell me if im able to move my background pattern infinite in one direction? Right now I offset the background outside of the screen, so that I have some extra background to actually move around without it ending - im not sure how to adress that for an infinite solution - perhaps some resetting needs to be done? But in that case im not even sure how to do that so it looks in sync.

How do you clear a timeline every time you perform a mouseover and mouseout function? Here is my code: http://codepen.io/vincentccw/pen/paslB My problem now is that the animation will build up within the variable and causing some weird behaviours when I perform more than one hover....