Search the Community

HI! I want to convert timeline lite elements with their animations into canvas animation, I mean the whole dom element and its children that contains timeline lite animations. an animation like this one http://codepen.io/ihatetomatoes/pen/QboVVV is there way to do that? I've found some libraries that only take a screen shot of the page but no animations.

Dear All, i have seen this tutorial where the animation can be controled by the input value of a slider. http://greensock.com/sequence-video I have a variable definde in my code which has a value between 0 and 1. Is it possible to control the progress for the animation with the value from this variable?

is there anyway to set timeline duration regardless of each tween duration in timelinemax? i used this trick tl.set({}, {}, 15); but it only works when time line length is less than the new value

Here's a question: Why does the parent timeline fires its "onComplete" before the children? Am I missing something here?

Hi folks ! I'm stuck with the following code about tl.seek, can't go further from 17 seconds, I have to wait for the animation to complete to see what remains to be animated. It occurs when first "onComplete" starts... I tried to add following functions with "tl.add( percent( ) );", but it becomes messy and doesn't work at all with message : "percent is not a function" in console. That's why all the last parts of the animation are in the percent function. I also wanted to put the animation controllers from Timeline, but can't figure out how to make it properly for the whole timeline without destroying all the stuff... Any help will be welcome, thanks !! (function($){var tl = new TimelineMax(); leaderboard = $('.leaderboard'); tl.add( loadIntro() ) .add( loadContent() ) .add( leaderBoard() ) //here I tried to: .add( percent () ) <<< DISPLAYS "isn't a function in console" //tl.seek(17); //set play cursor <<< DOES NOT WORK AFTER leaderBoard function (as 18 and after) function loadIntro(){ var tl = new TimelineMax({repeat:1, onComplete: loadContent}) otherVars; tl .to(leaderboard,0,{autoAlpha:0}) .etc; return tl; } function loadContent(){ var tl = new TimelineLite() otherVars; tl .staggerFromTo(square, 0.5,{scale: 0.2, ease:Expo.easeOut},{scale: 1.1},0.12) .etc; return tl; } // Main Timeline function leaderBoard(){ var tl = new TimelineLite({onComplete: percent}) otherVars; TweenLite.set(target, {opacity: 0}); etc; tl .staggerTo(target, 0.7, {autoAlpha: 1, scale: 1,delay:0.2}, 0.5) .etc return tl; } function percent(){ var tl = new TimelineLite(), otherVars; function add20() { TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=111", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone}) } function add40() { TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=189", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone, delay:4.5}) } function add60() { TweenLite.to(game, 1.4, {autoAlpha:1, score:"-=194", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone, delay:8.8}) } function add80() { TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=94", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone, delay:13}) } function updateHandler() { scoreDisplay.innerHTML = game.score; } add20(); add40(); add60(); add80(); tl .add('percent') .to(jauge, 1.4, {autoAlpha:1, left:0, ease:Power4.easeNone}, 'percent') etc return tl; }; })(jQuery);

I have created multiple timelines with have different labels. Is it possible to call these labels using a main timeline? example: tlText.add("tekst4"); tlText.to(textSlides[3], transitionDuration, { opacity: 1, y: "+=100" }) tlText.to(textSlides[3], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[3], { y: "-=100" }) tlText.pause(); mainTimeLine.add(tl) mainTimeLine.add(tlText.play("tekst4"));// like this? mainTimeLine.add(removeDevicesTL,5); I want to use the main timeline to controll all the others? Or is the best approach to just make it all on the same timeline and stop the animation from the start and use the tweenFromTo()? This last approach seems to unorganized. Thanks in advance for the help

I have a sequence of Tweens in a timeline that are staggered by 0.2 seconds. I want them to start 2 seconds early (before the white box fades out) How do I get dot2 to follow dot1 sequentially? Thanks

Hi everyone! So I asked a question similar to this one before, but I think it was too broad so this is my attempt to clarify. I'm using Adobe Animate CC for a college project where I'm creating an "Interactive Comic." I'm very new to all this stuff and I've been confused about a lot of things. So I have several different scenes in this project. Each scene is a movie clip Symbol with several other movie clips that play in a certain order once the scene is initiated. To put it simply, the general idea is the user will click a button on the to make the scene play, and then click the "next" button to switch to the next page. There might be some additional buttons within each scene, but I'll work on that later. I'm assuming that most developers don't use Fla files anymore because it's been IMPOSSIBLE to find examples of how to do this on the internet, even though it seems like a pretty basic idea. So when I found TimelineLite I was hoping it could help me out because timing all these events manually with keyframes has been really challenging. So my question is how can I use TimelineLite to create an outer timeline that is controlled by buttons, which inner timelines that have events playing one after another? Can anyone give me an example of how to do this? The only examples I've seen of TimelineLite so far are with simple symbols and I'm wondering what changes when there are nested symbols and timelines. Also, does the fact that I'm using Actionscript instead of JS mean I can't use the code for TimelineLite that I've seen in examples? As always, any help is tremendously appreciated. Thanks!

Todays last question Is there a way that when I reverse an animation I can choose for it not to run until the very beginning (seeing as there is a way that I can reverse from before the end of animation). I tried the following since I wanted the 'reversed' version of the animation to stop 2 seconds from its beginning (otherwise it fades out to blank). But it didnt work. var callbk = tl.eventCallback("onComplete", doReverse); function doReverse() { tl.reverse(); timeline.addPause(2); } Perhaps there is a way I can continually listenfor progress during the reversal and break/pause at a certain time? Ideas welcome, in your own time. I'm done for today!

Hello again Looking at the documentation and having used it a lot in the past days, it seems to me that TimelineLite can almost always be used. Since from your own example it can be written in two ways:= //add another tween at the end of the timeline (makes sequencing easy) tl.add( TweenLite.to(element, 0.5, {opacity:0}) ); //append a tween using the convenience method (shorter syntax) and offset it by 0.5 seconds tl.to(element, 1, {rotation:30}, "+=0.5"); The second way above is very similar to how you would write if using TweenLite.to( etc...) So I wonder if there's any good reason to not always use TimelineLite- it seems to inherit the same callbacks too ? Thanks in advance .S

Hello Again The following works nicely var tl = new TimelineLite(); var $frame1 = document.getElementById('frame1'); var $txt1 = document.getElementById('txt1'); var $txt2 = document.getElementById('txt2'); tl.set($txt2, {opacity:0}) tl.add( TweenLite.to($frame1, 1, {alpha:1}) ); tl.add( TweenLite.to($frame1, 1, {backgroundColor:"#ff6a6a"}) ); tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) ); tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}) ); tl.add( TweenLite.to($txt2, 1, {alpha:1}),"-=2" ); tl.play(); It works: my last timelinelite addition happens with intended overlap. But what if I would like to have the alpha begin to fade out as I shrink the text of the same object. This won't work: tl.add( TweenLite.to($txt1,1,{scaleY:0, ease:Elastic.easeOut},2) ); tl.add( TweenLite.to($txt1,1,{alpha:0, ease:Elastic.easeOut}, "-=2.5") ); I tried with a few different values just to make sure it is not the numbers. Is there a way I can do an overlap in tweening of the same object: should I perhaps default to the old skool delay method here and so not put it as a timelinelite parameter but "bake it in with the TweeLite. Thanks again .S, over coffe

I'm very new to GreenSock as well as Adobe Animate and I'm trying to get a handle on how everything works. After reading up on TimelineLite, I'd love to use it for my entire project because it sounds way easier than trying to figure out all the timing myself. But I'm not sure if I can use this feature for ALL my tweens, or only those tweens that can be controlled by GreenSock. For example, let's say I have 3 objects on the stage, with instant names mc1, mc2, and mc3. Let's say that mc1 and mc2 are just moving around with GreenSock, but mc3 is a complex shape tween that takes 100 frames to complete. Could I still use TimelineLite to make it so that mc3 starts right after mc2 ends? If so, could someone give me an example of how to do that? Secondly, it is my understanding that GreenSock tweens can control these features: positioning, movement, color, timing, fading in and out. Is GreenSock used for anything more complex such as drastically changing the shape of a vector image, or a complex motion tween? If so, does anyone have any examples of such instances? Thanks for your support. Any information that could answer my questions or just quickly give me a better understanding of how to use GreenSock for my animation would be greatly appreciated.

Hallo, I've tried the follwing code: var i = 0; var tl = new TimelineLite({ onStart:function() { i++; if (i <= 2) { this.set({}, {}, '+=1.0'); this.to("#firstitem,#seconditem", 1.0, {autoAlpha: 0,ease:Power1.easeInOut}); } },onComplete:function() { if (i <= 2) { this.restart(); } } }); tl.from("#firstitem", 1, {autoAlpha: 0, x:100,y:-100,scale:3.0,ease:Power1.easeInOut}); tl.from("#seconditem", 1, {autoAlpha: 0, x:50,y:-50,scale:3.0,ease:Power1.easeInOut}); // ... and so on But it won't work. The first time OnStart is fired it changes the timlines for all following loops, included loop 3. Thats what I'm trying to get: After every loop all animated elements has to fade out, except for the last loop. All animated elements should stay. Because of filesize I have to realise this with TimelineLite. Thanks for your help! Beste regards Christi4n

Hello I have a simple timeline set up with 6 steps, no nested timeline or anything, and each step has a label. At the moment I can tween to and from labels (while watching the animation play out in either direction) by using tweenFromTo. The problem with that is some steps are quite long, and I'd like to go from one step to another in a defined duration. Is this possible? For example, can I tweenFromTo label1 to label3 within X amount of seconds? The closest thing I have come across is setting a timescale to a high number, but that's not really a solution and it'll be inconsistent as the time between each step varies quite a bit. Thanks for any help

I'm trying to always have a div start at the left edge or right edge of another div, then move to the center. The issues I'm having are - • you can't have the same animation run twice in a row, you have to alternate between left and right * after the initial animation, each following animation start at a distance from greater than the value of 'from' in the 'fromTo' timeline. Any ideas? <div class="outer"> <div class="inner"></div> </div> .outer { background-color: tomato; width: 400px; height: 300px; position: relative; } .inner { background-color: black; width: 100%; height: 30px; position: absolute; top: 50px; left: 0; } let one = document.querySelector(`.one`), two = document.querySelector(`.two`), three = document.querySelector(`.three`), four = document.querySelector(`.four`), div = document.querySelector(`.inner`); one.addEventListener(`click`, () => { let tl = new TimelineLite({paused: true}); tl.fromTo(div, 2, {left: `-100%`}, {x: `100%`}) .play(); }); two.addEventListener(`click`, () => { let tl = new TimelineLite({paused: true}); tl.fromTo(div, 2, {left: `100%`}, {x: `-100%`}) .play(); });

I am using TimelineLite to animate a banner but I'm not able to do the banner stay in looping. The animation is working just fine but the restart line doesn't work. Someone help me please? 300x250 2.zip

I created a simple timeline following a tutorial, but the animation doesn't run and I keep seeing this in the console: Uncaught ReferenceError: TimeLineLite is not defined Here's my pen: http://codepen.io/omarel/pen/mPEmpe

I have a timelineMax that calls a pause function on another timeline. Right now the function is called and the timeline (a looping sprite sheet) stops immediately. Because this second timeline is a looping sprite animation, I'd like to have it ease to a stop instead of just stopping. Is this possible? Here's some sample code: //THIS IS THE LOOPING SPRITE ANIMATION var TL = new TimelineMax({repeat: -1, repeatDelay:-1}); TL.to("#car", 0.4,{backgroundPosition:"-800px 0", ease:SteppedEase.config(4)}); TL.set("#car", {backgroundPosition:"0 0"}); TL.to("#car", 0.4,{backgroundPosition:"-800px 0", ease:SteppedEase.config(4)}); //THIS IS THE MAIN TIMELINE tl2 .to("#car", 2, { scale:.5, x:"115", y:"-10", ease:Power3.easeOut},"-=.75") .addCallback(stopWheels, 10, {ease:Power3.easeOut}) function stopWheels() { TL.pause(); // ** WOULD LIKE THIS TO EASE OUT TO A STOP } Thanks!

Good afternoon, I've been working on this animation to show a number rolling into view, as you might see on a digital altimeter. My solution was to add pauses in the timeline so that the rolling number would pause for a moment when changing over. The animation works as I would like it to at first, but when the animation begins to repeat, it appears to ignore the .addPause's that I have added. I'm hoping that there may be a more elegant solution to my desired animation, or that someone may be able to help me understand why the pauses disappear when the timeline repeats. Thanks!

Hi, I extract a part of an animation in the Codepen. If you read the animation (drag to the right) it's OK, but when you drag to the left, the element is visible. Why ? Is it a bug or a feature ?

I have created a "pulse" animation using two staggerTo animations on TimelineLite. Initial play works well. However, restarting the timeline (on hover) plays all animations at once. I suspect it ignores initial delay values created by staggerTo? What am I doing wrong? Is there a better way to create this animation?

Hello, What I am trying to do is combine the DrawSVG plugin with this awesome pen, so that a line can be drawn based on the location of the browser scrollbar. Ultimately I would like to make the dotted line reveal with the rocket ship, so that it appears as though the rocket is leaving the line as a tail behind it. What I hoped to do was create 2 timelines so that I could match up the timings of the rocket and the line reveal. What I can't seem to do is get the DrawSVG plugin to respond to the custom code which links up the timeline to the scrollbar. I was also thinking there might be some simpler way to do this by revealing the line with a mask, but I was not able to find any methods which might work with the browser scrollbar. I'd really appreciate any tips, similar projects, or help you might be able to give. Thanks a ton, Savana

var tl = new TimelineLite(), feed = $('.feed'); tl.to(feed, 0.35, { alpha: 0, ease: Power3.easeInOut, onComplete: function(){ feed.empty().html(response); }}); Can anyone tell me why this would fire immediately?

It seems that one of the advantages of nesting Timelines is so you can re-use an animation, but if I try to .add() or .append() a nested timeline twice, the first one is ignored and only the last one animates. I forked Carl's "Use .add() to Nest Timelines" codepen (thanks Carl, you rock) and simply repeated one of the .add() lines, changing the JS from: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) .add(box3Timeline); to: var masterTimeline = new TimelineLite(); masterTimeline .add(box1Timeline) .add(box2Timeline) // this won't animate when there's a duplicate below .add(box3Timeline) .add(box2Timeline); // comment this out and the earlier one will animate But apparently if you repeat any nested timeline .add(), the first instance will no longer animate, only the last one will. Also I noticed that the parent timeline does wait for the duration of the nested timeline as if everything's running fine, which makes me think it's some kind of rendering or overwrite issue. I'd love to understand what the problem is so I can figure out a solution or a workaround. Thanks!

Hey all! I'm trying to animate some pagination elements we have on a company site redesign and am running into some scoping issues (I think). I will start by saying my JS-fu is not great so it's highly possible this isn't so much a GSAP problem as it is a jQuery problem. You can see the core HTML / SCSS here - http://codepen.io/geebru/pen/avRbzw/ And the JS I'm attempting here: // Pagination // Get pagination items function pagerAnimate(play) { console.log("pagerAnimate Activated"); var $this = $(this); var pagerIcon = $this.find('.pagination__icon'); var pagerArrow = $this.find('.pagination__icon__arrow'); var pagerFill = $this.find('.pagination__icon__fill'); var pagerInfo = $this.find('.pagination__info'); var pagerTimelineCore = new TimelineLite(); pagerTimelineCore.to(pagerIcon, '.3', {scaleY: '2'}) .to(pagerArrow, '.3', {scaleY: '.5'}, '-=.3') .to(pagerFill, '.3', {x: '0'}); if (play === 'play') { console.log("pagerTimeline Play"); pagerTimelineCore.play(); } else if (play === 'reverse') { console.log("pagerTimeline Reverse"); pagerTimelineCore.reverse(); } } $('.pagination--previous').hover(function () { pagerAnimate('play'); }, function () { pagerAnimate('reverse'); }); $('.pagination--next').hover(function () { pagerAnimate('play'); }, function () { pagerAnimate('reverse'); }); Basically what I'm trying to achieve is to run the Timeline (forward or backwards) based on hover. The tricky part was getting the $(this) declarations per pagination (previous and next) and playing it forward on mouseIn and reversing on mouseOut. The console.log's in there are firing properly, but nothing is animating and I'm getting no errors. Any help would be awesome as GSAP is saving my butt on some of the designer requested animations on our site Thanks! PS - Apologies if this has been asked, but my Google-fu and searching here led me nowhere.