Search the Community

Is there a simple way with TweenLite, to disable all ease? Or rather does TweenLite have a built i default ease, such as Linear or other? - that I can disable. Thanks ".S"

Hoping this is an easy one for you guys... I just couldn't find an example or reference to pull from. I understand the use of labels and offset timing. Also understand the use of adding an offset to subsequent labeled tweens. What I can't seem to figure out, is how to add an offset to the FIRST tween of a labeled sequence... in other words, using the code below, how to I add an offset of say, +=0.5 to the label of item2 so that items 3 and 4 fire at the same time? tl.to(root.item1, 0.75, {x:100, ease: Expo.easeOut}) .to(root.item2, 0.75, {x:100, ease: Expo.easeOut}, "go") .to(root.item3, 0.75, {x:100, ease: Expo.easeOut}, "go") .to(root.item4, 0.75, {x:100, ease: Expo.easeOut}, "go"); I want to think it's something like this, but doesn't seem to work: tl.to(root.item1, 0.75, {x:100, ease: Expo.easeOut}) .to(root.item2, 0.75, {x:100, ease: Expo.easeOut}, "go+=0.5") .to(root.item3, 0.75, {x:100, ease: Expo.easeOut}, "go") .to(root.item4, 0.75, {x:100, ease: Expo.easeOut}, "go"); I can work around it by hardcoding the offset on each tween, but I'm sure there's a more flexible way. Any help is appreciated! Thanks -BK

Hi I recently joined and have read some very helpful posts and have got an audio file playing in synchronization with a timeline. What I need specifically is audio with a scrub bar being synchronized with a series of animations which have their own scrub bar. In the code I have put together I have the audio playing and the animations running for the duration of the sound file and I have a scrub bar for the audio and animation which are synchronized together. The problem I have is that the animations are not moving smoothly but are shaking back and forth. I think this is to do with the rate at which they are being updated and I believe things can be improved by using the TweenLite.ticker or the TweenMax.ticker but I am not sure of the best way to implement them. Can you help me to smooth out the movement of these animations. The codepen is here: http://codepen.io/anon/pen/GjWJKA Many Thanks Pebble

Hello GreenSock Masters! I want to collect and recognized all the plugins out there! If you have unofficial plugin for GSAP please comment it or reply it to this forum thread. My Unofficial Plugin for GSAP https://github.com/WarenGonzaga/AnimateCSSPlugin This is not actually plugin built because I rely on GSAP ease animations and some GSAP related variables. Anyway if you have something to share with go ahead and comment it/reply it! Thanks GreenSock Forum

Hello, I noticed that when I chain animations with .to , sometimes if two animations start at the same time, there can be a slight jerk in the animation, even if I do the rotate:0.01 trick for Firefox, etc. Question, is it perhaps 'smoother' or 'faster' rendering wise, to in those cases create multiple instances of TimelineLite, for example two instances, to ease the stress that one instance carries when starting two animations at a simultaneous time index. I'm not including any code since I trust the question is a simple one, since it is simple to start to animations the same time by just giving them that time index at the end of the to. (object, time, {property: value}, 'timeindex') Snoop out

Keeping in mind am using the Meteor framework... Currently, when i click on a specific button on my page, it redirects/loads to the intended page being a template. My desire is to use (timeLineLite() ) to animate the intended page (template) by sliding it into the main page. Is this possible to do? If so kindly show me how to. My codepen link where I indicate the issue is: http://codepen.io/SirBT/pen/ORVyBq Thanks in advance

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?

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);

Hi there - I have an animation using tweenlite to tween some divs that contain png w transparent backgrounds. This looks great in all browsers expect IE8 there are blackout lines around the pngs. I know there are fixes for jquery fades and whatnot in IE8 for transparent PNGs, however none of the ones i've tried work on my file. Here is the timelinelite doing the tweening: var tl = new TimelineLite(); tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.6, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) ; and here is the css #lens_flare1 { opacity:0; position:absolute; left:22px; top:5px; background:transparent url('images/lens_flare.gif') no-repeat; width:59px; height:53px; } #lens_flare2 { opacity:0; position:absolute; left:73px; top:10px; background:transparent url('images/lens_flare.png') no-repeat; width:59px; height:53px; } #lens_flare3 { opacity:0; position:absolute; left:118px; top:21px; background:transparent url('images/lens_flare.png') no-repeat; width:59px; height:53px; } #lens_flare3 { opacity:0; position:absolute; left:118px; top:21px; width:59px; height:53px; background:transparent url('images/lens_flare.png') no-repeat; } #lens_flare4 { opacity:0; position:absolute; left:233px; top:50px; width:59px; height:53px; background:transparent url('images/lens_flare.png') no-repeat; } Any tricks for this? Apologies for not posting to Codepen but have super limited time at the moment to get setup on that - Any help is greatly appreciated. ~julia

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!

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.

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

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!