sorciereus

Let me go through the video more attentively as I just bought myself a bit of time so was rushing. Thanks I'll see if that does it and then mark solved hopefully.

Sorry I'm struggling a bit with using delay in timelinemax - when I convert and do as you said everything plays all at once in a mess - can you use the code I provided to show more of an example? Sorry I'm needing this rather urgently and finding TimelineMax difficult with the delays and how that would directly convert from what I have to simulate the timing. I did this: var masterTL = new TimelineMax({paused:true}); var i = 0; var a = 1; var d = 3.3; var t = 0; var t2 = .2; var o = 6.2; function setProperties() { var tl = new TimelineMax(); tl.add( TweenMax.set('#dc_logo', {alpha:a}) ); tl.add( TweenMax.set('#videoContent', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt1', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt3', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt4', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt5', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt6', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2_1', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2_2', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2_3', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2_4', {alpha:i}) ); tl.add( TweenMax.set('#exp_txt2_5', {alpha:i}) ); tl.add( TweenMax.set('#exp_join', {alpha:i}) ); tl.add( TweenMax.set('#exp_us', {alpha:i}) ); tl.add( TweenMax.set('#bar', {alpha:a, width:0}) ); tl.add( TweenMax.set('#logo', {alpha:a}) ); return tl; } function line1() { var tl2 = new TimelineMax(); tl2.add( TweenMax.to('#exp_txt1', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt2', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt3', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt4', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt5', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt6', t, {alpha:a}) ); tl2.add( TweenMax.to('#exp_txt1', t2, {alpha:i}) ); tl2.add( TweenMax.to('#exp_txt2', t2, {alpha:i}) ); tl2.add( TweenMax.to('#exp_txt3', t2, {alpha:i}) ); tl2.add( TweenMax.to('#exp_txt4', t2, {alpha:i}) ); tl2.add( TweenMax.to('#exp_txt5', t2, {alpha:i}) ); tl2.add( TweenMax.to('#exp_txt6', t2, {alpha:i}) ); return tl2; } function line2() { var tl3 = new TimelineMax(); tl3.add( TweenMax.to('#exp_txt2_1', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_txt2_2', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_txt2_3', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_txt2_4', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_txt2_5', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_txt2_1', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_txt2_2', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_txt2_3', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_txt2_4', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_txt2_5', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_join', t, {alpha:a}) ); tl3.add( TweenMax.to('#exp_us', t, {alpha:a}) ); tl3.add( TweenMax.to('#bar', .5, {width:82}) ); tl3.add( TweenMax.to('#exp_join', t2, {alpha:i}) ); tl3.add( TweenMax.to('#exp_us', t2, {alpha:i}) ); tl3.add( TweenMax.to('#bar', t2, {alpha:i}) ); tl3.add( TweenMax.to('#logo', t2, {alpha:i}) ); return tl3; } function endAnimation() { var tl4 = new TimelineMax(); tl4.add( TweenMax.to('#dc_logo', t, {alpha:i}, 0) ); tl4.add( TweenMax.to('#videoContent', t, {alpha:a, onComplete:startVideo}, 0) ); return tl4; } startVideo = function() { vplayer.play(); } stopVideo = function() { vplayer.stop(); vplayer.currentTime = 0; } expandedAnimation = function() { masterTL .add(setProperties(), 0) .add(line1(), .3) .add(line2(), 3.3) .add(endAnimation(), 7) .play(); } And it just looks nothing like the TweenMax without the TimelineMax - it's junk. Obviously I'm getting the setting wrong - it would be nice to get a bit more help here if possible.

Does the TweenMax.set work properly in TimelineMax? Also, say I have a sequence I want to begin at the same time, following another sequence, for example if you look at my code: TweenMax.to('#exp_txt1', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt2', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt3', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt4', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt5', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt6', t, {alpha:i, delay:d}); That all shares the same delay, how would I accomplish that?

Hi there, I have the following TweenMax sequence: expandedAnimation = function() { var i = 0; var a = 1; var d = 2.25; var t = 0; var o = 4.25; TweenMax.set('#dc_logo', {alpha:a}); TweenMax.set('#videoContent', {alpha:i}); TweenMax.set('#exp_txt1', {alpha:i}); TweenMax.set('#exp_txt2', {alpha:i}); TweenMax.set('#exp_txt3', {alpha:i}); TweenMax.set('#exp_txt4', {alpha:i}); TweenMax.set('#exp_txt5', {alpha:i}); TweenMax.set('#exp_txt6', {alpha:i}); TweenMax.set('#exp_txt2_1', {alpha:i}); TweenMax.set('#exp_txt2_2', {alpha:i}); TweenMax.set('#exp_txt2_3', {alpha:i}); TweenMax.set('#exp_txt2_4', {alpha:i}); TweenMax.set('#exp_txt2_5', {alpha:i}); TweenMax.set('#exp_join', {alpha:i}); TweenMax.set('#bar', {alpha:a, width:0}); TweenMax.set('#logo', {alpha:a}); TweenMax.to('#exp_txt1', t, {alpha:a, delay:.25}); TweenMax.to('#exp_txt2', t, {alpha:a, delay:.5}); TweenMax.to('#exp_txt3', t, {alpha:a, delay:.75}); TweenMax.to('#exp_txt4', t, {alpha:a, delay:1}); TweenMax.to('#exp_txt5', t, {alpha:a, delay:1.25}); TweenMax.to('#exp_txt6', t, {alpha:a, delay:1.5}); TweenMax.to('#exp_txt1', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt2', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt3', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt4', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt5', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt6', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt2_1', t, {alpha:a, delay:2.5}); TweenMax.to('#exp_txt2_2', t, {alpha:a, delay:2.75}); TweenMax.to('#exp_txt2_3', t, {alpha:a, delay:3}); TweenMax.to('#exp_txt2_4', t, {alpha:a, delay:3.25}); TweenMax.to('#exp_txt2_5', t, {alpha:a, delay:3.5}); TweenMax.to('#exp_txt2_1', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_2', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_3', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_4', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_5', t, {alpha:i, delay:o}); TweenMax.to('#exp_join', t, {alpha:a, delay:4.25}); TweenMax.to('#bar', .5, {width:82, delay:4.25}); TweenMax.to('#exp_join', t, {alpha:i, delay:5.5}); TweenMax.to('#bar', t, {alpha:i, delay:5.5}); TweenMax.to('#logo', t, {alpha:i, delay:5.5}); TweenMax.to('#dc_logo', t, {alpha:i, delay:5.5}); TweenMax.to('#videoContent', t, {alpha:a, delay:5.5, onComplete:startVideo}); } startVideo = function() { vplayer.play(); } I know this is probably simple for some, but I'd like to convert this to TimelineMax because I need the animation to stop executing if my banner is closed, and reset, and begin animation again if it's re expanded. Right now, if you close the ad mid animation, and then re-expand, the code that was previously executing is still running, and then a new set starts again making a huge mess. When I tried converting to TimelineMax by using the var tl = new TimelineMax() and then tl.add to each one the delays got all messed up and I wasn't sure how to get the same results. Is there an easier way to reset/pause my function without totally redoing all my delays and etc? Any help would be appreciated. Thank you

Great thanks alot - The force3D fixes it in Safari not Firefox but if I combine the force3D:false with -moz-osx-font-smoothing: grayscale; I get pretty good results. The font is thinner in Firefox but looks good in Safari and Chrome. Thanks again.

I've served ads that dimensions' extend beyond the overflow through DCM that were accepted and ran without incident. Often times I have elements outside the parent div that I then tween into the parent div. I have not tried trimming an image in that method however. I crop my background images to the size, but I could see if you were tweening the bg image outside the visible div area where you would use this technique. It seems to me you should be able to serve this ad.

Hi there. I'm using TweenMax to do position tweens on divs containing text that is styled using a font family from google fonts. The font weight is bold. I find on Firefox and Safari, the font seems to change weight during the tween. Is this a known bug? (don't have time to put together a codepen at the moment but will if needed)

Hi thanks while the ScaleY isn't what I was looking for neither was Shaun's solution, however that Thread led me to this: http://codepen.io/ohem/pen/OVeeQa And this: http://codepen.io/GreenSock/pen/KmLjr which is what I was looking for. Thanks!

Hi there. This seems rather simple but actually might not be as a simple of a solution as I was hoping for. I'm trying to transform the height of a div: #mountain { position: absolute; top: 175px; left: 18px; width:123px; height:46px; background-image:url(mountain.png); } Using this GSAP TweenMax.from('#mountain', .5, {height:0, transformOrigin:"bottom"}); On <div id="mountain"></div> However it does transforms the height, it scales the div from the top down regardless of the transformOrigin setting. What am I missing? I suspect transformOrigin does not cover height? Can you suggest a workaround for what I'm trying to accomplish? Thanks.

It seems to me you could place the animation suggested by the moderators into functions and then call those on mouse over and mouse out..

Not to me! But that's over half the space if you are working with a 40k limitation.

Hi there. I'm interested in doing step animation but using the smallest engine you have to offer for GSAP, which is TimelineLite (correct?) I was wondering if there was an equivelent to something like this http://codepen.io/anon/pen/yNpQEq But with GSAP? Really need a light weight solution as most sites are not allowing more than 40k zipped HTML5 packaged files still and CSS3 older browser doesn't compare to Greensocks.. I did see this http://codepen.io/MAW/pen/MYdwRP But TweenMax is HUGE. Halp? Thanks.

Checking back in on this question - found solutions in canvas, but obviously your engine is superior. https://www.codementor.io/javascript/tutorial/how-to-make-a-write-on-effect-using-html5-canvas-and-javascript-only (canvas solution) Has there been any movement in creating a write-on effect using GSAP?

Thank you for the answer! The visibility method works well without having to add in timelinelite. I appreciate it!

Hi again forum. So we've been noticing this for several months, and it's in both Flash and GSAP. When we use from tweens, whether it be TweenLite, TweenMax, or TweenNano, the elements initially load in their starting position, before the .from positions are initiated, giving a poor load experience. An example would be: http://codepen.io/GreenSock/pen/yyBGYg Notice all the elements pop onto stage, then go to their starting positions. It seems to be mostly an issue in Chrome. It's strange, because I've built many a unit previously that this never would happen in, and then one day it just started happening. I must prefer using from tweens vs to tweens so this error does cause extra work. Any ideas?

Nevermind, it just wasn't working locally, once I hosted it it was fine. I think that's probably been the issue the whole time - apologies!

Ok I see it now, and apologies if I'm being dense, but I don't see what you changed to get it to function.

Sorry I meant the codepen link you provided produces a 404 page not found, well specifically the following text: "There is nothing here, Monsieur. My Giant magnifying glass never lies" I do realize the image links are blank.

Hiya - thanks for the answer but your codepen shows at blank - I do have that .js <script> link in my head, however I'd like to see how you got the demo working, as it's still showing as frozen to me. Thanks!

Hi there. I am trying to setup doubleclick with GSAP. However, when I add the enablers and etc, it causes my ad to freeze. I created a codepen. Please let me know if you see something obvious that I'm doing wrong. Thank you!

Rock n Roll! I guess I'll have to update the version in my portfolio w the selector! Thanks!

Unfortunately that had no effect. Can anyone else view the ad in the demo link I sent?

Hi there. I'm working on developing a demo to present to my company tomorrow on the wonders of GSAP. However, for some reason, on my company network, my ads aren't displaying. Here is an old ad that i made that I made as a demo that I know worked before, yet is showing as blank. http://simplisticallycomplicated.biz/portfolio/2013/01/09/dsg-ad-created-with-html5-animation/ Here is my new code that I'm working on, super simple, yet the tweenlite calls aren't being made. You can see I'm linking to the JS files, locally, even. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> #adcontainer { width:300px; height:250px; overflow:hidden; border:1px solid #A7A7A2; background-image:url(../images/background.jpg); } #gearup { font-family: Anderson 1938, Verdana, Geneva, sans-serif; font-size:56px; text-align:center; color:#fff; opacity:0; } </style> <title>Snowsports HTML5</title> </head> <body> <div id="adcontainer"> <div id="gearup">GEAR UP</div> </div> <!--- The following scripts are necessary to do TweenLite tweens on CSS properties --> <script src="/js/CSSPlugin.min.js"></script> <script src="/js/EasePack.min.js"></script> <script src="/js/TweenLite.min.js"></script> <script> window.onload = function(){ TweenLite.to("gearup", 1, {alpha:1}); } </script> </body> </html>

Hi there, I have the following code on an animation: import flash.display.MovieClip; import flash.events.MouseEvent; import com.greensock.*; import com.greensock.easing.*; import flash.ui.Mouse; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.BlurFilterPlugin; TweenPlugin.activate([BlurFilterPlugin]); var tl:TimelineLite = new TimelineLite(); tl.insert(TweenLite.from(who_mc, .25, {x:420, blurFilter:{blurX:10}, ease:Quad.easeOut})); tl.insert(TweenLite.to(who_mc, 1, {x:140, delay:.25})); tl.insert(TweenLite.to(who_mc, .5, {x:-126, ease:Quad.easeIn, alpha:0, delay:1.20})); tl.insert(TweenLite.to(black_mc, .5, {x:-161, ease:Quad.easeOut, delay:1.5})); tl.insert(TweenLite.from(grab_mc, .5, {x:-120, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); tl.insert(TweenLite.to(grab_mc, 1, {x:168, delay:2.45})); tl.insert(TweenLite.from(by_mc, 1, {x:437, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); tl.insert(TweenLite.to(by_mc, 1, {x:140, delay:2.45})); tl.insert(TweenLite.to(by_mc, .5, {x:-121, delay:3.4, ease:Quad.easeIn, alpha:0})); tl.insert(TweenLite.to(grab_mc, .5, {x:423, delay:3.4, ease:Quad.easeIn, alpha:0})); tl.insert(TweenLite.to(img1_mc, .5, {y:-126, delay:3.9})); tl.insert(TweenLite.from(img2_mc, .5, {y:384, delay:3.9})); tl.insert(TweenLite.from(white_mc, .5, {x:-95, delay:4.4})); tl.insert(TweenLite.from(labor_mc, .25, {x:-72, ease:Quad.easeOut, delay:4.9})); tl.insert(TweenLite.from(sale_mc, .25, {x:-72, ease:Quad.easeOut, delay:5})); tl.insert(TweenLite.from(clearance_mc, .25, {x:-72, ease:Quad.easeOut, delay:5.1})); tl.insert(TweenLite.from(rectangle_mc, .25, {x:-93, ease:Quad.easeOut, delay:5.2})); tl.insert(TweenLite.from(percent_mc, .25, {x:-93, ease:Quad.easeOut, delay:5.3})); tl.insert(TweenLite.from(save_mc, .25, {x:-93, ease:Quad.easeOut, delay:5.4})); tl.insert(TweenLite.from(save_btn, .25, {x:-93, ease:Quad.easeOut, delay:5.5})); tl.insert(TweenLite.from(blur_mc, .5, {alpha:0, delay:4.9})); function replayHover(e:MouseEvent):void{ TweenLite.to(replay_click, .5, {rotation:360}); } function clickReplay(e:MouseEvent):void{ tl.restart(); } replay_click.addEventListener(MouseEvent.CLICK, clickReplay); replay_click.addEventListener(MouseEvent.MOUSE_OVER, replayHover); replay_click.buttonMode = true; I'm using timelinelite on a replay button to replay all the animation - it works fine, and has always worked fine in the past (until recently) however it's not resetting the x value in the following two lines of code: tl.insert(TweenLite.from(grab_mc, .5, {x:-120, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); tl.insert(TweenLite.from(by_mc, 1, {x:437, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); The rest of the code is resetting perfectly. Any suggestions?

Hi there. I recently joined as a paid club member. I downloaded all the special code you get with that. How I've been loading the free version of greensock for as3, is going to Flash Preferences, Actionscript, Actionscript 3.0 Settings, and then loading the source path: /GreenSock-AS3-maser/src This works great as all the free greensock products work as expected. I try the same thing with the "bonus-all" folder (ex. /bonus-all/Flash/AS3/com/greensock) that is downloaded with the membership, but it throws an error: "/bonus-all/Flash/AS3/com/greensock/TimelineLite.as Line 1 5001: The name of package 'com.greensock' does not reflect the location of this file." I'm using: import com.greensock.*; to load the code in my flash file. Any advice? I'm sure this is a straight forward solution. Apologies if there is a different forum this should be posted in. Feel free to delete/move post if so. Thanks!