Search the Community
Showing results for tags 'Timeline'.
-
In this codepen example I have five buttons, and a timeline with five labels. When clicking on a button I want to move from the current location in the timeline, to the label corresponding to the button. In other words if you click on button 2, the animation should go from wherever it currently is to the point at label "two", so if it was previously at "one" the timeline should play forward from label "one" to "two", but if it was at position "three" it should play backwards from "three" to "two". How do I do this?
-
Hey guys, Been a lurker here for a few years, but never needed to ask a question until now, so thanks for anyone that can provide any info. Working on a little SVG chess animation, as you can see in the pen. I have the timeline set to repeat. On the initial playthrough, the elements all appear correctly and animate as I've coded them to. But on any subsequent plays, you'll see that some elements jump or appear differently. I'm assuming this has something to do with the transforms I'm applying to them. If so, is there a way for all of the elements to "reset" to how they start at the beginning of my timeline on the first play? Thanks, in advance.
-
Hi guys! Need your help! I need to connect the "Knob" and animation of numbers in Adobe Edge Animate, I did the dragged knob, and don't know how to do the rest ... Knob like this one greensock.com/draggable Change numbers with dragging like this greensock.com/timelinelite Add some scrins and Edge Animate files in attach files to better explain what I mean Thanks in advance for any help! Regards Misha. dc_power_supply_animate.zip
-
Hi, I'm jumping between pages with different timelines, it's all ok, till the moment i go back to the first page (to the point it was before left) using seek function. myTimeline.seek(lastposition); where lastposition it is the position before the page was changed. I can easily check the value of that variable, lastposition, and it is right, but the seek function doesn't really jumps to that position, but a bit before, like 0.3 sec aprox, depending on how many images needs to load till that lastposition. Even forcing the lastposition to 1, the seek function do not jumps there, but a bit before. Why this is happening?
-
So on this website, I use Timeline to set up and intro animation on the home page. When I host it, I'll set a cookie script so it'll only happen the first time you hit the home page, but for now, it's part of the problem. I have CSS statements and media queries interacting with my script and it just occurred to me that I have queries in my script for the different values and dimensions of the animations based on screen size. It's hard to explain, but as I'm new to GSAP, I cannot think for the life of me how to make them now conflict. I've attached the files needed. Any help would be greatly appreciated. Maybe you can see what I'm going for. Sorry if it's a cluster****. It's been a messier process than usual. website.zip
-
Is it possible to spool to a certain part in a timeline and play forward (or backward) from there? Like setting a flag and on init() calling a flag on that part of the animation (e.g. init("thirdPart"))? I ask this, because I need to debug and right now, I have to sit through the full animation to check the end. Would save a lot of time. Thanks, -Stefan
-
I currently have a problem with a "dirty" timeline. No matter what I do to it, I can not get it to play, even after clearing, etc. What properties should I inspect that might cause this timeline to refuse to play? It is not nested, and I have tried .clear() and .invalidate() as well as .startTime(0). In isolation, a fresh timeline works fine. I would like to know what properties I need to inspect to be able to identify the offending leftover data form previous use of this timeline, so I can learn more about how they work and how to clean one up. I am aware that I could simple throw it a way and use a new one, but ultimately I'd like to keep a record of all animations played on this timeline for later use to replay, etc. Thanks, Sven
-
I load a swf file in my application, and the swf have some tweens (TweenMax). The problem happens when I play and stop the object, like this: var swfloader:SWFLoader = SWFLoaderObject; //SWFLoaderObject is my swf loaded var tweens:Array = tweenMaxClass.getAllTweens(); for each(var tween:* in tweens) { tween.seek(0); //0 is example } swfloader.rawContent.gotoAndPlay(0); //0 is example The objects are out of sync, and can not correctly resume animations, either by stress processor or other problem. -
Hi, I'm having some troubles because the order of execution of callbacks and events seems different when I have nested timelines. I have reproduced a simple scenario: I have a timeline with a tween, then a call to a function that pauses the timeline, then another tween. Both tweens are "fromTo" with immediateRender = false. I have added also complete callback on the first tween and start callback on the second one in order to log them. The result is: - first tween completed - timeline paused The second tween is not starting and its start callback is not executed, as I would expect. Then, I take an identical timeline, and I nest it inside another one. In this case the result is: - first tween completed - run the callback that pauses the timeline - first frame of the second tween executed and its start callback executed - timeline actually paused So only nesting the same timeline, the behavior is different. Consider also that this happens also putting the pause action inside the complete callback of the first tween. The second tween starts in any case before the pause takes effect on the timeline. You can see it clearly in the codepen. Is there something wrong in my setup? Is there a way for having the same execution order in any nested or not nested scenario, except putting tweens and callbacks in slightly different positions? Thanks in advance
-
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? -
What is the best way to handle child timelines that have a infinite duration? You can't just `TimelineMax.add` an infinite child timeline because they would block and cause the remaining events to never run in the root timeline. The best way I have found is `restart`'ing the infinite child timeline in an `onStart` or `onComplete` event. One problem I have run into with this method is, if you seek past when the child timeline gets initiated, then it will never run. When using `start`, `stop`, `seek` on the root/parent timeline, how do you `start`, `stop` the child timeline appropriately? Here is a basic example of an infinitely spinning ball that also translates around on the root timeline: http://codepen.io/anon/pen/vOpBEV let tl = new TimelineMax(); let ballNode = $('.ball'); // Set up the infinite rotating timeline let alwaysRotateTl = new TimelineMax({ repeat: -1, paused: true }); alwaysRotateTl .fromTo( ballNode, 2, { rotation: 0 }, { rotation: 360, ease: Linear.easeNone } ); // Now do some stuff on the main timeline tl .addLabel('red-label') .set( ballNode, { backgroundColor: '#ff0000' }, 0 ) .to( ballNode, 2, { x: 100, backgroundColor: '#00ff00', onComplete: function() { // Start the infinite rotate loop alwaysRotateTl.restart(); } }, 'green-label' ) .to( ballNode, 2, { y: 100, backgroundColor: '#00ffff' }, 'cyan-label' );
-
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 -
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];
-
I have an animation that is supposed to start the element off at a particular possession view .set(), and then animated it to a new position via .to(). Currently, if I reload the page many times, perhaps 1 out of 7 times the item starts from x=0, y=0 instead of the values to which I have set it. The element starts out with display: none by default. I tried (in pseudo code): A) .set({x:1400, y:700, display: block, immediateRender: true}) .to({x: 1000, y: 600}) .set({x:1400, y:700, immediateRender: true}) .set({display: block}) .to({x: 1000, y: 600}) This is part of a larger animation system and very hard to extract a minimal case. But there is no code that should interfere with GSAP. The strange thing is, it seems to be a timing issue. And if the CPU is busy it seems to be more likely to happen. Are you doing some internal optimizations that stop the .set() command from getting executed all at the same time? It seems as if the display:block is executed before the updates to the x and y positions. hanks fro any help you may be able to give.
-
Hi everyone ! Hope you are fine. My question will follow in a few line, but let me introduce my problem with an image : Well, I want to creat a sequence of images. Image 1 has to take image 2 place, image 2 -> image 3, image 3 -> image 4 and image 4 has to take image 1 place. And here is the problem : 4 container that have to be resize. I have no ideas about how to do it. Because it be an infinite sequence with maybe 5s delay between each. Have I to show the risizing and object moving ? But how to make a good transition then. Do I make a shadow on whole images and when the shadow is gone show new establishment ? The only idea I have right now is to pre dev the whole comportment with a time line : img1 -> resize height img2 -> resize width img1 -> move to img2 img4 -> move to img1 and resize img3 -> move to img 4 img2 -> move to img 3 etc And doing it for all possible positions with a repeat (-1). Do you guys have some ideas about ? I thank you in advance.
-
Hi, I'm really new to all this and this is my second post. I'm trying to do something I thought was simple, but something does not work. I have two div (#red and #blue) and two buttons (#opacity1 and #opacity2), clicking the first button will increase the opacity of the first div while decreasing the opacity of the second div and vice versa. The code I'm using doesn't seems to work, can someone help? Thanks UPDATE: There's an error in the code, sorry!!! .to("#blue", 0.1, { opcity: "+=0.1" }, "0"); should be .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); (opacity instead of opcity) and now seems to works. Anyway, am I doing this correctly? or there is a better way? Thanks. $('#opacity1').click(function() { var tl1 = new TimelineMax(); tl1.to("#red", 0.1, {opacity: "-=0.1" }, "0") .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); }); $('#opacity2').click(function() { var tl2 = new TimelineMax(); tl2.to("#red", 0.1, {opacity: "+=0.1" }, "0") .to("#blue", 0.1, { opacity: "-=0.1" }, "0"); });
-
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
-
Hi all, I discovered GSAP over the weekend while trying to complete an animation project. It's supper impressive. I've read the docs over and over and over but I just think I'm missing something or I'm approaching the problem the wrong way. My goal is to create a rotating Nav. Four block arranged in a circle. Click on a block and they all rotate left until clicked box is at the top. Conceptually simple and I found a nice tutorial on the circle animation in an old forum post for an AS3 code chunk. So I've created my bezier path and I've create a separate tween for each "button". I use a TweenMax.fromTo progress chunks to offset each button around the curve in my timeline. I've added Labels at each quarter. I just can't figure out how to control the click events on the objects so that the rotate from one label to another correctly. I tried creating a secondary timeline with tweenFromTo chunks to control the first and that failed. I'm just not sure If I've approached this the right way. PS. Also you may see that occasionally one of my object will break off from the Bezier and jump to 0,0. If i look at the values being added in the browser(chrome) I see that the other buttons have a 3D transform on them but the broken one has a transform: matrix(1, 0, 0, 1, 0, 0);. What did I do wrong? I appreciate any advise you can provide. A few days Ago I didn't think I'd be able to do this at all. Today I feel like I'm on the edge of success thanks to GSAP. Greg
-
Hey guys, I'm not too sure if I've simply been staring at this too long or if I'm just having one of those off days where simple math decides it's gonna kick my teeth in. I'm trying to animate the stroke-dasharray of an svg path with multiple dashes "chasing" one another through the path --similar to christmas lights that chase one another in a sequence. I've roughly figured out what I need to do here, but I can't seem to figure out a way to address a second and third dash to enter in. Basically, I need to start one, and then continuously check to see if the current dash(es) have animated far enough to start entering in the subsequent dash and similarly I think I'll need to check the same "offsets" when it reaches the end of the line. Anyone feel like taking a stab at a sane approach for this? If even just high level of how I might store some "mock" variables to watch in order to make the process easier, etc. As always any help is greatly appreciated! P.S. - A side note is I'm not sure why the ease isn't working on the "chase" (it's set to Bounce atm for ease of visually seeing if the ease is being picked up)
-
Hi, I'm trying to create a simple (generic) animation. I have a working POC but would like to know if there are any improvements that could be done that I'm not aware of (only started using greensock yesterday - awesome library!) At the moment I'm using two staggerX since I couldn't get a 'wait' period without it. Also I needed to use an onComplete handler since xxx.repeat(n).fromTo produced unexpected behaviour. Thanks -
Hi, Here my problem, I use a small semantic template engine (transparency) and I can't make my TimelineMax works on elements that being templated. I guess I done something wrong, but I don't manage to make work my "staggerTo(.MyClass)" that is into my timeline and don't find any fonction to reload the selector or something like that. I give you a codepen of the problem. If any of you have sugestions Allan
-
So i've watched the GSAP intro videos; they're great. I mean they're so good they made me think I'd be able to use this library straight away. However I am new to coding and web design and while GSAP allows me to do things i'd never be able to imagine doing on the web I'm struggling to control the outcomes. In my codepen I'm trying to use the mouse hover events to initiate a simple tweenmax animation. I want the user to interact the pouring motion by just a mouseover but once the mouse leaves the bounds of the image it would go back to the starting position. I think my js coding is messy and not the best way to achieve this, and I think the revert or restart() functions might be what I should be doing, but i'm not sure on syntax or design. TL;DR. How can I use the timeline feature to revert the tween back to it's starting state upon the jquery mouseleave event?
-
This is a beginner question—I'm just getting in to this—I notice that stagger methods seem to be for staggered application of a tween, as opposed to being able to stagger a timeline. This pen is the only way I could think of, to stagger the application of a timeline animation. In this case, it's applied to 100 red boxes, but I'm not sure if it's the best way of doing it, in terms of memory etc. since it results in the creation of 100 TimelineLite instances... is there a more performant or concise way of doing it?
