Jump to content
Search Community

Search the Community

Showing results for tags 'nested timelines'.

  • 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

Found 14 results

  1. //old way tl.add([ //single hop TweenMax.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: Power1.easeInOut}), TweenMax.to("#tail1", 0.1, {rotation: 0, ease: Power1.easeIn}), TweenMax.to("#tail1", 0.4, {rotation: 24, ease: Power3.easeOut}), ],0, "sequence"); //new way tl.add([ //single hop gsap.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: "power1.inOut"}), gsap.to("#tail1", 0.1, {rotation: 0, ease: "power1.in", delay: .25}), gsap.to("#tail1", 0.4, {rotation: 24, ease: "power3.out", delay: .35}), ],0); Hi! This is my first ever post in the forums, but I've gotten so much valuable information from here over the past several years, so first and foremost, this community has my great appreciation. After over a year having not directly touched banner/GSAP animation, I recently dove back in and saw some amazing new things had happened with the new GSAP. But then I saw something I was quite sad about...like, it surprised me just how sad haha. One of my favorite ways to break out smaller pieces of complex animations was with the method under "//old way" in the code snippet (the codepen is just an example of one such complex animation where these tween arrays were extremely helpful). It was a beautiful thing to animate freely with any combination of 'from, to, fromTo, and set' then slap a "sequence" after the position parameter and know that the whole little sequence could then be moved around on the timeline without the need for further nesting timelines or doing a bunch of math for delay values. You could even add negative delays to get some overlap if desired—it was slick! Under "//new way," durations of tweens get added for the delay value of the next tween. It works the same way as "sequence" did, but it's more work, and animating becomes a pain as you're dialing it in because you have more things to change. Is there any hope for the "sequence" method on tween arrays to make a comeback? It's also very likely that I'm not versed enough in the new GSAP to know there's something better, faster, and stronger than my beloved "sequence". I am aware of the new keyframes method, which seems super cool, but as far as I know, not as cool for two reasons: you can't combine "from/fromTo/to" within the keyframe sequence, and you can't mix targets within the keyframes. That makes sense when you think of them strictly as keyframes, but I miss the flexibility. Have I missed something with the keyframes method? Or is there some other new method that I should explore? I appreciate any thought toward this, and I'm curious to know if I'm alone or if anyone else feels like something has been lost here.
  2. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. If you've ever coded an animation that's longer than 10 seconds with dozens or even hundreds of choreographed elements, you know how challenging it can be to avoid the dreaded "wall of code". Worse yet, editing an animation that was built by someone else (or even yourself 2 months ago) can be nightmarish. Our article on CSS-Tricks, Writing Smarter Animation Code, will show you how to keep your code manageable and speed up your workflow. Here's just a taste of what's covered: Benefits of timelines Nesting timelines Creating functions that return timelines Using GSDevTools to super-charge your workflow This article contains what we consider to be two of our most important videos. Definitely watch them both. We're confident these tips will truly revolutionize how you approach your complex animations. Read Writing Smarter Animation Code.
  3. See the Pen GreenSock Home Page Animation by GreenSock (@GreenSock) on CodePen. Here is the demo we use on our homepage. Although it incorporates a few advanced techniques, at its core it is just a bunch of timelines nested inside a master timeline. This technique of nesting timelines is actually quite simple and with a little practice you'll be doing the same.
  4. Hello ! Finished our first GSAP Animation recently (massive thanks to @OSUBlake and @Carl) and just revisiting to tweak a few things. Having trouble with controlling sub timelines contained within functions, via a master timeline. Could anyone possibly let me know what I'm missing here? I suspect it's something to do with returning functions to the master timeline and not the timelines contained within them, therefore they can't be controlled at the top level. Have tried applying support given here and here but for the life of me can't get it to work as expected.. I'm trying to remove the Flutter() function at mobile breakpoint, restart the master timeline with just Sphere() then add flutter() again and restart when sized back up past 420px. Thanks!
  5. Hey! Longtime user, sometime-poster. I'm working on some ads that have a replay button. I have a secondary animation that plays at the beginning of my main timeline. That secondary animation is generated by a function that returns a timeline, and is called using add(). Secondary animation looks something like this: function makeWaves() { var tl = new TimelineLite(); tl .add('start', 0) .fromTo('#wave1 .teal', 10, {drawSVG:"0 35%"}, {drawSVG: "0% 95%"}, 'start') .fromTo('#wave1 .navy', 10, {drawSVG:"35% 100%"}, {drawSVG: "95% 100%"}, 'start') .fromTo('#wave2 .blue', 10, {drawSVG:"0 30%"}, {drawSVG: "0 90%"}, 'start') .fromTo('#wave2 .navy', 10, {drawSVG:"30% 100%"}, {drawSVG: "90% 100%"}, 'start') .to('#wave3 .blue', 10, {drawSVG: "80%"}, "start") .to('#wave3 .navy', 10, {drawSVG: "70%"}, "start+=2"); return tl; } Main timeline looks like this: this.timeline .addLabel("start", 0) .to(this.miranda, 0.6, {autoAlpha: 0}, 3.5) .add("f1", 3.7) .add(makeWaves(), "f1") //... more awesome animation When I hit the replay button, which calls timeline.restart(), my secondary animation doesn't fire. I tried setting timeline.restart(false, false) to avoid suppressing callbacks, but no dice. I also tried using exportRoot(), but I've never really been 100% sure how that works. Maybe I'm misunderstanding the use-case for this feature? Anything jump out at you guys that I might be missing? This seems implausible, but any reason using drawSVG would be part of the problem? I might try to put up a CodePen, but this is agency work, which is NDA'd by default, so I don't think I can share it publicly. Thanks guys!
  6. Hi, this is probably super obvious, but I was wondering how I might set up a next & previous button, so that when clicked, it would play a next or previous step in a timeline sequence? What I want to do is basically an animated slideshow/presentation. The first frame/scene (which has it's own timeline) would animate, and when it's over it would pause until someone clicks the "next" button. If the "previous" button is clicked, I'd like it to replay the previous scene. What I'm stuck on is getting the master timeline to pause between scenes, as well as getting it to replay just the previous scene (and not reverse the entire master timeline). It seems simple but I'm a little stuck. I put together a simple example on codepen to illustrate what I'm trying to do: http://codepen.io/ohem/pen/wWBoRg Any insight is much appreciated.
  7. Hey everyone , I post this not so much as a problem, since the solution is easy, but more as a curiosity and a bit of help to anyone else that may see this nested timeline behavior. I’ve created a master timeline via four nested timelines in functions. The first timeline tween of each nested timeline is a set() call. On the first pass through the master timeline, each nested set() at time zero fires at time zero of the master timeline – not time zero of the local timeline. This is easily corrected by applying immediateRender:false to the set() calls. My guess is that when the master timeline is created, all the set()s at position zero of the nested timelines are fired as they become relative to the master timeline of zero? @ Jack – I won’t even pretend to understand many of the things under the hood, but I was reading this post in which you said: 'That's one of the reasons we have the "set()" convenience method in TimelineLite and TimelineMax - it creates a zero-duration tween but it automatically sets immediateRender:false unless you're inserting it at the current time.' I totally understand that and the first set() of the first nested timeline is essentially at time zero of the master timeline so it should and does fire immediately, but I’m mostly curious about why the repeats of the master timeline all play as one might expect – each nested set() at local time zero wait their turn without having to apply an immediateRender of false. At any rate, this is not too big of a deal and easily solved by explicitly setting the immediate render . As I said, it’s more curiosity and for any future forum searchers with questions about it.
  8. 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.
  9. 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.
  10. Hi, I'm having some troubles because the order of execution of callbacks and events seems different when I have nested timelines. I have reproduced a simple scenario: I have a timeline with a tween, then a call to a function that pauses the timeline, then another tween. Both tweens are "fromTo" with immediateRender = false. I have added also complete callback on the first tween and start callback on the second one in order to log them. The result is: - first tween completed - timeline paused The second tween is not starting and its start callback is not executed, as I would expect. Then, I take an identical timeline, and I nest it inside another one. In this case the result is: - first tween completed - run the callback that pauses the timeline - first frame of the second tween executed and its start callback executed - timeline actually paused So only nesting the same timeline, the behavior is different. Consider also that this happens also putting the pause action inside the complete callback of the first tween. The second tween starts in any case before the pause takes effect on the timeline. You can see it clearly in the codepen. Is there something wrong in my setup? Is there a way for having the same execution order in any nested or not nested scenario, except putting tweens and callbacks in slightly different positions? Thanks in advance
  11. I'm a little bit stumped on how to make this feature work... I've got cards are flipping the way I'd like them to (Thank you GSAP!) However I want to add the functionality that if a card is already flipped over and the use clicks on another card's 'view' to flip a second card over... I want the first card (that is already flipped over to it's back) to play in reverse (and go back to its starting position) and then the second card can flip over. Much like this: http://www.google.com/landing/now/#cards/ Any help is GREATLY appreciated, as I can't figure out the proper way to achieve this effect. (you can see I get stumped at line 42 of the codepen)
  12. Hi Greensock! I wan't to use a master timeline where I can put in nested timelines. The same way it works in "Greensock homepage Animation". I have chosen TimelineMax for the mastertimeline (called "master") and Timelinelite for the nested timelines. The nested timelines have I placed in functions. So it will be easier to adjust things when complexity of the animation increase. The problem is that the chaining doesn't work in the mastertimeline. All the functions starts at the same time, or doesn't start at all. There also seams to be some problem how to add the functions to the mastertimeline called "master". If I write: master.add(logo()) .add(logo2()) .add(logo3()); Only the logo-function is executed. If I write: master.add(logo) .add(logo2) .add(logo3); All the functions are executed at the same time. *I use jQuery $(document).ready(function(){}); Can someone please help me? Best regards Ingemar Sweden
  13. Hi all, I've recently created a long animation by way of manually adding a whole bunch of individual tweens to one timeline along with delays so that everything lines up. I've since realized that nested timelines is the better way to this, especially since 98%of the animation I'm building is extremely sequential, though I should say that there are some places I'd like one timeline to overlap another, but I believe I can simply use an offset (instead of delays) on individual timelines that need a slight shift forward or back in the timeline. So i understand the concept here, but in my implementation I'm not getting sequential animation of the sequence. Instead I see everything run at once in sync. Here's a jsfiddle showing how I'm building the individual and main timelines. It may seem like there's a lot going on, but you can probably disregard most of the first few vars at the top of the fiddle (which are just param data and drawing methods), the timeline specific logic is at the bottom. I should state, that while there are two of the "banners" displayed there, which should animate sequentially, the elements of the banner should also be sequential. Looking at the structure of the json data (arrays split based on where they should live in a nested timeline) you'll see I want the first line (top left corner) to animate then the top box line and the bottom box line together then the text and the last line (bottom right corner) animate. Making a total of 3 timelines for each banner. Again, I know there may be a bit of code here but I've stripped this down as far as I can get without leaving all of the aspects in for everyone to understand what the goal is. Feel free to ask me for me questions for more clarity anywhere, etc.
  14. Hey guys, I'm putting together a master timeline that contains several different timelines. I want to be able to play only the timeline that I choose when I click a button. The timelines share the same div elements but animate them differently. Unfortunately I haven't gotten that far yet. Here is my JS Fiddle of what I have so far... http://jsfiddle.net/upAC5/ Right now when I call the main time line function it only plays the first timeline. What am I doing wrong. It's late and I have checked out the docs and some codepens but my brain is not grasping the idea of how to manipulate timelines that are inside of functions. Thank you. K_Rob
×
×
  • Create New...