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. 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
  2. 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
  3. 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.
  4. 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)
  5. 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!
  6. 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
  7. 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...
  8. 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>
  9. 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?
  10. 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!
  11. 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}) );
  12. 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
  13. 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
  14. 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.
  15. I'm trying to pause nested timeline: prezStartTimeline.call (buttonsHomeOff) .to ([_rootRef.overlay, _rootRef.bottomPlate], 0.5, {autoAlpha:1, ease:Linear.easeNone, onComplete:function():void {backdropLoader.pauseVideo(); _rootRef.backdrop.visible = false;}}) .staggerFromTo ([_rootRef.buttonHome, _rootRef.buttonBack, _rootRef.buttonForward], 0.5, {y:"+=20"}, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1) .add (RAOTimeline); RAOTimeline.addLabel ("slide_01") .staggerFrom ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03], 0.5, {y:"+=20", alpha:0, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1) .addLabel ("slide_02") .addPause ("slide_02") .to ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03], 0.5, {alpha:0, ease:Linear.easeNone}) .to (_rootRef.logoSmall, 0.5, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut}) .staggerFrom ([_rootRef.prezRAO.item_04, _rootRef.prezRAO.item_05, _rootRef.prezRAO.item_06, _rootRef.prezRAO.item_07, _rootRef.prezRAO.item_08], 0.5, {y:"+=20", alpha:0, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1, "-=0.4") But when I again play child timeline after the pause (.play()), the playhead is already at the end of the child timeline (all objects are already animated to the end values). Looks like the values calculations don't stop at the pause position. Is it a bug or did I miss anything?
  16. Hello! After getting some help and finally understanding how TweenLite.to works and getting some pretty good animation out of it, I was super excited because I wanted to change some of it over to a timeline so I could have delays where I needed them, plus start to figure out how the whole timeline thing works. Basic premise: you hover over a section, edit it, and the save and cancel buttons appear. (Then when you hit save or cancel, everything happens in reverse). I tried to start easy by just trying to make the appearing save button be a time line. You'll see in my codepen that I have tlClickToSaveAnimation.play(); where I want the animation to fire off. $(".saveSection").each(function (index, element) { var tlClickToSaveAnimation = new TimelineLite(); var saveSection = $(this).closest(".section").find(".saveSection")[0]; tlClickToSaveAnimation.to(saveSection, 0.5, { opacity: 1, display: 'block', scale: 1, paused: true }, "ClickToSaveAnimation"); }); And here is my attempted timeline build. As it currently stands, I'm getting "tlClickToSaveAnimation is not defined". Originally I had it outside of the function for each saveSection, but then 'this' wouldn't be defined and the animation couldn't work. Am I missing something completely in how animations work? My goal is to get everything into it's own timeline so I can juyst whatever.play("label") so I can call animations how I need, including the delays on the reverses so things disappear in the order I want. Again, thank you all for your help! Everyone's been super helpful in getting this newbie to understand GSAP.
  17. Hi. With using sprite sheets I wanted to just set the width, height and background-position properties in CSS and set the rest in javascript with TimelineLite or TimelineMax. Is there a best practice for this? I want to do something like in the following example: I set all the images to hidden to start then animate with fromTo as needed. I made an example here with 3 different colored boxes, which works great on all browsers. http://codepen.io/anon/pen/jbKWJg The issue I am having is that on a DoubleClick banner example using the same technique I am having problems when I restart the timeline just in IE10. When I call tl.restart, any of the fromTo images with immediateRender:false are visible from the beginning instead of having autoAlpha:0. Thanks in advance, Kurt
  18. I'm doing work on kiosk applications that have content that needs to change on a schedule. Think breakfast in the morning, lunch around noon, and after 5 dinner. We use GSAP on a bunch of other pieces and part of me wondered if there would be considerable issues with having a timeline run all day. I figure we use .addCallback() to fire a function at whatever time we want. The only other way is to do a setInterval() and have it check for registered callbacks in a time frame, both seem like they could have memory issues but the GSAP has a much nicer API...
  19. This may be more of a feature request, but I'd like to be able to remove items (TimelineMax.remove()) and insert new items (TimelineMax.add()) by position. So if I have a TimelineMax that contains 5 TimelineLite animations, and I want to update the third TimelineLite assuming a zero index: TimelineMax.removebyposition(2); TimelineMax.addbyposition(myNewTimelineLite,2); Looking at the documentation I can't find a way to do this. I was just wondering if anybody here had any insight in to if this was possible or a planned feature? Thank you! Dan
  20. Hi, This codepen works in IE but not Chrome or Firefox. Basically its the same setup as i have in Lectora. Lectora autogenerates html and css, so i cannot change much in the structure of the html. The javascript however i can change to whatever needed to get this working. Doublechecked with some other projects done, and noticed that indeed IE works while Firefox and Chrome have problems with tweens for x/y, rotation, scale and the alike... Tested on: Windows 10, IE: 11.0.10240 FF: 41.0.1 Chrome: 45.0.2454.101 m Doing some searching in different codepens i find several pens that work alike. But all of them do create/append new text elements that then get transformed. A workaround i might give a try. But in my case i would prefer not to create new text and just animate like in IE on the existing texts. I hope anyone can help out. Kind regards, Math
  21. I have an issue in Firefox. The timelines are not playing. If you click on 'Start X-Ray/Calibration' and 'Select Start' and any of the steps below, a timeline should play. It works great in Chrome and IE, not Firefox. I am using SVGs (mainly for positioning and scaling) and basically just showing and hiding elements within SVGs. An example of the code in question is: TweenLite.to('#glow1, #glow2, #glow3, #startBtn2, #okayBtn1, #okayBtn2, #stopBtn, #calibrate, #yesBtn, #operatorBtn1, #barHighlight', 0, {autoAlpha:0}); var popover1 = new TimelineMax({paused: true}); popover1.fromTo('#glow1', .3, {autoAlpha:0}, {autoAlpha:1}) .fromTo('#glow1', .2, {autoAlpha:1}, {autoAlpha:.3}) .fromTo('#glow1', .2, {autoAlpha:.3}, {autoAlpha:1}) .to('#glow1', .2, {autoAlpha:0}) .to('#baseImage1', 0.4, {autoAlpha: 0.3}) .fromTo('.col-9', .4, {background:'rgba(180, 180, 180, 0.0)'}, {background:'rgba(180, 180, 180, 1.0)'}) .fromTo('#popover1', .8, {autoAlpha:.15, scale: 0.08, x: 679, y: 174}, {autoAlpha:1, scale: 1, x: 0, y: 0}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}); $("#overlay20Link, #dotNav2 .page20").click(function(){ TweenLite.to('#popover2, #popover3, #popover4, #popover5, #popover6, #popover7, #popover8', 0, {autoAlpha:0}); popover1.restart(); yes.pause(); calibrate.pause(); popover2.pause(); popover3.pause(); okay2.pause(); }); Other GSAP animations run fine on the same page, it's just these timelines triggered with restart(); that are not working... navigation.js also contains GSAP code for global controls... Any suggestions? Thanks in advance!
  22. Hi, Been trying to get this to work for a little while now, a bit stuck. CodePen: http://codepen.io/Dev-KP/pen/jbMWxy Basically the individual animations work: .add(aninIn(copy1, 20)) //.add(aninOut(copy1, 20)) When one of them is commented out the other will work perfectly, but having them both there seems to make them merge. I'm guessing it's something to do with the .set in the returned tiimelines? If I am not mistaken the nested timelines should play one after another? Or is this something for immediateRender? Cheers P
  23. 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?
  24. Hi, Wondering if it's possible to add children to a nested timeline and have them affect previously added children. Please see the codepen sample for a better explanation: http://codepen.io/brancusi/pen/BoKopg Thanks
  25. Hello everyone, I'm having a bit of trouble adding a series of nested timelines to a parent timeline for multiple iterations of a for loop. In short: For each iteration, I'm trying to add 3 nested timelines to a parent timeline -- and have nested TLs #2 and #3 play 0.5 seconds after nested TL #1. The code is part of a much larger scene, so I think it might be the most helpful to give the general structure ... let parentTL = new TimelineMax(), childTL1, childTL2, childTL3, uniqueLabel; for (let i of sequences) { childTL1 = createChildTL1(); childTL2 = createChildTL2(); childTL3 = createChildTL3(); uniqueLabel = createUniqueLabel(); parentTL.add(childTL1, uniqueLabel); parentTL.add([childTL2, childTL3], uniqueLabel + '+=' + '0.5'); } For some reason that I can't figure out, the parent timeline only plays the child timelines from the first iteration of the loop -- and then it stops. If, instead, I write this within the for loop... parentTL.add([childTL1, childTL2, childTL3]); ... all child timelines will execute, for every iteration -- but of course, they'll do so all at once on every iteration, and I can't achieve the proper offsetting that I was originally going for. I could certainly post my fuller source code if it helps, but I'm thinking that with this pattern alone, I'm overlooking something simple with regards to the Art of Positioning... something that's causing the follow-up timelines to be lost after that first iteration.
×