Jump to content
GreenSock

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

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}),
  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-Trick
  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 m
  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
  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 pr
  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 maste
  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 = cr
  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
  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 ach
  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
  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 imple
  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 manipulat
×