Search the Community

Hi all, I have been stuck because of this click function I want to work. Basically what I want to achieve is if you hover on the item the animation wil start and when unhover the animation wil reverse, this happens to work really good. The part i'm having problems with is the click function. if the user click on the button the div that is related to the button will be shown. Right now if the button is clicked the div will hide or not being shown. I think the reason for the related div not being shown is because of the Gsap animation. I could help some advice for keeping me in the good direction how I could make this work. see my codepen

Hi, Would 'onComplete'/'onStart' wait to fire upon 'screen refresh'? If not, how can I achieve this? Thanks, Andy. edit: So I explored this via code. Find below results (asking for block to appear for 100ms). Results imply 'onComplete'/'onStart' do fire upon screen refresh/new frame. Must say, the results make me nervous. Fingers crossed there is a bug in my code. Here is a codeOpen exploration. stat_descriptor  av  stdev  min  max start_dur  16.420999999999886  2.655742111278148  7.490000000000009  39.90499999999997 end_dur  93.43405000000013  8.488287613743891  63.65499999999997  101.95000000000073 start_dur, or 'time the code was started' makes sense. It's one refresh, after the item was asked to be placed on screen. edit2: approx 40 ms between max and min durations. Thats approx 2 refreshes. What you'd expect?

This is so simple that I have to be missing something easy. I'm setting the paragraph element to an opacity of 0; Then I'm splitting the text into words. I'm then just trying to stagger the words to an opacity of 1. I can't get this to work. I can make it staggerTo opacity of 0 but not the other way around. Here is my Codepen. http://codepen.io/trshelto/pen/YZQPwd/ TweenMax.set("p", {opacity: 0}); var text = new SplitText("p", {type: "words"}), words = text.words; var tl = new TimelineLite({delay: 1}); tl.staggerTo(words, 1, {opacity: 1}, 0.1);

Lets say I have a complex TimelineLite instance, which is maybe tweening some DOM elements' CSS properties but also is tweening some pure JS properties which are used in drawing on canvas. Any time one of those canvas related properties updates, I want to call a function that redraws the canvas, but if some of those tweens are overlapping, I want to be sure that I am not redrawing the canvas more than once per tick. Is there a baked in way to achieve this? Or is my best bet to have the drawing method be a pre-throttled method? Cons to that would be that the throttling is then set at a hard ms time, rather than at the current requestAnimationFrame rate.

Hi, I know how to call a function when a timeline animation is complete, but what if I want to call it in the middle of the animation? I want to call the displayContent() after the height=0 animation is called, how should I do that? var $outerBox = $selectedTab.parent('.standard-width'); var animate = new TimelineLite({ paused:true //onComplete:myFunction, //onCompleteParams:["param1"] }); animate.to($outerBox , .4, {height:0,opacity:0,ease:Power2.easeInOut}) .to($outerBox , .4, {height:100,opacity:1,ease:Power1.easeIn}) animate.play(); function displayContent(){ $selectedTab.css({display:'block'});// display selected tab }

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!

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

Dear all, how accurate is TimeLineLite? People advise to stick with setTimeOut() for accurate timing of visual elements on screen (http://link.springer.com/article/10.3758/s13428-016-0783-4, the actual pdf) and not to use external packages (which presumably would add bulk/unknown-inaccuracies). I see that you can measure timing in TimeLineLite in terms of ticks. This seems the ultimate way of controlling for timing. But are onscreen happenings guaranteed to stick to ticks? I've been using Greensock for years and would be so happy to use it again cheers, Andy. Edit: v relevant prev post here. Advises following setting to avoid inaccuracies: TweenLite.lagSmoothing(0)

Hello Fellow Greensockers, Here is a question for you How come that, when trying to create an instance of TimelineLite after that the javascript onload event fired, the following import gives me this error in Chrome:Uncaught ReferenceError: TimelineLite is not defined(…) <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.19.0_cfbff7d208ccfdbe176b9855af1eb1fa_min.js"> </script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.19.0_422f021fad4c20f20cf3640a06ac39e9_min.js"></script> Whereas this import does not <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.19.0_cfbff7d208ccfdbe176b9855af1eb1fa_min.js"> </script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script> Did my brain just die overnight ? Sorry, it is such a silly question. But as I recall I just need to import TweenLite to instantiate TimelineLite Thanks in advance, "S"

Hello, the below works, loading TweenMax from CDN <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script><script src="https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.18.5_6bbddbd910e8bfac4e19220fe52e1af6_min.js"></script> function initAnim() { var TL = new TimelineLite(); TL.from("#banner", 1.2, { autoAlpha: 0 }); TL.to("#car", 2, { x: 200, y: 200 }) } But the following does not work, it tells me that TimelineLite is not defined, loading TweenLite from CDN <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.19.0_422f021fad4c20f20cf3640a06ac39e9_min.js"></script> <script src="https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.18.5_6bbddbd910e8bfac4e19220fe52e1af6_min.js"></script> function initAnim() { var TL = new TimelineLite(); TL.from("#banner", 1.2, { autoAlpha: 0 }); TL.to("#car", 2, { x: 200, y: 200 }) } I am perplexed. I am sure this worked before. Since I am only creating an instance of TimelineLite, i should not need to load TweenMax. Hmm. What on earth. Thankful for insights, ".S"

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.