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

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

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. Hello.. I'm a newbie. but I'm a big fan of GSAP. I have been used greensock to animate UI in ActionScript. I have a question about android performance! I'm trying to animate 7~8 UI Elements such as 3 Text Fields, Buttons, and Layers. (7~8 Elements will be moved same time) I have a 3 files. - pages.html - pages.css - pages.js also It is includedgreensock libraries.. here is my sample code. (in pages.js) var startTimeline=new TimelineLite({pause:'false'}); //For 7~8 UI Elements.. var startUIElements1=new TimelineLite({........}); . . . . var startUIElements2=new TimelineLite({........}); startTimeline.add=[, ,, ,, , ]; lastly when I click button than startTimeline.start(); when I click button one more than startTimeline.reverse(); sorry for sharing my full code. What's problem? I wish to use greensock library to animate in android webview smoothly.
  2. I would like this svg to 'appear to be drawn in a z-form. meaning top (green) line from left to right, then (red) line from where the green line leaves off and returns diagonally right to left, then finally the bottom (black & grey with shading) lines are drawn again left to right. There are two lines that form the bottom line, they should draw at the same time, each of these four lines need to be drawn separately to allow the path width to change a little across each direction change and the two lines (as well as allowing for shading of one) allows the width of the combined line to give change a little and this (I hope) lends a real sketchy nature to the final result. I understand (I think) that the there should be a tween in which each of the three individual line drawSVG effects occur (Note again that the two lines (id="line3") should draw concurrently). I was able to get the sequence right at one time, but the directions never were correct, and then it broke and would not work at all. So I have at least reconstructed it to a place that at least all the parts are present and I think the concept is pretty clear. Things that I would like to really understand; How to assign either an id or class name (I know there was much said about assigning a 'var' to each element and then using the var as the id in the svg; but there are some examples preferring use classes (not clear to me if there is a clear difference in this or cases where one works and one does not). To be honest I have found pretty much everything to be complicated (this is more a feature of JS rather than GS). By the way, I prefer a single more complicated solution that ALWAYS works than some mix of sometimes works easier methods. Once we get past the naming conventions/preferences then we have the nesting of drawing elements (timelines) or delays, either is great, but I am not totally convinced that a TL is needed for something as lightweight as this example (I do like them). Finally once this all works it is my "hope" to be able to export the shading block from the inline SVG to the CSS file. Sorry for the verbose nature of this post, I hope that this will prove helpful to others with my learning style. Something that would be really helpful is a subset of Forums that cover these just starting out sort of items. I had scanned the forum titles as well as searched for both "beginner drawSVG" and "newbie drawSVG" so I am thinking my question may be novel, but if not sorry I tried.
  3. I am trying to create a water fill effect that responds to a input type=range value. Managed to get it fill up but the timeline is not responding after the first animation. You will see what I mean in the JSFiddle. Any help would be appreciated! Still new to GSAP animation so excuse any hacky methods. JSFiddle link here. https://jsfiddle.net/7mLkf5uh/#&togetherjs=bu7OUD9asn
  4. Hello, I'm new to GSAP and just getting to grips with it. I'm using a modified codepen post as a guideline for making a slider. I want the slider to have specific effects and feel like I'm almost there. I was hoping that someone here can help me get over the finish line. http://codepen.io/anon/pen/MyKVJW As you can see from the codepen link, My slider contains 4 slides, within each slide are two darkly colored blocks. What I'm trying to achieve is when the slider changes, the left hand block slides in from the top as the right block slide up from the bottom. It seems like the right hand block is doing this but the left hand block is not. There seems to be a delay in the animation of the left block The slides use the following timeline var tlSlideOut = new TimelineLite() tlSlideOut.fromTo($prevSlide, 2, {top: "0%"}, {top: "100%"}) .add(TweenMax.fromTo($prevSlideSmBlock, 2, {top:"0%"}, {top:"100%"}), 0) .add(TweenMax.fromTo($prevSlideLgBlock, 2, {top:"0%"}, {top:"-200%"}), 0) var tlSlideIn = new TimelineLite() tlSlideIn.fromTo($currentSlide, 2, {top: "-100%"}, {top: "0%"}) .add(TweenMax.fromTo($currentSlideSmBlock, 2, {top:"-100%"}, {top:"0%"}), 0) .add(TweenMax.fromTo($currentSlideLgBlock, 2, {top:"200%"}, {top:"0%"}), 0) Is anybody able to offer me some advice on what maybe missing with this....any help would be much appreciated. Many Thanks Adam
  5. Hi all! I'm having several issues while attempting to develop a "paper-like" folding animation (like this one: http://codepen.io/rendro/pen/dxtHc). As you can see, in my pen the two parts split and that's because of the transformOrigin; if I switch the origins like below var $foldUpper = new TweenMax($upper, 0.5, { rotationX: "-45deg", transformPerspective: 2500, transformOrigin: "bottom center", transformStyle:"preserve-3d" }); var $foldLower = new TweenMax($lower, 0.5, { rotationX: "45deg", transformPerspective: 2500, transformOrigin:"top center", transformStyle:"preserve-3d" }); I can successfully folding keeping the elements together (since they fold using the center of the container as reference) but I also want to keep the upper border sticked to the top of the main container. The other issue I noticed is a strange "snap" (or lag) when I get back to the original position. Could you help me? Best Regards, Maurizio
  6. HI all, Here is the free lightweight slider that I made for GSAP Timeline: https://github.com/igord/gsap-timeline-slider There are no external dependencies and you can change targeted timeline on the fly. I use it at http://runbanner.com/demos/ to allow visitors to preview demo banners. Check it out.
  7. Hi, I'm quite new to GSAP and I wonder what the easiest way to loop a timelineLite would be? I've managed to loop separate tweens inside the timeline but not the whole timeline. TIA!
  8. 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" );
  9. Hi everyone. I set a infinite timeline with some callbacks onComplete & onRepeat that change numbers around the page. I'm working into an ember application, so because of my timeline is infinite and change numbers in the page I need to kill everything when the user leave the page to another, otherwise when he will come back the new timeline initialization will mess-up the design. I tried with the function mytimeline.kill() but looks like it doesn't work. Any idea on how to solve? Cheers! ps: it's difficult to provide a codepen in this case sorry
  10. Hi, normaly I am adding Tweens to my Timeline with TimelineMax.add(). Is there any diffrence (performance etc.) between TimelineMax.to() and TimelineMax.add(TweenMax.to()) ? Or is it just the same?
  11. Hi there I'm working through some of the concepts of GreenSock and was hoping someone could point out to me the issue with this animation. As you can see in the codepen the slider measuring the duration of the entire timeline is only about 80% through when it appears all my animations are finished. As a result, when I got to reverse the animation, there is a considerable delay before an animation kicks in. Thanks DB
  12. Is it possible to add timeScale when playing a timeline with this method:? timeline.reverse() I'm running play timeline within a 'if scroll is this' loop and would like to reverse the timeline with faster speed on the 'else' statement like this: if (scrollTop < 64) { timeline.play(); } else { timeline.reverse(); } Thanks for your time. Yan
  13. Hello, I have 2 sprites I want to tween along a bezier curve and then repeat, but I need the sprites to be staggered. This seems simple enough to create a timeline and add 2 bezier tweens and they will follow the tween. However, I want each sprite to start at different points along the path, i.e the 1st at 0, 2nd at 1/2 along the curve. and then repeat so it looks like they are looping around the bezier. If I add more sprites I want them all to follow the same path, but have them evenly spaced. What's the best way to do this? I have a codepen above (hacked from one of the demos) to show what I have so far. Basically, my question is, is there a way to start a sprite 1/2 way along the same bezier as the 1st? Thanks in advance, Andy
  14. Hi team, If I have a master timeline that contains 3 smaller timelines. Let's say if I want to change the start time of getPinTimeline so that it overlaps on the timeline of getRotateTimeline. How can I do that? var mtl = new TimelineMax(); mtl.add(getSpinTimeline()) .add(getRotateTimeline()) .add(getPinTimeline()); Cheers, Venn.
  15. I'm trying to create a rudimentary slideshow prototype that plays html container slides, loading their matching gsap animation definitions - on a temporary timeline on the fly, playing it, and then removing it (hide method, l326). The pen has two slides, when you play forward/backwards, the animation plays as expected - as the same timeline animations/properties are played back/forwards on navigation. But when you press the "jump to 1st" button on the second slide (which disrupts the linearity by playing "in" instead of reverse out) tween values that are not changed from 1 between the two timelines (the blue and red box's scale) remain unchanged (0.65, from the "out" animation). How is this possible? If you look at the above method, the timeline is invalidated, the element properties cleared... how was the 0.65 scale from the "out" animation retained? (sorry for the complex example code, had to chop down a larger code, I hope the above description is clear enough)
  16. Hi guys, Looking for just a quick yes or no, as its been a long day, and I can't find the energy to write a full demo/test. If I create a timeline like: var tl = new TimelineLite(); tl.to('.someClass', 3, {height: 100}); Then I save that timeline in a data attribute like: $('body').data('someTimeline', tl); Are these then referencing the same timeline, as an object? Or has it just copied over the values, as a variable? As it's instantiated, I'd assume it's being used by reference, but I can't be sure. In case I'm not clear enough, if I were to run the following: tl.seek(1); Would this change be represented within: $('body').data('someTimeline').play(); And vice versa? Thanks a lot!
  17. When adding a tween with a negative offset, but with a duration that does not exceed the previous tween, things start to behave weird when restarting the timeline. I created a small codepen example to demonstrate this. It seems like the first tween does not get overwritten by the second tween but only after the first tween finished for the first time. [edit] using relative ("+=100") or absolute (100) values does not make any difference [edit2] using tl.reverse(); instead of tl.restart() breaks the animation entirely
  18. Having some trouble grokking how to get the timeline to stop when I hover over the animated element with the mouse. Essentially, what I want is for the animation to stop spinning and the arrow to point south (180-deg) when user moves the mouse over it. Here is the codepen: http://codepen.io/bg-scro/pen/gaNOOY Based on the discussion in another forum post here, I assumed that code like the following would work, but the element shows no sign of responding to mouse events. (Note that `needleSpin` is the animation that runs when the page loads - it works fine; the `pointSouth` animation is what I want to occur when the mouse rolls over the `needle` element). needle.onRollOver = function() { needleSpin.pause(); pointSouth.play(); }; Appreciate the help...
  19. I have used GSAP for a few years now, after being introduced to it through college. I am a big fan and want to use it for animating a sequence in my portfolio site. I am testing a simple concept to see if I can make a much more complex sequence What I am trying to do is change an image at a specific point in the Timeline sequence - essentially changing the "src" path of the image. I have spent an hour or two now scouring the forums and searching online for a solution, and the only seemingly related issues are much more complex. I am aware of the possibility of using jQuery and the "attr" , however ideally I would like to keep it as simple as possible, and believe there should be a way to simply change the source of the image as a 'src' css property. I have tried it without the CSS Plugin, as well as spelling out the word. I have also ran a check on the image source to make sure it isn't a file-path issue. Here is the code as of now: <body> <img src="images/7.gif" id="seven"> </body> <script> var seven = document.querySelector("#seven"); var tl = new TimelineMax({delay: 2, repeat: 2, repeatDelay: 2}); window.onload = function() { tl.from(seven, 0.5, {autoAlpha: 0.5, x: +100}) .to(seven, 0.1, {y: + 100, x: + 300}) .to(seven, 0.4, {css:{src: "images/7777777.png"}}); var pathSource = String(seven.src); console.log(pathSource); } </script>
  20. Hi community! I am designer so my coding skills are not really good and as Flash is officially dead I still want to continue with banner projects. And now I have a question what is the best way to repeat banner 1 time and then stop it in some certain timeline position. Lets say I have google banners with maximum 30sec animation time. My one cycle is 14 seconds. Frames 1 2 3 4 5 and now I want that it plays like 1 2 3 4 5 1 2 3 4 (stop). I use TimelineMax delay:0, repeat:1, repeatDelay:2 but in this case it will end in 5th frame. I know that I could easily copy my timeline animation again and do it like this but it seems wrong. + If I need to adjust something later it requires much more work. Another question what I have how do you do banners for full google display. 14 different sizes. I try to use Google or web safe fonts. As much as possible images as .svg so I don't have to save them again. But my problem is that if I position all text and images as absolute and from top:xx px, left xx px - I have to change all this in css file + later js file for every size. Would less or sass be an answer to this question?
  21. Hello! I am trying to work out something where there's two side panels that can be collapsed to make the middle panel bigger. I have it 75% of the way there -- the only thing that doesn't work is that if you try to collapse both side panels, the middle doesn't go to it's full size (just stays at it's 3/4ths size as if only one panel is closed). I've done everything I could to get the codepen to work but even though it has everything in it that works outside of codepen, it won't actually animate and I can't figure out why, so I uploaded everything to my private server to show that it does work. http://tinyurl.com/q4smgxp Forgive if it isn't the most elegant code - I'm still learning jquery and GSAP! Anyone have thoughts on how to make it actually open up fully when both side panels are collapsed? Thanks!
  22. I've been digging around looking for the best way of inserting a pause or 'wait' into timeline. I found this thread here, (and I am also an experienced AS3 dev making the transition to Javascript) but it didn't work for me What's the best way of achieving this? var tl = new TimelineMax({delay:0.5, repeat:3, repeatDelay:2}); tl.add( TweenMax.staggerFrom(['#text1_dc','#main_img_dc','#sky_logo_dc'], 1, {autoAlpha:0}, 0.2) ); tl.add( "PAUSE OF 2 SECONDS WOULD GO HERE" ); tl.add( TweenMax.from('#img_skybox_dc', 0.5, {autoAlpha:0}) );
  23. Hey there, I am pretty sure, someone asked this before and it's explained somewhere. I just don't find it. In the provided codepen, please check the JS imports. It's only TweenLite. Why doesn't it work like this? I tried importing TimelineMax only, too, then added a var tl = new TimelineMax(); Nope... How can I make good use of the smaller libs? Thanks guys, Laser
  24. I'm basically a noob, but this should be easy and I'm suffering from two days of head-bashing. I'm trying to loop through an array of text values in absolutely positioned elements. The start and return tween positions are based on the width of the elements, which of course change when the text within them changes. I'm using TimelineMax and addCallback to change the text. But I can't figure out how to get the updated element width back into the tween. See attached Codepen -- the element to the right of the red text should bounce back to the right edge of the new text, not the old text. I'm sure I'm missing something basic... http://codepen.io/vanadu/pen/dYmKBb BTW the red text has to have a fixed position, so floats and relative positioning is out...unless I missed something there too. Thanks for any pointers...Vanadu
  25. I am a Jquery novice, and would have thought the solution to my problem to be quite simple, however I have tried a million permutations of this code and I can't solve it. I am using Scrollmagic and GSAP, and want to trigger three tweens from the same point, so that they fire one after the other (with a slight overlap). The scenes have duration: 0 so that the user only starts the animation, but does not control its progress. Each tween contains a css transform, to work on the same object (#boxes3d). The effect I am going for is : 1) The boxes start flat, but are exploded into 3D by changing the css perspective value to 850px. 2) The boxes rotate 180 degrees by changing the css transform value. 3) The boxes are collapsed again by reverting to perspective: 50000. [ 4) The animation reverses when the user scrolls back past the trigger.] The complication is that the transform value must also incorporate a dynamic scale value in order to make the absolutely positioned divs inside #boxes3d fit the frame at any screen size. The scale value (and therefore the whole transform) is set dynamically by another Jquery function: scaleDiv() which contains the nested rotate3D() and reverse3D() functions. I think I need to create a timelineMax (or Lite) to queue the tweens, but I am having problems putting dynamic css values into the timeline. I have created a jsfiddle (not a codepen - sorry - I hope that doesn't matter too much) with the tweens/transitions that I want to string together, along with the scaleDiv function that must be incorporated into the second tween. At present they have separate scenes, but I want to put them all into one scene/timeline. Here is the fiddle: http://jsfiddle.net/gbinning/vccxufou/13/. I would really really appreciate some guidance! Thank you v much! Edit: I haven't quite set up the scaleDiv function correctly, you need to slightly resize the window to trigger it.
×