Search the Community
Showing results for tags 'timeline'.
-
I'm doing work on kiosk applications that have content that needs to change on a schedule. Think breakfast in the morning, lunch around noon, and after 5 dinner. We use GSAP on a bunch of other pieces and part of me wondered if there would be considerable issues with having a timeline run all day. I figure we use .addCallback() to fire a function at whatever time we want. The only other way is to do a setInterval() and have it check for registered callbacks in a time frame, both seem like they could have memory issues but the GSAP has a much nicer API...
-
This may be more of a feature request, but I'd like to be able to remove items (TimelineMax.remove()) and insert new items (TimelineMax.add()) by position. So if I have a TimelineMax that contains 5 TimelineLite animations, and I want to update the third TimelineLite assuming a zero index: TimelineMax.removebyposition(2); TimelineMax.addbyposition(myNewTimelineLite,2); Looking at the documentation I can't find a way to do this. I was just wondering if anybody here had any insight in to if this was possible or a planned feature? Thank you! Dan
-
Hi, This codepen works in IE but not Chrome or Firefox. Basically its the same setup as i have in Lectora. Lectora autogenerates html and css, so i cannot change much in the structure of the html. The javascript however i can change to whatever needed to get this working. Doublechecked with some other projects done, and noticed that indeed IE works while Firefox and Chrome have problems with tweens for x/y, rotation, scale and the alike... Tested on: Windows 10, IE: 11.0.10240 FF: 41.0.1 Chrome: 45.0.2454.101 m Doing some searching in different codepens i find several pens that work alike. But all of them do create/append new text elements that then get transformed. A workaround i might give a try. But in my case i would prefer not to create new text and just animate like in IE on the existing texts. I hope anyone can help out. Kind regards, Math
-
Hi, Been trying to get this to work for a little while now, a bit stuck. CodePen: http://codepen.io/Dev-KP/pen/jbMWxy Basically the individual animations work: .add(aninIn(copy1, 20)) //.add(aninOut(copy1, 20)) When one of them is commented out the other will work perfectly, but having them both there seems to make them merge. I'm guessing it's something to do with the .set in the returned tiimelines? If I am not mistaken the nested timelines should play one after another? Or is this something for immediateRender? Cheers P
-
I have a sequence of functions (frame1(), frame2(), frame3(), etc.), that each return a timeline instance, which I then string together in a master timeline. All is good, for the most part, except that in the last frame(), I use .set() to move a div up by 35px in y. For some reason, that position change is happening when the master timeline first starts, as demonstrated in this pen: http://codepen.io/flysi3000/pen/epdmee/ So, in this example, the image should start out at y = 0, and then at at the end of the animation, be set to y = -35, then slide in. By the way, the image is clipped via the css clip-path property, and I am changing that clipping path's height to reveal more of the image in frame2(). Any idea why that's happening?
-
Hello everyone, I'm having a bit of trouble adding a series of nested timelines to a parent timeline for multiple iterations of a for loop. In short: For each iteration, I'm trying to add 3 nested timelines to a parent timeline -- and have nested TLs #2 and #3 play 0.5 seconds after nested TL #1. The code is part of a much larger scene, so I think it might be the most helpful to give the general structure ... let parentTL = new TimelineMax(), childTL1, childTL2, childTL3, uniqueLabel; for (let i of sequences) { childTL1 = createChildTL1(); childTL2 = createChildTL2(); childTL3 = createChildTL3(); uniqueLabel = createUniqueLabel(); parentTL.add(childTL1, uniqueLabel); parentTL.add([childTL2, childTL3], uniqueLabel + '+=' + '0.5'); } For some reason that I can't figure out, the parent timeline only plays the child timelines from the first iteration of the loop -- and then it stops. If, instead, I write this within the for loop... parentTL.add([childTL1, childTL2, childTL3]); ... all child timelines will execute, for every iteration -- but of course, they'll do so all at once on every iteration, and I can't achieve the proper offsetting that I was originally going for. I could certainly post my fuller source code if it helps, but I'm thinking that with this pattern alone, I'm overlooking something simple with regards to the Art of Positioning... something that's causing the follow-up timelines to be lost after that first iteration.
-
Hi, Wondering if it's possible to add children to a nested timeline and have them affect previously added children. Please see the codepen sample for a better explanation: http://codepen.io/brancusi/pen/BoKopg Thanks
-
I've got a great SVG animation almost ready to share but need some last round tips. My code has been refined plus the integration of pointers Blake gave me in a previous thread, but it seems I'm having difficulty pausing the orbs when they reach the end of their individual bézier paths (i.e. x: 0, y: 0). Any advice? When each brain wave signal fires from the orbs the wave should be firing when x is 0 and y is 0 just to repeat myself if I wasn't clear. Thanks!
-
Trying to create a floating orb effect where each orb bubbles in and then sends a transmission to the child's brain. Each orb will send a transmission at different times, but avoid being close w/one another in terms of the actual transmission sequence. At some point during the entire animation the orbs that send the signal in diff. intervals eventually sync up. What would be the best way to control the transmissions from overlapping one another? BTW it is required that each orb float all the time even when another adjacent orb is transmitting.
-
Hi . This is my first time using GSAP. For a pretty simple task, in theory. I' using two timelines, with 2 phases. In each timeline, I animate the width. In the first phase, with a time «stime», While the first timeline is decreasing his width, the second, grows. In the second phase, with a time «btime», the first timeline increases his width, while the second, decreases. Well, there are two timelines, where they first grow in a direction, and later, they grow in the opposite direction, changing the time. I have a pair of buttons, «+» and «-», where we can change the time used in each phase. The time of a phase only can be change when the animation is paused in that phase. If you pause the animation in phase 2 and try to change values of phase 1, it will be ignored. When you are in the correct phase and the time is changed, the animation is seeked to an initial position fixed for that phase. For this, I declared 2 labels, «work», and «rest», that represents each phase (this is for a Pomodoro timer, that's is the reason of that names). Well, my problem is that this works with phase 2 («rest»), but won't with phase 1 («work»). I have tried with «seek», «tweenTo», even «set» and «restart». Anything appears to work. It get stuck in the position where it was when I hit the button, and starts from there in every new loop pass. I think that the problem is that time for label «work» is set to 0. Because I want to move at first position. I know that this should work, because I check other pens in the site and changed label to zero, and all work. But I don't know. I have made a codepen with a «simplified» version, that shows my problem. Any help will be welcomed. Edit: I just saw again the title and thought it wasn't pretty accurate, but it seems that I can't change it now.
-
$(".iSmall, .shrink").on("click", function() { if (circle.reversed()) { circle.play(); } else { circle.reverse(); } }); Regarding above ^ Where and how do you add in a line to kill the hover to start the click? The hover conflicts with the timeline... It seems this would be a very common issue since a majority of clickable links have hover effects, but I have found less material on this on the web than the career of Milli Vanilli. Maybe not that many links are actually the element that is animated. Also, I think it must be done differently with tweens and timelines because even the few examples I have found (to unbind the hover state on click) didn't work at all. So if you go to my codepen, there's a main vertical Nav with a link near the top with the text "Shrink." and there is a squashed looking mobile nav in the top left corner with the middle link reading, "SMALL - LG" They are both linked to the same timeline you will find in the js window. On the main Nav, the hover state conflicts because it happens to be the element that is going to be animated. On the little mobile Nav, there is no conflict because the link isn't in a timeline. Please Note that the animation is not working correctly on the Pen and things looked squished in general, but that shouldn't matter in answering - as I'm looking for a general answer on how this is done. I welcome any answers or input as I am new to jQuery, Greensock, and writing forums. . . also computers and electricity and reading/writing. LOL seems that way, Thanks in advance anybody who answers. -
So what I'm trying to achieve is fading in and scaling the first cat at the same time. The reason I can't just do: timeline.to(cats[1], 1, { opacity: 1, scale: 2 }); Is because I want to have independent nested timeline groups. Any ideas?
-
Hi, this is a pretty basic question... I'm still getting familiar with GSAP & code-based animation in general. I was just wondering, if I'm doing the same tween on a few elements (for example, if a couple things are fading in at the same time), is there any difference between doing this: tl.from("#copy4, #cta", 0.5, {autoAlpha:0}, "+=1.5"); or tl.from(["#copy4","#cta"], 0.5, {autoAlpha:0}, "+=1.5"); Both ways seem to work fine, but I wasn't sure if one is better/more standard than the other? I was doing it with an array at first, but then I realized that I could probably simplify things. Just wasn't sure if there was any reason why that might not be a good idea? Thanks for any insight! These forums are great.
-
HI there! I have some anchor elements that animate on hover ( image, overlay, two span texts ), all works fine, BUT, in the codepen you will notice that if you quick hover and out the elements the animation elements are not coordinated properly and the animation is not sequenced properly. Some time ago i used a solution that apply the timeline in "each" element and then the hover fires two functions, over and out, that plays and reverse the each animation, this method works perfect ( the animations remains consistent ) but i´m getting errors to implement it. This will be my definitive way to animate on hover elements independly Can anyone help me to find the solution? This is the code i have now "working": //box home is the container element $(".boxHome").hover(function(){ var imagen = $(this).find("img"); var overlay = $(this).find(".overlay"); var texto1 = $(this).find(".textoBox"); var texto2 = $(this).find(".textoBox2"); var tl = new TimelineLite(); tl.to(imagen, 2, { scale: 1.2, ease: Power4.easeOut}) .to(overlay, .4, { bottom: 0, ease:Power3.easeInOut},".3") .to(texto1, .4, { bottom: 65, autoAlpha: 1, ease:Power2.easeOut},".5") .to(texto2, .4, { bottom: 30, autoAlpha: 1, ease:Power2.easeOut},".7"); }, function(){ var imagen = $(this).find("img"); var overlay = $(this).find(".overlay"); var texto1 = $(this).find(".textoBox"); var texto2 = $(this).find(".textoBox2"); var tl = new TimelineLite(); tl.to(texto2, .4, {autoAlpha: 0, bottom: -60, ease:Power2.easeIn}) .to(texto1, .4, {autoAlpha: 0, bottom: -60, ease:Power2.easeInOut},".2") .to(overlay, .4, { bottom: "-100%", ease:Power3.easeInOut}, ".3") .to(imagen, .7, {scale: 1, ease:Power2.easeInOut},"0"); }); Thanks! Sebastián.
-
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
-
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
-
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?
-
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. -
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' );
-
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
