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. 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.
  2. 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?
  3. 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.
  4. 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
  5. 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...
  6. 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
  7. 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
  8. 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!
  9. 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
  10. 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?
  11. 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
  12. 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.
  13. I've got a great SVG animation almost ready to share but need some last round tips. My code has been refined plus the integration of pointers Blake gave me in a previous thread, but it seems I'm having difficulty pausing the orbs when they reach the end of their individual bézier paths (i.e. x: 0, y: 0). Any advice? When each brain wave signal fires from the orbs the wave should be firing when x is 0 and y is 0 just to repeat myself if I wasn't clear. Thanks!
  14. Trying to create a floating orb effect where each orb bubbles in and then sends a transmission to the child's brain. Each orb will send a transmission at different times, but avoid being close w/one another in terms of the actual transmission sequence. At some point during the entire animation the orbs that send the signal in diff. intervals eventually sync up. What would be the best way to control the transmissions from overlapping one another? BTW it is required that each orb float all the time even when another adjacent orb is transmitting.
  15. Hi . This is my first time using GSAP. For a pretty simple task, in theory. I' using two timelines, with 2 phases. In each timeline, I animate the width. In the first phase, with a time «stime», While the first timeline is decreasing his width, the second, grows. In the second phase, with a time «btime», the first timeline increases his width, while the second, decreases. Well, there are two timelines, where they first grow in a direction, and later, they grow in the opposite direction, changing the time. I have a pair of buttons, «+» and «-», where we can change the time used in each phase. The time of a phase only can be change when the animation is paused in that phase. If you pause the animation in phase 2 and try to change values of phase 1, it will be ignored. When you are in the correct phase and the time is changed, the animation is seeked to an initial position fixed for that phase. For this, I declared 2 labels, «work», and «rest», that represents each phase (this is for a Pomodoro timer, that's is the reason of that names). Well, my problem is that this works with phase 2 («rest»), but won't with phase 1 («work»). I have tried with «seek», «tweenTo», even «set» and «restart». Anything appears to work. It get stuck in the position where it was when I hit the button, and starts from there in every new loop pass. I think that the problem is that time for label «work» is set to 0. Because I want to move at first position. I know that this should work, because I check other pens in the site and changed label to zero, and all work. But I don't know. I have made a codepen with a «simplified» version, that shows my problem. Any help will be welcomed. Edit: I just saw again the title and thought it wasn't pretty accurate, but it seems that I can't change it now.
  16. $(".iSmall, .shrink").on("click", function() { if (circle.reversed()) { circle.play(); } else { circle.reverse(); } }); Regarding above ^ Where and how do you add in a line to kill the hover to start the click? The hover conflicts with the timeline... It seems this would be a very common issue since a majority of clickable links have hover effects, but I have found less material on this on the web than the career of Milli Vanilli. Maybe not that many links are actually the element that is animated. Also, I think it must be done differently with tweens and timelines because even the few examples I have found (to unbind the hover state on click) didn't work at all. So if you go to my codepen, there's a main vertical Nav with a link near the top with the text "Shrink." and there is a squashed looking mobile nav in the top left corner with the middle link reading, "SMALL - LG" They are both linked to the same timeline you will find in the js window. On the main Nav, the hover state conflicts because it happens to be the element that is going to be animated. On the little mobile Nav, there is no conflict because the link isn't in a timeline. Please Note that the animation is not working correctly on the Pen and things looked squished in general, but that shouldn't matter in answering - as I'm looking for a general answer on how this is done. I welcome any answers or input as I am new to jQuery, Greensock, and writing forums. . . also computers and electricity and reading/writing. LOL seems that way, Thanks in advance anybody who answers.
  17. So what I'm trying to achieve is fading in and scaling the first cat at the same time. The reason I can't just do: timeline.to(cats[1], 1, { opacity: 1, scale: 2 }); Is because I want to have independent nested timeline groups. Any ideas?
  18. Hi, this is a pretty basic question... I'm still getting familiar with GSAP & code-based animation in general. I was just wondering, if I'm doing the same tween on a few elements (for example, if a couple things are fading in at the same time), is there any difference between doing this: tl.from("#copy4, #cta", 0.5, {autoAlpha:0}, "+=1.5"); or tl.from(["#copy4","#cta"], 0.5, {autoAlpha:0}, "+=1.5"); Both ways seem to work fine, but I wasn't sure if one is better/more standard than the other? I was doing it with an array at first, but then I realized that I could probably simplify things. Just wasn't sure if there was any reason why that might not be a good idea? Thanks for any insight! These forums are great.
  19. In this codepen example I have five buttons, and a timeline with five labels. When clicking on a button I want to move from the current location in the timeline, to the label corresponding to the button. In other words if you click on button 2, the animation should go from wherever it currently is to the point at label "two", so if it was previously at "one" the timeline should play forward from label "one" to "two", but if it was at position "three" it should play backwards from "three" to "two". How do I do this?
  20. Hey guys, Been a lurker here for a few years, but never needed to ask a question until now, so thanks for anyone that can provide any info. Working on a little SVG chess animation, as you can see in the pen. I have the timeline set to repeat. On the initial playthrough, the elements all appear correctly and animate as I've coded them to. But on any subsequent plays, you'll see that some elements jump or appear differently. I'm assuming this has something to do with the transforms I'm applying to them. If so, is there a way for all of the elements to "reset" to how they start at the beginning of my timeline on the first play? Thanks, in advance.
  21. Hi guys! Need your help! I need to connect the "Knob" and animation of numbers in Adobe Edge Animate, I did the dragged knob, and don't know how to do the rest ... Knob like this one greensock.com/draggable Change numbers with dragging like this greensock.com/timelinelite Add some scrins and Edge Animate files in attach files to better explain what I mean Thanks in advance for any help! Regards Misha. dc_power_supply_animate.zip
  22. Hi, I'm jumping between pages with different timelines, it's all ok, till the moment i go back to the first page (to the point it was before left) using seek function. myTimeline.seek(lastposition); where lastposition it is the position before the page was changed. I can easily check the value of that variable, lastposition, and it is right, but the seek function doesn't really jumps to that position, but a bit before, like 0.3 sec aprox, depending on how many images needs to load till that lastposition. Even forcing the lastposition to 1, the seek function do not jumps there, but a bit before. Why this is happening?
  23. So on this website, I use Timeline to set up and intro animation on the home page. When I host it, I'll set a cookie script so it'll only happen the first time you hit the home page, but for now, it's part of the problem. I have CSS statements and media queries interacting with my script and it just occurred to me that I have queries in my script for the different values and dimensions of the animations based on screen size. It's hard to explain, but as I'm new to GSAP, I cannot think for the life of me how to make them now conflict. I've attached the files needed. Any help would be greatly appreciated. Maybe you can see what I'm going for. Sorry if it's a cluster****. It's been a messier process than usual. website.zip
  24. Is it possible to spool to a certain part in a timeline and play forward (or backward) from there? Like setting a flag and on init() calling a flag on that part of the animation (e.g. init("thirdPart"))? I ask this, because I need to debug and right now, I have to sit through the full animation to check the end. Would save a lot of time. Thanks, -Stefan
  25. I currently have a problem with a "dirty" timeline. No matter what I do to it, I can not get it to play, even after clearing, etc. What properties should I inspect that might cause this timeline to refuse to play? It is not nested, and I have tried .clear() and .invalidate() as well as .startTime(0). In isolation, a fresh timeline works fine. I would like to know what properties I need to inspect to be able to identify the offending leftover data form previous use of this timeline, so I can learn more about how they work and how to clean one up. I am aware that I could simple throw it a way and use a new one, but ultimately I'd like to keep a record of all animations played on this timeline for later use to replay, etc. Thanks, Sven
×