Search the Community
Showing results for tags 'timeline'.
-
I'm trying to ease an element that is being translated to the left by a percentage amount. Easing doesn't seem nearly as effective as when I'm translating by a pixel amount. Any ideas on what I should do?
- 2 replies
-
- ease
- percentage
-
(and 3 more)
Tagged with:
-
Note: TimelineLite has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineLite). We highly recommend using the gsap.timeline() object instead. While GSAP 3 is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time. build sequences easily by adding tweens with methods like to(), from(), staggerFrom(), add(), and more. tweens can overlap as much as you want and you have complete control over where they get placed on the timeline. add labels, play(), stop(), seek(), restart(), and even reverse() smoothly anytime. nest timelines within timelines as deeply as you want. set the progress of the timeline using its progress() method. For example, to skip to the halfway point, set myTimeline.progress(0.5); tween the time() or progress() values to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the timeline. speed up or slow down the entire timeline using timeScale(). You can even tween this property to gradually speed up or slow down. add onComplete, onStart, onUpdate, and/or onReverseComplete callbacks using the constructor’s vars object. use the powerful add() method to add labels, callbacks, tweens and timelines to a timeline. base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well. kill the tweens of a particular object with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren() If you need even more features like, repeat(), repeatDelay(), yoyo(), currentLabel(), getLabelsArray(), getLabelAfter(), getLabelBefore(), getActive(), tweenTo() and more, check out TimelineMax which extends TimelineLite. Sample Code //instantiate a TimelineLite var tl = new TimelineLite(); //add a from() tween at the beginning of the timline tl.from(head, 0.5, {left:100, opacity:0}); //add another tween immediately after tl.from(subhead, 0.5, {left:-100, opacity:0}); //use position parameter "+=0.5" to schedule next tween 0.5 seconds after previous tweens end tl.from(feature, 0.5, {scale:.5, autoAlpha:0}, "+=0.5"); //use position parameter "-=0.5" to schedule next tween 0.25 seconds before previous tweens end. //great for overlapping tl.from(description, 0.5, {left:100, autoAlpha:0}, "-=0.25"); //add a label 0.5 seconds later to mark the placement of the next tween tl.add("stagger", "+=0.5") //to jump to this label use: tl.play("stagger"); //stagger the animation of all icons with 0.1s between each tween's start time //this tween is added tl.staggerFrom(icons, 0.2, {scale:0, autoAlpha:0}, 0.1, "stagger"); Demo See the Pen TimelineLite Control : new GS.com by GreenSock (@GreenSock) on CodePen. Watch The video below will walk you through the types of problems TimelineLite solves and illustrate the flexibility and power of our core sequencing tool. Learn more in the TimelineLite docs. For even more sequencing power and control take a look at TimelineMax.
- 1 comment
-
- not-displayed
- timelinelite
- (and 9 more)
-
Is it possible for GSAP to do what I think. Because my idea is to let the Timeline go to a specific child (tweens inside/added to a timeline) and when that tween is finished animating, it will pause. Here's the code sample: HTML <div class="book"> <div class="last page"></div> <div class="page one"></div> ... <div class="cover page"></div> </div> <div id="prevPage"></div> <div id="nextPage"></div> JAVASCRIPT var book_timeline = new TimelineMax({ paused: true }) /* tween children */ .to('.page.cover', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.one', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.two', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.last', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }); $('#nextPage').click(function(){ // code that animates only one (next page) tween inside a timeline then pause book_timeline.play(); }); $('#prevPage').click(function(){ book_timeline.reverse(); }); I want to use GSAP to make my own book flipping div's
- 4 replies
-
- timeline
- play to and pause
- (and 6 more)
-
I saw this paneling demo from somebody and for an upcoming project I would like to use this. The demo I saw can be found here: http://codepen.io/grayghostvisuals/pen/enxAp I was wondering if it is possible to make an anchor navigation to each one of the panels. I tried it fast but it seems that the offset gets broken from bringing each element to a 'top: 0%;'. Is there any way to achieve this some other way? Feel free to share your thoughts or ideas.
-
I've been digging around looking for the best way of inserting a pause or 'wait' into timeline. I found this thread here, (and I am also an experienced AS3 dev making the transition to Javascript) but it didn't work for me What's the best way of achieving this? var tl = new TimelineMax({delay:0.5, repeat:3, repeatDelay:2}); tl.add( TweenMax.staggerFrom(['#text1_dc','#main_img_dc','#sky_logo_dc'], 1, {autoAlpha:0}, 0.2) ); tl.add( "PAUSE OF 2 SECONDS WOULD GO HERE" ); tl.add( TweenMax.from('#img_skybox_dc', 0.5, {autoAlpha:0}) );
-
As I know GSAP can't handle percentage values for x and y. Percentage values can help us to make relative animations (relative to the element's width or height) combined with responsive design. Here is a codepen which shows the problem: http://codepen.io/anon/pen/fszAh Steps: Load the codepen click on the red box watch the animation, it moves horizontally 100% relative to the width of the current box Resize your window Click on the box again The tween doesn't get updated, so it moves horizontally with the old width Is there a way to "fix" this? I would like to prevent the browser from the recreation of the tweens and timelines every time the browser resizes.
-
Hi, I'm quite new to GSAP and I wonder what the easiest way to loop a timelineLite would be? I've managed to loop separate tweens inside the timeline but not the whole timeline. TIA!
-
hello, I am very new at tweenmax. I made my wheel spin. But I would like my wheel to spin 360 degrees left and after, spin 360 degrees right. and have a yoyo effect where it goes left right left right. var ferris = document.getElementById("ferris-wheel"); TweenMax.to(ferris, 1, { rotation:360, ease:Linear.easeNone } ); TweenMax.to(ferris, 20, { rotation:-360, ease:Linear.easeNone } ); how do i do this?
-
I've created a "Scrubber" component that's meant to control a TimelineLite instance. The timeline is passed to other components so that they can add tweens, timelines, etc. However, these may not be added synchronously. The problem, then, is that I have no way of updating my Scrubber when the duration of the timeline changes. On a related note, timelines only one of each callback type (onUpdate, etc.). Given these two issues (duration not observable, no "safe" event listener adding), is it not possible to bind a control to a timeline? Or is there just some trick that I'm not seeing? Any info about what people are doing to accomplish this, or links to anything the author's said about binding like this is much appreciated! Thanks!
-
HI all, Here is the free lightweight slider that I made for GSAP Timeline: https://github.com/igord/gsap-timeline-slider There are no external dependencies and you can change targeted timeline on the fly. I use it at http://runbanner.com/demos/ to allow visitors to preview demo banners. Check it out.
-
Hi I have a timeline which contains several tweens of a single dom element. Is it possible to draw a line along the tweens x,y coordinates in this timeline, and, if possible, have the line drawn as a curve? Thanks ! Elior
-
Hi guys, I can't seem to find a way to get the rotation value of a draggable tween which is placed on a timeline and then calling the seek() function to some mid-point on the timeline. I've created a simple code pen as an example: http://codepen.io/anon/pen/ijgDd - as you can see, the "alert" at the end of the script returns a value of 0 despite the fact that the tween is rotated. Any suggestion? Thanks ! Elior
-
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
-
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.
-
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 - 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.
-
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?
- 1 reply
-
- timeline
- timelinemax
-
(and 2 more)
Tagged with:
-
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
- 4 replies
-
- delayedcall
- timeline
-
(and 1 more)
Tagged with: