Search the Community

Hi, Trying to wrap the GSAP into a standard interface i bumped into an issue calling .pause() method to several timelines. Please take a look at this fiddle: https://jsfiddle.net/_Ovidiu/x5m690Ld/ 1. From drop-down selelect "Sprite animation" 2. Click "Start Animation" 3. After 3 seconds click "Pause animation" result: The console logs that the timeline is paused but the animation still runs. Please help. Thanks

Hi everyone, Thanks in advance for your help. I've gotten pretty familiar with GSAP/Scroll Magic over the past year or so and have used it on many projects. This is the first time I've been unable to get things working via troubleshooting/docs... so hopefully it's even possible. I'm trying to create an interactive timeline that will trigger new slides whenever you reach the next "period/year". However, the timeline has to remain pinned as you scroll. The functionality isn't quite there yet, but I've added indicators to show the issue I am having. Whenever you scroll it pushes the individual scenes down. Is there anyway around this? What I've tried so far: • Adding two controllers, one for the pinned scene, and another for the individual period scenes. No luck. • Using the "pushFollowers: true" setting on the pinned scene. No luck. • Using start and progress callbacks combined with bloated math programming - but it felt hacky and ultimately will be too hacky for a live production site. Thanks again!

Hello I am new to the forum, I am having issues hiding the SVGs in this pen on load. The timeline repeats itself properly, but I can't seem to execute it properly off the bat. Each SVG is shown until the timelines runs through.

Hello, I have a websocket project I'm working on. When a user joins the site they get a div created for them with an icon as background image. I have a function that runs on DOMContentLoaded that creates fake user divs and wanted to build a timeline of animation moving them around via the X and Y properties in TweenLite. I am really stuck scratching my head - my TimelineMax produces console logs on Update() but nothinggggg moves. I could really appreciate a second pair of eyes! I've distilled the function in question down to a codepen. Thank you in advance! Stephen

Hey there, I'm just getting started with GSAP and so far loving it! But there's one thing I couldn't get figure yet and I can't find any example online: tween repetition inside a timeline without stuck it I mean: var timelineChain1 = new TimelineMax(); timelineChain1.to("#timeline-1 .el", .2, {autoAlpha:1}) /*STEP 1*/ .to("#timeline-1 .el", .2, {scale:.8, repeat:-1, yoyo:true}) /*STEP 2*/ .staggerTo("#timeline-1 .el", .2, {x:-20}, .2 ); /*STEP 3*/ What happens: step 1 runs ok, then the timeline get stuck in the repeatition of step 2, so step 3 never happens. What I want: the infinity repetition to continue as the timeline goes on. Is it possible? Thanks and keep going!

Ok my question is sort of related to this so just put it out there for reference: https://greensock.com/forums/topic/14782-exportimport-timelinestweens-to-json/ I have been using fabric.js with GSAP to create an app to make animations. I have run into a problem where i need to save animation in the db. I am saving my canvas as a JSON. Then the way i went about saving the saving the timeline is by just saving the whole timeline object. I think the saving is working (tell me if I am wrong?) but I think its the fact that the timeline doesn't see the reloaded canvas and its objects as the same. ?? If so what about the ideal solution here. Btw I am very new to GSAP and I am using for my project and love it so far. The fact that I am new I could be missing something very obvious and so far the forums have been helpful with the answers already up and now I am hoping someone can help me with my mine. Thanks in Advance. Regards, Mr P

Hello, I'm new with greensock and rails. I found this demo http://codepen.io/GreenSock/pen/yhEmn very fascinating so I want to add it to my project. Then Firstly, I added the .html.erb file.  Then added css to .scss file  Then added js to .js file  added gem to gemfile  added require require/Tweenmax to js require tree  But the web page did't show any animation  Can anybody know how to figure it out? Thanks a lot.

Hello, I'm having two issues right now, which I cannot figure out. Issue #1 I have an animation in my CodePen using the first button, and when it finishes it's animation cycle it reverts the cssText back to it's original position. This is for a "preview" animation set up in my software. This will essentially revert back to the original position, so the user can modify their design layers, animation settings, etc, before playing their animation again. However, on the second run of this animation it seems the translated position is not working properly or some sort of caching mechanism is not recognizing the reverted cssText. It gets stuck to the left of the box where it was on exit. To give more details on this, my design software works based off finished designs, and once a design is finished the user can choose to have things enter the screen at different timings (as well as optionally exit after) I provide entrance, exit animations and in this case it rotates in from left, and rotates back out to the left. If you need more clarification, let me know. Issue #2 I'm having an issue with setting up a timeline without automatically playing. I've added the flag "paused: true" in the TimelineMax options, but what this does is begin positions for the element where the TimelineMax.from() defines, rather than keeping the element in it's ending position until we trigger play to run. I use a chained method in my code prepareAnimationTimeline() which should add all the timings, animation tweens together but returns the timeline object back ready to play, while not moving my elements. I use it like this: prepareAnimationTimeline().play() However if I do not call play, with paused: true, it will simply move my elements off screen in their starting positions for my entrance animations. (TimelineMax.from()) Is there any way to achieve what I'm looking for, where I keep elements on the screen and "prepare" my animation timeline in the fashion I mentioned above? Thanks, Justin

Hello there! I'm using TimelineMax to make a sequence for 3D objects using Three.js. So far so good, when working with numerical properties of objects. But I'd like to set true/false properties and use the state of the timeline. I know I can do my own functions (onComplete, onStart,...) but that requires me to keep control of the state while the timeline is playing, which is similar to create my own timeline function. The idea is to be able to scrub the playhead. So I used .set, both in TimelineMax or TweenMax to no luck. For instance: tm = new TimelineMax({align: start}); tm.add( new TweenMax(camera.position, 10, {x:100, y:100, z:100}), 1); //Works well tm.set(target, { visible: false }, 4); //Doesn't work tm.add( TweenMax.set(target, { visible: false, immediateRender: false, delay: 4}, 0); //Neither tm.add( TweenMax.set(target, { visible: false, immediateRender: false}, 4); //Neither Any ideas? Thanks

Hello, I have no code pen URL for this question, because I don't know if I can get this in there without importing most of my animation framework, etc. This is really a question of how to accomplish this in your framework. Background Details I have a configuration file in PHP which provides the details for each Tween animation, and I've specified friendly names in my code to give me details of the animation. I'll post an example of one of the animations in the end of this post so you can see the fields, structure I provide. I have a JSON object below which represents how I format my object before passing it to my functions to animate. { "entrance":{ "900":[ { "layerId":"HLS2-3033-N25V", "animation":"bounceInLeft", "speed":0.49, "time":900, "easing":"Power1.easeIn" } ], "1700":[ { "layerId":"5MBE-0R7G-65NK", "animation":"zoomInDownRotate", "speed":0.9, "time":1700, "easing":"Power4.easeOut" } ] }, "exit":{ "4800":[ { "layerId":"HLS2-3033-N25V", "animation":"slideOutLeft", "speed":0.49, "time":4800, "easing":"Power1.easeIn" } ], "6900":[ { "layerId":"5MBE-0R7G-65NK", "animation":"slideOutLeft", "speed":0.9, "time":6900, "easing":"Back.easeInOut" } ] } } This array above is sorted by Entrance and Exit animations, and in each of these I have indexes by MS timings from 0 - 10000 (0-10s) I obtain the animation details using the name, and it returns in a structure like below, which I use to produce my single animation on one element nicely. { "name":"bounceInLeft", "type":"Bouncing", "stageType":"entrance", "defaultDuration":0.35, "defaultEasing":"Power1.easeOut", "series":[ { "x":"{elementOuterStartLeft}", "opacity":0, "duration":0.8, "ease":"Elastic.easeOut.config(.85, 0.4)" } ] } So with these 2 pieces, I run my animation for a single layer using TimelineMax and then I loop through the series of the animation keeping the first index using timeline.from() with my parameters, while any other index in the series array is using timeline.to() My question is this: Knowing when each of the animations are going to begin, using the MS indexes in my above format, can I "schedule" the tweens to play when the MS is reached in the 0-10s interval? How would I implement this using purely your framework? I would essentially add a from/to for each animation series item, whenever the animation is called and it's timing matches the current point in the 0-10s interval. I'm trying to utilize this similar to the example on your CodePen : http://codepen.io/GreenSock/pen/zinsg so that I can control pause, play, and the timing range for the animation as a whole (for all my elements being animated) Let me know if you need further clarification. Thanks, Justin

Hi, Im new here. Can you help me? Im would like to call function in this way. Is it possible? How? .to('.col-box:nth-child(3)', 1, {opacity: 1,delay: 0.2}, 0) //a call function .to('.col-box:nth-child(4)', 1, {opacity: 1,delay: 0.3}, 0) .to('.col-box:nth-child(5)', 1, {opacity: 1,delay: 0.4}, 0) Thanx

Hello, I've set up a demo CodePen below, which was set up with an element (similar to our Design application's element structure) with an already defined rotation matrix on the parent element we are transforming. CodePen URL: http://codepen.io/jbevan2007/pen/RKKVrW We've added various transitions such as slideInLeft, slideInLeftRotate, and others which provide entrance and exit animations to our canvas/scene within a 10-20s window of animation. We set these up similar but customized from Animate.css and the basic animations they use. Our elements are rotated in absolute position, some using transform matrix to merely control rotation. Our positioning is controlled via left/top CSS properties. Our issue: When we apply the transform with left (outside canvas) tweened to 0, (maintaining our original left/top in parent), we lose our rotation matrix. One of my solutions was to apply the matrix and animation to the inner layer, and this works well to keep our rotation as expected. The issue with this solution, is that our starting point is not coming from left direction due to having a transform within another transform. You can see this occur with the second button in the CodePen demo. Is there any way we can achieve this, while maintaining our rotation at completion of animation? Please let me know if you have any questions or if you did not understand my request. Thanks, Justin

I have a button that when clicked, triggers my timeline to play. There is no delay on start and on the first click it works fine. On subsequent clicks, it takes time for the animation to start. Any idea what I'm doing wrong? I've tried triggering the animation with just TL.restart() and also having an onComplete function that sets the timeline's progress to 0 and pauses it. Any idea how I remove that delay on subsequent clicks? Code here: var tl = new TimelineMax({paused: true, onComplete: resetTl}); TweenMax.set('.fab', {perspective: 200}) tl.to('#sendplane', 1, {rotation: -20, opacity: 0, x: '+=100', ease: Elastic.easeIn.config(1, .9), onComplete: resetPlane}) .to('.fab', .25, {scale: 1.2, boxShadow: '0px 7px 15px rgba(0,0,0,0.1)'}, '-=.8') .to('.fab', 2, {rotationY: -360, ease: Elastic.easeIn.config(1, .9)}, '-=1.8') .fromTo('.checkmark', .5, {drawSVG: '0%'}, {drawSVG: '100%'}) .to('.fab', 2, {rotationY: 360, ease: Elastic.easeIn.config(1, .9)}) .to('.checkmark', .2, {opacity: 0}, '-=1.1') .to('#sendplane', 1, {x: '+=100',opacity: 1}, '-=.4') .to('.fab', .25, {scale: 1,boxShadow: '0px 0px 5px rgba(0,0,0,0.3)'}) function resetPlane(){ TweenMax.set('#sendplane', {x:'-=200', rotation: 0, opacity: 1}) } function resetTl(){ tl.progress(0) tl.pause() } document.getElementById('fab').addEventListener('click', function(){ tl.play() //I've also tried tl.restart() and it still has a delay. })

Hi I would like to create an animation where the text slide ups vertically to be replaced with some coming in from below. I would like this to happen on a loop. Here is a codepen for where i've got to so far, before getting stuck http://codepen.io/emilychews/pen/qRENKR The problems I have are: i) The last tween on the timeline seems to be setting the first text div lower in its container prior to the animation starting (you may need to refresh the page to see this properly). When the animation starts this does correct itself, but I need to find out how to prevent this. ii) I can't work out how to loop the animation properly. I currently have it repeating with the {repeat-1} property set on the main timeline, but this isn't a true constant loop. I can't work out how to have it so the text on screen always moves up when leaving and always comes in from the bottom when arriving (this is proving particularly problematic at the end of the animation). Any help would be really appreciated. Many thanks, Emily.

Hi, I have many TimelineMax animations either running at the same time, or not running at all; is it possible to create an event that will be called everytime any timeline is ticking, and get the timeline that is ticking in that event? an alternative would be to set a simple javascript setTimeout call but only if I can tell if there are currently no running animations; is it possible to check if ANY timeline is currently running? Thanks, Elior

Hi guys, As you can see in my codepen, I have a couple of svgs that have a filter applied. I would like to be able to apply the tweens I stored in the "addClass" and "removeClass" variable to specific id elements. How would I be able to achieve this? So that I can toggle the saturation. Any ideas? Thanks!

I created a master timeline so my 6 timelines animate one after the other when the page is loaded. I would like each separate timeline to animate separately on mouse enter. I can manage to do either one of the above but not both. I've got to achieve this using setTimeout function to animate on load. But I would prefer staying with GSAP for this. How can I achieve this. Please note that I am very new at this!

Hi everyone, I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is. What I tried: When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused? Timeline.progress has not worked, but clearProps: drawSVG did fix it (although obviously I can't clear the drawSVG on init). Any help would be hugely appreciated. Thanks! PS. Sorry a codepen isn't included. I don't have a PRO account so I couldnt upload GSAP to it. LMK if you'd still like me to create it if it makes it easier for you to debug. $playButton.each(function (index, elem) { $this = $(this); var $circle = $this.find('#play-icon__circle'); var $caret = $this.find('#play-icon__caret'); TweenMax.set($caret, {transformOrigin:"50% 50%", scale: 1}); TweenMax.set($circle, {opacity: 1, rotation: "-90", transformOrigin:"50% 50%"}); var playButtonTimeline = new TimelineMax({paused: true}); playButtonTimeline .fromTo($circle, .3, {drawSVG: 'true', opacity: 1}, {opacity: .5, drawSVG: '100% 100%', ease: Expo.EaseOut}) .set($circle, {rotationX: -180}) .fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut}) .to($caret, .2, {scale: .7, ease: Expo.EaseOut}, '-=.4'); $this .mouseenter(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.play(0); }) .mouseleave(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.reverse(0); }); });

Hi there, I'm experiencing a problem where I'm trying to have 2 items animate at the simultaneously in a timeline. No matter how much I set the time of the tween, it seems to still be playing in sequence rather than simultaneously. Anyone know whats up? Thanks!

Hi, I created this page several months ago and everything was working great on all major browsers. Now when I check it on chrome and click on "See their time fly", it will start the animation and look good until it starts to render weird and only show part of a photo. Eventually it just kind of breaks. Do you have any idea why this is happening? This page continues to work great on Safari and Firefox. Here is my code: var photoItem = $('.photo_item'), groupOne = $('.group-one .photo_item'), groupTwo = $('.group-two .photo_item'), groupThree = $('.group-three .photo_item'), groupFour = $('.group-four .photo_item'), groupFive = $('.group-five .photo_item'), beforeLastPhoto = $('.photo_item.mod-before-last'), pulseEl = $('.photo_item.mod-last'), lastPhoto = $('.photo_item.mod-last'), currentItem = 0, rotateValues = ["-20deg", "20deg", "-10deg", "10deg", "0deg"], widthOffset = 100, heightOffset = 100, containerWidth = $('.photos').width() - widthOffset, containerHeight = $('.photos').height() - heightOffset, masterTimeline = new TimelineMax(), replayTimeline = new TimelineMax(); Draggable.create(photoItem, {type:"x,y", edgeResistance:0.2 }); $('.js-btn').one('click', function(){ start(); }); $('.js-restart-btn').on('click', function() { restartTimeline(); }); function start() { $('.js-btn').addClass('is-not-visible'); $('.js-restart-btn').addClass('is-visible'); masterTimeline.set(photoItem, { clearProps:"zIndex" }) .add(beginGroupOne()) .add(beginGroupTwo(), "-=.7") .add(beginGroupThree(), "-=.5") .add(beginGroupFour(), "-=.3") .add(beginGroupFive(), "-=.05"); } function beginGroupOne() { var tl = new TimelineMax(); groupOne.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupOne, 1.25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .5, 0); return tl; } function beginGroupTwo() { var tl = new TimelineMax(); groupTwo.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupTwo, .75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .3, 0); return tl; } function beginGroupThree() { var tl = new TimelineMax(); groupThree.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupThree, .5, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .2, 0); return tl; } function beginGroupFour() { var tl = new TimelineMax(); groupFour.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupFour, .25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .1, 0); return tl; } function beginGroupFive() { var tl = new TimelineMax(); groupFive.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupFive, 1.75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, 1, 0); tl.to(beforeLastPhoto, 1.75, { x: -65, y: 115, xPercent: 0, yPercent: 0, scale:1, rotation: -20, autoAlpha:1, ease: Expo.easeOut }, "-=.5") .to(lastPhoto, 1.75, { x: 0, y: 0, xPercent: -50, yPercent: -50, scale:1, rotation: 10, autoAlpha:1, ease: Expo.easeOut }, "-=.5") .addCallback(finished, "+=1"); return tl; } function moveOff() { var tl = new TimelineMax(); tl.to([groupOne], 1.5, { yPercent: -1000 }, 0) .to(groupTwo, 1.5, { xPercent: -1000, }, 0) .to([groupThree, beforeLastPhoto], 1.5, { yPercent: 1000 }, 0) .to([groupFour, groupFive, lastPhoto], 1.5, { xPercent: 1000 }, 0); return tl; } function finished() { pulseEl.addClass('is-animating'); } function restartTimeline() { masterTimeline.set(photoItem, { clearProps:"zIndex" }) pulseEl.removeClass('is-animating'); replayTimeline.add(moveOff()) .addCallback(restart); } function restart() { masterTimeline.restart(); } function getRandomRotate() { return rotateValues[Math.floor(Math.random() * rotateValues.length)]; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

I've created a series of animated icons. See in the codepen. on the end of the timeline i have added a tween to ramp the speed up as the timeline progresses. var NUM6Timeline = new TimelineMax(); NUM6Timeline.staggerFrom(".SET6>g", 0.7, { opacity:0,}, 0.15) .from(".top6", 2.4, {x: '-22%', y: '22%', opacity:1, },0.0) .from(".shd6", 6, { opacity:0}, 0) .from(".sticker", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM6Timeline, 2.5, {progress:1, ease:Power2.easeIn}); Because the end tweenlite is not part of the timeline when I come to repeat the timeline, i lose the tween light. Could someone help me nest NUM6Timeline in a new timeline so I can include the progress tween. This master timeline I should then be able to loop on my page and included the ramped up animation. Kind regards, Ryan

It may look simple (to you guys it's a no-brainer) but I've managed to get two animations working over the weekend (yeah, it took me that long). If you get a chance and need a laugh, can you take a look at what I've written and tell me how I could have done it better please. 1) blinking light. Scope: Flash button to indicate to a visitor that there is a button they can press. I have two imaged (button off, button on) I want button on to be animated so as it turns on quickly then fades out. When someone hovers over the button, the animation should stop and go back to the beginning (so as the on state is fully visible) then restart when hover out. The only down side about my current implimentation is that when you hover over one of the buttons, all the other buttons pause and restart. I'm guessing I'll have to have id's for each button (rather than using the class name) and create timelines for each. <p>flash / blink</p> <div class="press"> <div class="here"></div> </div> <p>in reality the above are transparent pngs</p> .press { background-color:blue; width:50px; height:50px; position:relative; } .here { background-color:red; width:100%; height:100% } var pressTween = new TimelineMax({repeat: -1}); pressTween.to(".press .here", 1.5, {alpha: 0}) .to(".press .here", .5, {alpha: 1}); $(".press .here" ).hover( pause, start ); function pause(){ pressTween.pause(); pressTween.seek(0); }; function start(){ pressTween.play(); }; 2) Alternate flashing lights: This is where I need some help, Basically I want two square waves running in parallel with each other, one off-on-off-on etc the other, on-off-on-off etc. I'm sure I could do in on one timeline but I just couldnt get it to work no matter what I tried. The only way was to have two time lines. <p>square wave</p> <div class="box red" id="seoTicker"></div> <div class="box blue" id="seoTickerHover"></div> <p>in reality the above are transparent pngs</p> .box { width:50px; height:50px; position:relative; margin-bottom:2px; } .red { background-color:red; } .blue { background-color:blue; opacity:0; } var seoTween = new TimelineMax({repeat: -1}); seoTween.to("#seoTicker", 0.1, {alpha: 0, delay:1},0).to("#seoTicker", 0.1, {alpha: 1, delay:1}); var seoTween2 = new TimelineMax({repeat: -1}); seoTween2.to("#seoTickerHover", 0.1, {alpha: 1, delay:1},0).to("#seoTickerHover", 0.1, {alpha: 0, delay:1}); The linked codepen shows them both working albeit with blocks with background colours compared to transparent PNGs in real life Cheers, in anticipation of any advice you can offer (as long as the advice isn't to give up the day job ).

Hi, any help would be great right now. http://codepen.io/Ryan84/pen/aBBVWg?editors=1010 I don't want to fade on the numbers but instead run a timeline I have built for each number. these are included in the JS. They look like this: 1 http://codepen.io/Ryan84/pen/zooKZK?editors=1010 2 http://codepen.io/Ryan84/pen/JbbRXE 3 http://codepen.io/Ryan84/pen/xRREVR 4 http://codepen.io/Ryan84/pen/qqqaNr 5 http://codepen.io/Ryan84/pen/MbbjjW 6 http://codepen.io/Ryan84/pen/XNNjNd?editors=1010 At the moment when point 1 is clicked im saying fade on number one and hide all others. Ideally I want this to run when clicked:(instead of a fade on) var NUM1Timeline = new TimelineMax({paused: true}); NUM1Timeline.staggerFrom(".SET1>g", 0.8, { opacity:0,}, 0.18) .from(".top1", 2.4, {x: '-22%', y: '22%', opacity:1,},0.0) .from(".shd1", 6, { opacity:0,}, 0) .from(".blk10", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); Any help would be really appreciated. Kind regards, Ryan

I've added some code to allow the timelne start slow and end fast. I want to put this on a master timeline with others. If you uncommnet out my Master timeline you will notice the time line tween no longer takes effect TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); I 'm clearly doing something wrong as this is not adding to the master timeline as I would like. any help would be much appreciated Ryan

I'm having trouble sequencing multiple timelines. I don't want the the second timeline (NUM6Timeline) to be visible till layer 1 has complete. I need to do this on 6 timelines but have just included 2 timelines in this codepen. ideally I would also like to fade out timeline1 before the next happens. When I try with 6 I get in a right mess and not having much luck with 2 either.. any help would be much appreciated. I've noticed i also lose the the ease on the second timeline (NUM6Time) so the animation loses its gradual build up regards, Ryan