Jump to content
GreenSock

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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. 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?
  2. 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.
  3. 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....
  4. Hello, is there any method to add some "empty tape" at the end of a timeline. Something like delay at the end.
  5. Hi, I have created a tween to move an object from a point A to a point B with bezier trajectory: I have to dynamically calculate the starting and ending points, that will be percentages of the whole animation. How can I tell the tween to run from i.e. 23% to 78% of the whole animation (obviously in 78-23% of the total time)? I think I have to use progress property, but maybe I am doing something wrong, because it looks like the animation runs from 23 to 78% and then to 100%. I am doing like this: var timeLine: TimelineLite = new TimelineLite(); timeLine.fromTo(item, totalTime, { x: 0, y: 0 }, { bezier: { type:"thruBasic", values: [ { x: 300, y: 200 }, { x: 500, y: 800 } ] }, ease: Linear.easeNone } ); TweenLite.fromTo(timeLine, totalTime* (0.8 - 0.5), {progress: 0.5 }, {progress: 0.8, ease: Sine.easeOut } ); I have to learn a lot about timelines...
  6. Hi Everyone, Been using greensock for a couple of months now. I finally got us to upgrade to the newest version and some things are different. My issues is we have a main big timeline that our animation runs on. There are points in it when we pause the timeline and people need to click on stuff and other animations happens. After they click everything they need to we restart the main timeline. The click functions have their own timeline with tweens in them. Well on the newer version we are using, when we resume the main timeline it ignores the css/tweens that happen in the click timeline. It restarts like the clicks animations never happen. Before on the older version we used that didn't happen. I'm seeing if there is a way to have a main timeline and have it keep the css and animtaion end tween from click on resume of the main timeline. I hope this makes sense. Thanks.
  7. Hi There! I'm kinda new to this wonderful engine, but a veteran on AS. I'd like to know, how can I set a navigation system, so on a click it plays the timeline but stops when said so. Take a look at my code below. I have added the labels and I have a menu so when someone clicks "about" I'd like to start playing the timeline from where it is to the about point and then stop. Tried putting the tl.pause(); but it didn't work - the timeline passes through and keep playing till the end. Any help will be appreciated! var mainTL = new TimelineMax({paused:true, onUpdate:updateSlider}); var slideTL = new TimelineMax({repeat:0}); slideTL.to("#introArrow", 3, {top:140, right:30 , ease:Power3.easeOut}) ; mainTL .add("begin") .to("#introArrow", 1, {top:-100, autoAlpha:0, ease:Circ.easeIn}) .to("#diver", 2, {autoAlpha:1, scale:.2, rotation:"-180deg"}) .to("#diver", 3, {top:1300, ease:Back.easeIn}) .to("#diver", .1, {autoAlpha:0}) .to("#parachuteTop", 1, {scale:1, top:200, ease:Circ.easeOut}) .to("#parachuteTop", 1, {scale:.2, top:-179, left:-210, rotation:"0deg"}) .to("#background", 3, {top:-100, ease:Circ.easeOut},"-=3") .to("#parachuteText", 1, {top:137, left: 38, scale:.6, autoAlpha:1, ease:Back.easeIn}) .to("#zepelin", 1, {top:120, left:480, ease:Circ.easeOut}) .to(".introText", 1, {top:310, ease:Circ.easeOut},"-=.5") // Start sections / about .to("#introDive", 2, {top:-1000, ease:Power2.easeOut}) .to("#about", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-200, ease:Circ.easeOut},"-=2") .to(".I-about", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .add("about") // Services .to("#about", 2, {top:-1000, ease:Power2.easeOut}) .to("#services", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-300, ease:Circ.easeOut},"-=2") .to(".I-services", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .add("services") // Gallery .to("#services", 2, {top:-1000, ease:Power3.easeOut}) .to("#gallery", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-400, ease:Circ.easeOut},"-=2") .to(".I-gallery", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .add("gallery") // Contact .to("#gallery", 2, {top:-1000, ease:Power2.easeOut}) .to("#contact", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-500, ease:Circ.easeOut},"-=2") .to(".I-contact", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .to("#secondblock", 2, {top:420, ease:Circ.easeOut},"-=2") .add("contact") ;
  8. Hello i have a question, is possible add new tweens to a TimelineMax and reorder another on the fly (dynamically). Example: timeLine = new TimelineMax(); timeLine.add( TweenMax.to(".box1", 1, {left:100}) ).addLabel("box1"); timeLine.add( TweenMax.to(".box2", 1, {left:100}) ).addLabel("box2"); After in need add a new TweenMax after box1 but i need that box2 run after the box3 tween = TweenMax.to(".box3", 1, {left:100}); timeLine.add(tween, "box1"); timeLine.play(); RESULT: Currently the box2 and the box3 run at the same time. Another test, was get 'box2' tween and use UpdateTo() to add delay:1 but UpdateTo dont work with delays. Some idea?
  9. If I load the timeline code in the <head> and put play() in the <body>. The code "runs" but doesn't "display" animation on screen. By "display" I mean: no animation happens on the browser screen. By "runs" I mean: if I put a breakpoint on the .play() line in the <body>, I can step into the TweenMax code in the <head> and watch variable like "e", and "this._duration" assume the correct values as I step deeper into the code. I'm used to splitting things this way on the jQuery animate code I've been writing and must do so for compatibility. So why can't timelines be defined in the <head>? I'm assuming there must be a little "trick" I'm missing to make it work. Please see <body> only and split code below (and attached). With all code in the <body> this works no problem: <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> </head> <body> <div id="title">This is growing title</div> <script type="text/javascript"> var timeline = new TimelineMax({paused:true}); timeline.to("#title", 2, {color:"#F0F", fontSize:"48px"}); timeline.play(); console.log("yes it ran"); </script> </body> </html> With the timeline in the <head> and play() in the <body> this doesn't do anything on screen but the console.log()string shows in the console, you can step into the timeline code and there is no error break: <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script type="text/javascript"> var timeline = new TimelineMax({paused:true}); timeline.to("#title", 2, {color:"#0FF", fontSize:"48px"}); </script> </head> <body> <div id="title">This is growing title</div> <script type="text/javascript"> timeline.play(); console.log("yes it ran"); </script> </body> </html> [sorry I attached both twice, only download the first two!] simplest_timeline.html simplest_timeline_head.html simplest_timeline.html simplest_timeline_head.html
  10. Here is my full script: <script> $(document).ready(function() { var controller = $.superscrollorama(); //This code snippet is built on the parallax example: controller.addTween( '#gun', (new TimelineLite()) .append([ TweenMax.fromTo($('#hammer'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: -25}, ease:Quad.easeInOut}), TweenMax.fromTo($('#trigger'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: 40}, ease:Quad.easeInOut}) ]), 500, // scroll duration of tween 200); // offset? }); </script> What I need to know is... how can I add a tween to this timeline? I just need to know how to add tweens after the one I already have. Everything I have tried does not work.
  11. Hello all. I need a bit of help. I am trying to create the bullet proof timeline in JS. The AS example can be found below. Can someone help me get this started. I have tried but I am having issues with being able to jump to certain areas of the timeline. Thanks. http://www.snorkl.tv/2011/03/bullet-proof-timelinemax-transitions-part-1-jump-to-section/
  12. Hi, I'm creating an animation on the stage (a base class) made up of subclasses which return a TimelineLite for their animations. The problem seems to be that creating a timelineLite auto-plays the timeline that was created, rather than just being available for the parent timeline. Its a wierd one, because it creates wierd movement only apparent for the first 5-10s (period of an individual animation). Is there a better way to create a timeline or tween object and pass it up the chain for use later? This is pretty much the code I use now: Thanks, (I'm loving greensock library) Don have a great day
  13. I want to slide each element in my div one after the other having some pause after each item slides. Below is my code attached. $(function () { $('.tick').each(function () { var $self = $(this); var t1 = new TimelineLite(); t1.to($self, .5, { x: 100, ease: Cubic.easeInOut }); t1.pause(); t1.resume(); }); what it does is: It slides all the items at a time. Why isn't it pausing after each item slides... What is the issue in the code? Thanks & Regards, Bunnie
  14. I'm using GSAP's TimelineMax with Kinetic JS. I got them to work together, but I'm having trouble when I try to pass my own custom functions to the timeline. I've included a jsbin to show the issue. http://jsbin.com/afixoc/4/edit The first part of the animation uses a standard Kinetic JS command and this plays fine. tl.to(rect, 1, {setX:300}); The second part of the animation uses a custom function that I am adding to 'rect' and this is failing. tl.to(rect, 1, {customSetX:100}); I tried to track this by publishing the value to the console and the issue is very strange - the value that's being passed to my function seems to be NaN. Now, the console.log gets printed a number of times, so I can tell that it's being called every frame. However, I can't figure out what's going on with the parameter. When I print (typeof val) it says number, but when I print the actual val, it says NaN. (You can click 'Play Anim' and open the console in JSBin to see this) Can anyone help me understand why this is happening? (BTW, the reason I'm trying to add my own functions is because I need custom rotate and scaling code for my objects to transform around a pivot point rather than Kinetic's offset.)
  15. Hello! I am trying to build a timeline that is composed of nested timelines. I am finding that the when I nest the timeline, the yoyo playback(and even the plain repeat) ends up playing the incorrect values and the css matrix gets set incorrectly. It works fine if I add the Tween like this: tl.add ( TweenLite.fromTo( ... )) but if I create a new timeline and add that, I get the error. tl2 = new TimelineLite(); tl2.add ( TweenLite.fromTo( ... )); tl.add( tl2 ) I have an example here: http://jsfiddle.net/7h5ED/2/ I left it in the broken state, but if you change the showBroken variable to false, you'll see the correct behavior. It should have a sequence like: slide in from top, zoom out, slide in from right. When this yoyos in the broken state, the reverse zoom goes offscreen instead of to the middle of the screen. Any help would be appreciated! Thanks!
  16. Hi, is there a way to change the easing method of a tween in a timeline when reversing the timeline? My example.: var tlDrops = new TimelineMax({paused:true, delay:2, reversed:true}); tlDrops.from("#geschenkedrops", 0.2, {bottom:0, right:15, ease:Back.easeOut}, "starting") .to("#geschenk", 0.5, {autoAlpha:0}, "-0.1") .to("#merci-button", 0.5, {autoAlpha:1}, "-0.1") .from("#hauptgeschenk", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:180, ease:Elastic.easeOut}, "geschenke") .from("#geschenk2", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:160, ease:Elastic.easeOut}, "geschenke") .from("#geschenk3", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:140, ease:Elastic.easeOut}, "geschenke") .from("#close-button", 0.2, {bottom:25, right:25, ease:Sine.easeOut}) .to("#geschenkedrops", 0, {autoAlpha:1}, "closing"); Now I would like to change all Elastic.easeOut easing methods into a different method (e.g. sine.easeIn) on timeline reverse. Is that possible, or do I need to create an extra timeline for the reverse function? Thanks so much, Rob
  17. Hi all, First of all can I just say how amazing this engine is to use! I've only been using it half a day and I have to say it is really amazing. My boss introduced me to it as he uses greensock for actionscript, and seeing as I am no flash programmer, he asked me to talk a look at the javascript version and its amazing My question is probably more a javascript question rather than a question about the actual engine files.. I have 2 divs (but want to add more), the first one called firstSlide and the second one secondSlide and what I want to do is once the animations are complete on the first slide, I want to add a delay of 5 seconds and then transition out the first slide and then show the second. Could someone please point me in the right direct of how I could do this please? Thanks in advance!
  18. Hi, I have a text (blockquote) that should move from right to left constantly. It should start with opacity 0 then go to opacity 1 in 2 seconds. After that, it should keep moving constantly (same speed) for about 10 seconds and then fade out (back to opacity 0) but keep moving in the same speed. I've tried this way, but it doesn't get the correct movement I want: var tl = new TimelineLite(); tl.to('.quote1', 2, { opacity:1, right:"+=50px", delay:3 }) .to('.quote1', 10, { right:"+=150px" }) .to('.quote1', 3, { opacity:0, right:"+=50px" }); What I want to know is if it's possible to have a timeline for each property (e.g. "right" and "opacity") or if there is a better way to achieve the same result with only the object timeline...
  19. Hello, I've been looking for something that looks pretty simple, but I've never found anything about this: I'd like to use the insertMultiple method and play the timeline with one single ease function. What is the correct syntax? Here is one of the (many) things I've tried so far: var myTimeline:TimelineLite = new TimelineLite({onComplete:zoomComplete, ease:Bounce.easeInOut}); myTimeline.insertMultiple([new TweenLite(R, dureeTween, {x:newR.x, y:newR.y}), new TweenLite(I, 2, {x:newI.x, y:newI.y}), new TweenLite(Cmin, 2, {x:newCmin.x, y:newCmin.y}), new TweenLite(Cmax, 2, {x:newCmax.x, y:newCmax.y}), new TweenLite(seuil, 2, {x:newSeuil})] ); The ease function does not seem to be taken into account, can someone tell me what I'm doing wrong? Thanks in advance ^^
  20. I have a few tweens as part of a TimelineMax instance that have a speed of 0. However they are executing out of sequence with the rest of the tweens, seemingly running at the very start of the timeline playback. Changing the speed to 0.1 fixes this issue. Here's a fiddle: http://jsfiddle.net/wxxkA/2/ Any ideas? Thanks
  21. Say you want to tween an element from point A to Z over 10 seconds on a new timeline, but want to stop that tween 5 seconds into the timeline, so that the result is more like a tween from A to M over 5 seconds, but following it's A to Z path over 10 seconds. Any way to kill an element's property tween at a specific point in a timeline?
  22. Hi there! I hope that somebody can help me out with a problem I stumbled upon. I want to animate on a scroll by using the superscrollorama plugin. With GSAP I can use a timeline to change the position of an element on scrolling. I want the following actions to take place: Move the element from -1900px to 550px on screen by scrolling After that, let the element stay at it's position while scrolling a certain amount of pixels (let's say 2000px) After the 2000px without movement, let the element move from it's current position to 1900. So we have an animation of an element from the left side of the screen, to the right with a pin moment. I hope someone can help me out here because I have not succeeded in writing a code that doesn't conflict with the first animation and a pin moment. This is what I have so far: controller.addTween('body',(new TimelineLite()).append([TweenMax.fromTo($('#vogel'), 1, {css:{left: -1900}, immediateRender:true}, {css:{left: 550}})]), 1000);
  23. Gabriel

    kill vs clear

    Could someone explain the difference between using kill() or clear() on a timeline? That is, besides kill() being able to kill individual tweens, lets assume we're using kill() on the entire timeline itself. The documentation is unclear (use kill to kill a tween; define kill?). If they're the same, then why use clear(), other than the timeline instance being preserved? And, I'm interested if either resets the positions of elements in a timeline to their beginning position, or what the best way to go about that is? Thanks!
  24. Hello, I would like to start and reverse a timeline animation for the element that I'm hovering with the mouse. Then on mouseleave I would like to reverse this animation. I know I could create a timeline for each possible element. However is it also possible to tell the timeline which element should be effected with the animation by passing the element ID to the timeline? Something like this: <div id="navipoint-board"> <div class="navipoints"><a href="/control/category/~category_id=MANGO"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_mango.png" id="mango"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ROTEFRUECHTE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_rotefruechte.png" id="rotefruechte"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ERDBEERE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_erdbeere.png" id="erdbeere"></a></div> <div class="navipoints"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/active_vanille.png" id="vanille"></div> <div class="navipoints"><a href="/control/category/~category_id=HAFER"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_hafer.png" id="hafer"></a></div> <div class="navipoints"><a href="/control/category/~category_id=OLIVE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_olive.png" id="olive"></a></div> <div class="navipoints"><a href="/control/category/~category_id=PFIRSICH"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_pfirsich.png" id="pfirsich"></a></div> <div class="navipoints"><a href="/control/category/~category_id=KOKOS"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_kokos.png" id="kokos"></a></div> </div> <script type="text/javascript"> $(document).ready(function() { TweenMax.to($('.navipoints a img'), 0, {rotation:"20"}); var tlRotation = new TimelineMax({paused:true}); tlRotation.to("Mouseover-Element", 0.5, {rotation:"0"}); $('.navipoints a img').mouseenter(function() {tlRotation.play(this);}); $('.navipoints a img').mouseleave(function() {tlRotation.reverse(this);}); }); </script> Thank you very much, Robert
  25. I have several elements which will be using the same animation functions. So I want to have a timeline for animating 20 px to the left for instance. How do I pass in the element to the timeline without knowing before hand which element will need to be moved? I imagine the most efficient way is to not create a new timeline variable each time which what I think is throwing me for a loop. e.g. http://jsfiddle.net/ccarterc1984/6LQhJ/ This is my first day trying Greensock so be gentle.
×