Search the Community
Showing results for tags 'startTime'.
Found 2 results
-
I'm working on a tool that will build kinetic type and really struggling with the timing of things. Trying to emulate this kind of thing - http://aescripts.com/typemonkey/ I'm using a foreignobject in a main SVG with div's containing a span wrapping each word. I'm looping through each word snagging the left, top, width and height and using those variables to fill the main SVG's viewBox attribute using this function: function buildTweens() { var time = 0; $('.word').each(function(){ var x = parseInt($(this).position().left), y = parseInt($(this).position().top), wd = parseInt($(this).width()), ht = parseInt($(this).height()), stageTween, wordTween; stageTween = TweenMax.to(stage,1,{ attr:{ viewBox: `${x} ${y} ${wd} ${ht}` } }); wordTween = TweenMax.to($(this),1,{opacity: 1}); tl.add(stageTween,time); tl.add(wordTween,time); time += 1.5; }); } I set the opacity of each word to 0 initially and then tween the viewBox to fill the screen with each word. I just used a time variable as a counter and am doing tl.add for the viewBox tween and the fade starting at the same time then waiting a half second to start the next viewBox/word tween combo. I've tried lots of ways to time this but it gets wonky on me real fast. Was trying to tween over to the next word and then fade the word in, leave it there for a half second (really want the time it stays to be variable ultimately) and then move to the next one. Probably just having a bit of a brain-f... er, uh, brain-cramp but it seems like the opacity tween always starts before the viewBox tween causing the timing to get off. Also seeing a flash of the un-zoomed text. One thing to note is that if you set opacity to 1 in the stylesheet and comment out the opacity tween, everything runs smoothly. It's like adding the opacity tween forces the viewBox tween to wait for it to finish. (Also, this is being created in Electron so I'm not worried about this not working in Firefox.) Any idea what's going on? By the way, the codepen I started with (and am currently working on with a form element and dynamically created content) is here. http://codepen.io/swampthang/pen/PbQNXz - It's more involved so I created the one listed as the codepen for this post as a much simpler, pared down version.
-
I'm pausing timelines with pause() and resuming them with resume(). However, is as if the timeline is dragged out when it resumes, and labels no longer line up with the tweens contained in the timeline. I've traced most of the properties, and the only ones that seem to be different are duration and totalDuration which are increased by the amount of time spent while the timeline was paused. The startTime does not change. Is this behavior normal? How can I make it so that my tweens and timelines are the right length and the labels line up after pausing and resuming? At the same time, I'm also calling TweenMax.pauseAll() and TweenMax.resumeAll(), could this be affecting the timelines(I did not give them any parent)? I'm using AS3 version 1.64 of the Tweening Platform v11. Thanks for any help.
