Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timeline'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. I have an issue in Firefox. The timelines are not playing. If you click on 'Start X-Ray/Calibration' and 'Select Start' and any of the steps below, a timeline should play. It works great in Chrome and IE, not Firefox. I am using SVGs (mainly for positioning and scaling) and basically just showing and hiding elements within SVGs. An example of the code in question is: TweenLite.to('#glow1, #glow2, #glow3, #startBtn2, #okayBtn1, #okayBtn2, #stopBtn, #calibrate, #yesBtn, #operatorBtn1, #barHighlight', 0, {autoAlpha:0}); var popover1 = new TimelineMax({paused: true}); popover1.fromTo('#glow1', .3, {autoAlpha:0}, {autoAlpha:1}) .fromTo('#glow1', .2, {autoAlpha:1}, {autoAlpha:.3}) .fromTo('#glow1', .2, {autoAlpha:.3}, {autoAlpha:1}) .to('#glow1', .2, {autoAlpha:0}) .to('#baseImage1', 0.4, {autoAlpha: 0.3}) .fromTo('.col-9', .4, {background:'rgba(180, 180, 180, 0.0)'}, {background:'rgba(180, 180, 180, 1.0)'}) .fromTo('#popover1', .8, {autoAlpha:.15, scale: 0.08, x: 679, y: 174}, {autoAlpha:1, scale: 1, x: 0, y: 0}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}); $("#overlay20Link, #dotNav2 .page20").click(function(){ TweenLite.to('#popover2, #popover3, #popover4, #popover5, #popover6, #popover7, #popover8', 0, {autoAlpha:0}); popover1.restart(); yes.pause(); calibrate.pause(); popover2.pause(); popover3.pause(); okay2.pause(); }); Other GSAP animations run fine on the same page, it's just these timelines triggered with restart(); that are not working... navigation.js also contains GSAP code for global controls... Any suggestions? Thanks in advance!
  2. 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
  3. 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?
  4. 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
  5. 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.
  6. 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!
  7. 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.
  8. 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.
  9. $(".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.
  10. 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?
  11. 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.
  12. 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?
  13. 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.
  14. 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
  15. 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?
  16. 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
  17. 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
  18. 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
  19. 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.
  20. Just started using GSAP and have built a grid using TimelineLite animations (see Codepen below). I'm keen for any comments on ways to improve as I'm pretty new to all this.
  21. 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
  22. 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?
  23. 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' );
  24. 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
  25. 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];
×