Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timelinelite'.

  • 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. Hi, Would 'onComplete'/'onStart' wait to fire upon 'screen refresh'? If not, how can I achieve this? Thanks, Andy. edit: So I explored this via code. Find below results (asking for block to appear for 100ms). Results imply 'onComplete'/'onStart' do fire upon screen refresh/new frame. Must say, the results make me nervous. Fingers crossed there is a bug in my code. Here is a codeOpen exploration. stat_descriptor  av  stdev  min  max start_dur  16.420999999999886  2.655742111278148  7.490000000000009  39.90499999999997 end_dur  93.43405000000013  8.488287613743891  63.65499999999997 
  2. This is so simple that I have to be missing something easy. I'm setting the paragraph element to an opacity of 0; Then I'm splitting the text into words. I'm then just trying to stagger the words to an opacity of 1. I can't get this to work. I can make it staggerTo opacity of 0 but not the other way around. Here is my Codepen. http://codepen.io/trshelto/pen/YZQPwd/ TweenMax.set("p", {opacity: 0}); var text = new SplitText("p", {type: "words"}), words = text.words; var tl = new TimelineLite({delay: 1}); tl.staggerTo(words, 1, {opacity: 1}, 0.1);
  3. Lets say I have a complex TimelineLite instance, which is maybe tweening some DOM elements' CSS properties but also is tweening some pure JS properties which are used in drawing on canvas. Any time one of those canvas related properties updates, I want to call a function that redraws the canvas, but if some of those tweens are overlapping, I want to be sure that I am not redrawing the canvas more than once per tick. Is there a baked in way to achieve this? Or is my best bet to have the drawing method be a pre-throttled method? Cons to that would be that the throttling is then set at a hard ms
  4. Hi, I know how to call a function when a timeline animation is complete, but what if I want to call it in the middle of the animation? I want to call the displayContent() after the height=0 animation is called, how should I do that? var $outerBox = $selectedTab.parent('.standard-width'); var animate = new TimelineLite({ paused:true //onComplete:myFunction, //onCompleteParams:["param1"] }); animate.to($outerBox , .4, {height:0,opacity:0,ease:Power2.easeInOut}) .to($outerBox , .4, {height:100,opacity:1,ease:Power1.easeIn}) animate.play(); function di
  5. Hey there, I'm just getting started with GSAP and so far loving it! But there's one thing I couldn't get figure yet and I can't find any example online: tween repetition inside a timeline without stuck it I mean: var timelineChain1 = new TimelineMax(); timelineChain1.to("#timeline-1 .el", .2, {autoAlpha:1}) /*STEP 1*/ .to("#timeline-1 .el", .2, {scale:.8, repeat:-1, yoyo:true}) /*STEP 2*/ .staggerTo("#timeline-1 .el", .2, {x:-20}, .2 ); /*STEP 3*/ What happens: step 1 runs ok, then the timeline get stuck in the repeatition of step 2, so step 3 never happens. What I want: the inf
  6. Hi everyone, I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is. What I tried: When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused? Timeline.progress has not worked, but clearProps: drawSVG did fix it (although o
  7. Dear all, how accurate is TimeLineLite? People advise to stick with setTimeOut() for accurate timing of visual elements on screen (http://link.springer.com/article/10.3758/s13428-016-0783-4, the actual pdf) and not to use external packages (which presumably would add bulk/unknown-inaccuracies). I see that you can measure timing in TimeLineLite in terms of ticks. This seems the ultimate way of controlling for timing. But are onscreen happenings guaranteed to stick to ticks? I've been using Greensock for years and would be so happy to use it again cheers, Andy. Edit: v
  8. Hello Fellow Greensockers, Here is a question for you How come that, when trying to create an instance of TimelineLite after that the javascript onload event fired, the following import gives me this error in Chrome:Uncaught ReferenceError: TimelineLite is not defined(…) <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.19.0_cfbff7d208ccfdbe176b9855af1eb1fa_min.js"> </script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.19.0_422f021fad4c20f20cf3640a06ac39e9_min.js"
  9. Hello, the below works, loading TweenMax from CDN <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script><script src="https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.18.5_6bbddbd910e8bfac4e19220fe52e1af6_min.js"></script> function initAnim() { var TL = new TimelineLite(); TL.from("#banner", 1.2, { autoAlpha: 0 }); TL.to("#car", 2, { x: 200, y: 200 }) } But the following does not work, it tells me that TimelineLite is not defined, loading TweenLite from CDN <script src="https
  10. Is there a simple way with TweenLite, to disable all ease? Or rather does TweenLite have a built i default ease, such as Linear or other? - that I can disable. Thanks ".S"
  11. Hoping this is an easy one for you guys... I just couldn't find an example or reference to pull from. I understand the use of labels and offset timing. Also understand the use of adding an offset to subsequent labeled tweens. What I can't seem to figure out, is how to add an offset to the FIRST tween of a labeled sequence... in other words, using the code below, how to I add an offset of say, +=0.5 to the label of item2 so that items 3 and 4 fire at the same time? tl.to(root.item1, 0.75, {x:100, ease: Expo.easeOut}) .to(root.item2, 0.75, {x:100, ease: Expo.easeOut}, "go") .to(root
  12. Hi I recently joined and have read some very helpful posts and have got an audio file playing in synchronization with a timeline. What I need specifically is audio with a scrub bar being synchronized with a series of animations which have their own scrub bar. In the code I have put together I have the audio playing and the animations running for the duration of the sound file and I have a scrub bar for the audio and animation which are synchronized together. The problem I have is that the animations are not moving smoothly but are shaking back and forth. I think this is to do with
  13. Hello GreenSock Masters! I want to collect and recognized all the plugins out there! If you have unofficial plugin for GSAP please comment it or reply it to this forum thread. My Unofficial Plugin for GSAP https://github.com/WarenGonzaga/AnimateCSSPlugin This is not actually plugin built because I rely on GSAP ease animations and some GSAP related variables. Anyway if you have something to share with go ahead and comment it/reply it! Thanks GreenSock Forum
  14. Hello, I noticed that when I chain animations with .to , sometimes if two animations start at the same time, there can be a slight jerk in the animation, even if I do the rotate:0.01 trick for Firefox, etc. Question, is it perhaps 'smoother' or 'faster' rendering wise, to in those cases create multiple instances of TimelineLite, for example two instances, to ease the stress that one instance carries when starting two animations at a simultaneous time index. I'm not including any code since I trust the question is a simple one, since it is simple to start to animations the same time
  15. Keeping in mind am using the Meteor framework... Currently, when i click on a specific button on my page, it redirects/loads to the intended page being a template. My desire is to use (timeLineLite() ) to animate the intended page (template) by sliding it into the main page. Is this possible to do? If so kindly show me how to. My codepen link where I indicate the issue is: http://codepen.io/SirBT/pen/ORVyBq Thanks in advance
  16. HI! I want to convert timeline lite elements with their animations into canvas animation, I mean the whole dom element and its children that contains timeline lite animations. an animation like this one http://codepen.io/ihatetomatoes/pen/QboVVV is there way to do that? I've found some libraries that only take a screen shot of the page but no animations.
  17. Dear All, i have seen this tutorial where the animation can be controled by the input value of a slider. http://greensock.com/sequence-video I have a variable definde in my code which has a value between 0 and 1. Is it possible to control the progress for the animation with the value from this variable?
  18. Here's a question: Why does the parent timeline fires its "onComplete" before the children? Am I missing something here?
  19. Hi folks ! I'm stuck with the following code about tl.seek, can't go further from 17 seconds, I have to wait for the animation to complete to see what remains to be animated. It occurs when first "onComplete" starts... I tried to add following functions with "tl.add( percent( ) );", but it becomes messy and doesn't work at all with message : "percent is not a function" in console. That's why all the last parts of the animation are in the percent function. I also wanted to put the animation controllers from Timeline, but can't figure out how to make it properly for the whole timelin
  20. Hi there - I have an animation using tweenlite to tween some divs that contain png w transparent backgrounds. This looks great in all browsers expect IE8 there are blackout lines around the pngs. I know there are fixes for jquery fades and whatnot in IE8 for transparent PNGs, however none of the ones i've tried work on my file. Here is the timelinelite doing the tweening: var tl = new TimelineLite(); tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_f
  21. I have created multiple timelines with have different labels. Is it possible to call these labels using a main timeline? example: tlText.add("tekst4"); tlText.to(textSlides[3], transitionDuration, { opacity: 1, y: "+=100" }) tlText.to(textSlides[3], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[3], { y: "-=100" }) tlText.pause(); mainTimeLine.add(tl) mainTimeLine.add(tlText.play("tekst4"));// like this? mainTimeLine.add(removeDevicesTL,5); I want to use the main timeline to controll all the others? Or i
  22. I have a sequence of Tweens in a timeline that are staggered by 0.2 seconds. I want them to start 2 seconds early (before the white box fades out) How do I get dot2 to follow dot1 sequentially? Thanks
  23. Hi everyone! So I asked a question similar to this one before, but I think it was too broad so this is my attempt to clarify. I'm using Adobe Animate CC for a college project where I'm creating an "Interactive Comic." I'm very new to all this stuff and I've been confused about a lot of things. So I have several different scenes in this project. Each scene is a movie clip Symbol with several other movie clips that play in a certain order once the scene is initiated. To put it simply, the general idea is the user will click a button on the to make the scene play, and then click the "ne
  24. I'm very new to GreenSock as well as Adobe Animate and I'm trying to get a handle on how everything works. After reading up on TimelineLite, I'd love to use it for my entire project because it sounds way easier than trying to figure out all the timing myself. But I'm not sure if I can use this feature for ALL my tweens, or only those tweens that can be controlled by GreenSock. For example, let's say I have 3 objects on the stage, with instant names mc1, mc2, and mc3. Let's say that mc1 and mc2 are just moving around with GreenSock, but mc3 is a complex shape tween that takes 100 frames to
  25. Todays last question Is there a way that when I reverse an animation I can choose for it not to run until the very beginning (seeing as there is a way that I can reverse from before the end of animation). I tried the following since I wanted the 'reversed' version of the animation to stop 2 seconds from its beginning (otherwise it fades out to blank). But it didnt work. var callbk = tl.eventCallback("onComplete", doReverse); function doReverse() { tl.reverse(); timeline.addPause(2); } Perhaps there is a way I can continually listenfor progr
×