Jump to content
Search Community

Search the Community

Showing results for tags 'timing'.

  • 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


X


CodePen


Company Website


other


Location


Interests

Found 12 results

  1. I hope this is a fairly simply question I'm moving an item like this gsap.fromTo("#graphMaskHandle", 60, {x:-155}, {x:0}); It seems to start moving more quickly then slow down as it goes on. Is there some kind of easing on as default for gsap? If so, how do I turn it off and get linear motion? If not, any ideas what's going on? (I'm forbidden from sharing my code on CodePen, unfortunately) I'm using it to reveal a graph over a 60 second period, so the graph needs to be revealed to match up with "seconds" on the x axis. I'm a newbie to green sock; I'm finding it brilliantly useful, but, on top of my poor maths, I'm having a bad day with this. Any help would be appreciated.
  2. Hey! So I have a timeline loop that should loop infinitely, each new timeline has a negative offset to keep the loop from having a gap at the beginning of each timeline I can achieve the desired effect by adding the same timeline with negative delay multiple times ( lots of timeline.add(anim(), "-=3") ) But for some reason today I can't wrap my brain around how to do this nicely? I have tried various things, negative repeatDelay, onComplete set time() / progress(), but none of them quite work. Something like 2 timelines and the second one loops forever sounds like the right way to do it? Please look at the codepen and all should be made clear, on each 'repeat' of the master timeline there is a gap Thank you in advance ? I'm so sure it's something really simple that I'm overlooking!?!
  3. Hello, I'm trying to code a flickering animation, where a canvas and an image flicker on and off intermittently. I'm trying to get the timing of the flickering as accurate as possible: the canvas (multicoloured "mondrian" in the codepen) should be presented for 67 ms (4 frames at 60Hz) and the image ("stimulus" in the codepen) for 34ms (2 frames at 60Hz). I coded it using only autoalpha, drawing everything before the animation starts. The presentation times are recorded into an object called "vbl" in the codepen. On my macbook with chrome, animation works almost perfectly. But testing this animation on a few different setups (weaker windows machines, all chrome or firefox), I'm getting a considerable amount of mistiming: Especially in the first flickers in the sequence. Both the canvas and the image might be presented for too short or too long (0-100ms in range, though mean and median are close to wanted values). As timing is the most important issue for me, I am willing to use almost any trick to get it better. Any ideas? I'm fine with long (~0.7 second) loading times. Many thanks, Yaniv
  4. It seems like you could replace all of your setTimeout and setIntervals in your code using something simple like: var foo=0; TweenMax.to(foo, 1, { onComplete:function(){ // do something } }); Of course you could use repeat:-1 and onRepeat to make this a setInterval, too. Note that I Tween a generic variable as opposed to a DOM element to avoid the cost of accessing the DOM. Now this comes with several benefits such as the ability to pause, resume, or even killing all timers with a one-line command (which is very useful for me). I made a DOM-based webgame that is entirely timer and event driven, meaning that it was designed without using any game loop at all. Upon discovering the ability to use something like TweenMax.pauseAll(), I realized it would actually be possible to pause all animations, and even timers, if I changed my setTimeouts to TweenMax timers instead. Implementing a pause feature in my game would be a pretty big deal. So is this a good idea? I also noticed that chained setTimeouts tend to lose their timing while TweenMax does not. For example I have button timers that indicate the number of seconds remaining until a skill button is ready to be used, and it updates the seconds remaining every second. In reality the setTimeout is actually running a little bit late depending on how busy the processor has been, but if I use TweenMax timers, it will always be very precise and every second is almost exactly one second of delay (notably, setInterval does not appear to suffer from this timing problem). I particularly noticed this when I developed analog clocks for my website at work and I noticed that all four clocks kept absolute perfect timing no matter how much was going on or how long the webpage was running. Very cool. Any thoughts or feedback on this? I have over 1000+ setTimeouts/setIntervals throughout 70,000+ lines of code so this would be a drastic re-work.
  5. Hi I posted on the forum a few days ago with a problem about synchronizing audio/ video with animation and scrub bars. That issue has been solved and the codepen is here: http://codepen.io/dipscom/pen/rryZaQ Thanks a lot for that, it was a great help. Now I am trying to place my tweens on a timeline at exact points and it isn't working correctly. I have audio, animation and scrub bars all synchronized and working correctly but I want to put tweens at specific points in the timeline so the animation matches the music or narration correctly. I have tried absolute positioning and labels but without success and I was hoping someone could help me with this. The codepen is here: http://codepen.io/anon/pen/RGgJrA In this codepen for example I want the first tween to start at 1 second and the second tween at 2 seconds. Why isn't this working? Many thanks Pebble
  6. Hello, This is my first post, and I'm hoping to continue learning more and more about GSAP and all its features. I'm correctly working on recreating a dribbble shot I saw (https://dribbble.com/shots/2766513-Ep-07-The-Hound). They created a gif and I'm trying to recreate the movement using SVG and GSAP. I have a couple of questions... 1. I attempted to do 2 different things, and I was curious how you guys would approach this animation. When I altered the opacity It kept "blinking", I solved this with altering the CSS to display none/block. Would this be the best approach or is there a different way to solve the "blinking" with altering the opacity? 2. The transition or timing is not fluid at all, would you be able to help me understand how to adjust the timing to make it look more fluid. I've had this same issue with other animations where it just looks choppy. What's the best approach so that transitions look more fluid and seamless? code: http://codepen.io/vaarellano/pen/bZjqmO Thanks, Victor
  7. Hi again, Another newbie question. Can anyone help. I am trying to get the last element in my timeline to start before the previous animation finishes. Thanks in advance. var h = $("h1"), para = $("p"), over = $(".overlay"), mod = $(".header-cta .module-cta"); var t1 = new TimelineLite() t1.from(over, 1, { css:{opacity: 0}, // /delay: 6 }); t1.from(h, 2, { css:{marginTop:400, opacity: 0}, ease:Bounce.easeOut, // /delay: 6 }); t1.from(para, 2, { css:{marginTop:600, opacity: 0}, ease:Bounce.easeOut, }, "-=1.3" ); t1.staggerFrom(mod, 1, { css:{marginTop:600, opacity: 0}, ease:Bounce.easeOut, }, 0.1, "stagger" );
  8. 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?
  9. Hi! (nice new site btw) I've got a nice quick animation, that works well on desktop (and on my phone), but on an ipad2 it's too quick. Ie it happens before the ipad has chance to render the frames. It's kind of a gratuitous animation, so it'd be nice (but not essential) if it could be seen. So odd request maybe, but is there a way to make a tween slow down for a slower processor? Thanks, Andy
  10. Does anyone know if it's possible to assign a label to a sequence when that sequence is already relative to another label? for instance: tl.to("#redBox", 1, {x:550}, "start") .to("#blueBox", 1, {x:550}, "start+=0.05", "second") .to("#greenBox", 1 {x:550}, "second+=1"); You can see the codepen here http://codepen.io/anon/pen/vLtlg But from this snippit you see that the bluebox starts relative to start, and I want greenbox to start relative to bluebox. Is this possible?
  11. Hi, I am working on a flash training presentation including a number tweens which need to appear one after another, mainly texts and some photos flying in or fading out while trying to control the timing of the elements with delay property. I have noticed however that when "delay" used in conjunction with "onComplete" callbacks the delays are somewhat missing and not processed. So instead of delaying the start of the animation and then only do onComplete when it ends it seems like the script is disregarding the delay properties an proceeds immedeately with onComplete callback functions. Please see example below: //animations part 1 TweenLite.to(girl, 1, {_alpha:100, ease:Linear.easeNone, delay:1.5}); TweenLite.to(planTab, 0.7, {_y:417, ease:Linear.easeNone, delay:3.5}); TweenLite.to(text_1, 0.5, {_x:394, _alpha:100, ease:Linear.easeOut, delay:4}); TweenLite.to(text_2_Anim, 0.5, {_x:395, _alpha:100, ease:Linear.easeOut, onComplete:myFunction1, delay:4.3}); //animations part 2 - need to start with about 2 second delay after previous set so the previous texts can be read function myFunction1() { TweenLite.to(text_2_Anim, 0.5, {_x:435, _alpha:0, ease:Linear.easeOut, delay:2.5, onComplete:text_2_Anim.nextFrame()}); TweenLite.to(text_2_Anim, 0.5, {_x:395, _alpha:100, ease:Linear.easeOut, delay:3}); TweenLite.to(benefitsTab, 0.5, {_alpha:100, ease:Linear.easeNone, onComplete:myFunction2, delay:3}); } //animations part 3 function myFunction2() { //more tweens here. } Any ideas on why it is happening? Thanks, Attila
  12. I'm having an issue with sequencing some animations. I would ultimately like the duration of the timeline to be equal to 2 seconds but only have the following objects animate at specific points in the first second. Goals: 1. Duration of TimelineMax = 2 seconds 2. Specifically time the elements to start and finish there animations within the first second. 3. Loop timeline So far I have the loop working and all animation running. the problem is that the duration is not 2 seconds long. I could really use some help straightening this out. Thank you in advance. tl1.insertMultiple( [ TweenLite.fromTo( byId("bac0"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:0,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("pill0"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:1,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("bac2"),.2, {css:{autoAlpha:1,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:0,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("pill2"),.2, {css:{autoAlpha:0,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:1,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("bac4"),.2, {css:{autoAlpha:1,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:0,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("pill4"),.2, {css:{autoAlpha:0,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:1,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("bac6"),.2, {css:{autoAlpha:1,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:0,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("pill6"),.2, {css:{autoAlpha:0,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:1,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("bac8"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:0,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("pill8"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:1,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("bac10"),.2, {css:{autoAlpha:1,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:0,rotation:-225, top:270, left:440}} ), TweenLite.fromTo( byId("pill10"),.2, {css:{autoAlpha:0,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:1,rotation:-225, top:270, left:440}} ) ],0, "normal",.1 );
×
×
  • Create New...