Jump to content

Search the Community

Showing results for tags 'Timelinelite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. If I have an animation somewhere on the timeline, also I have a defined value which contains the smallest duration when this timeline can finish, is there a better way to achive this than the attached codepen? tl.to("#redBox", 2, { x: 200, delay: 0.5 }); My animation's duration is 2,5 seconds, but I would like the timeline to complete only after 5 or more seconds. tl.to({}, 5, {}, 0); Then I have this empty animation with 5 seconds duration starting at position 0, but it seems too hacky. Is there any in built way to do this? (I saw that .duration(value) setter is not made for this as that just change the timescale. I don't want to change the behaviour of the animations.)
  2. I have attached a Codepen with a special case. This is just taken out from a complex system and I'm unable to use different "use case" for the Tween creation. I have an element and I know that the target X value for this element is 0. I have an algorithm which creates the fromTo tweens for the preceding tweens and also a simple Tween with duration 0 to set the calculated "starting" value. (this 0 duration is a hack to position the element to the right place on play(0), because of the first fromTo has a delay and it won't render until the delay ended). So the question is, how could I add these tweens to the timeline and the set the timeline's position to 0, which would mean x: 500 in my example? Also it seems like on my Codepen example, that the duration 0 tween isn't work fine with the latest version. I'm using VERSION: 1.11.8 and it works fine there. It could be great if you could give a better solution for that hack. Thank you!
  3. I found how to add lagSmoothing to tweenlite and max, but I have not been able to find or figure out how to use it with TimelineLite. Where would I add it in this for example? var tl = new TimelineLite(); tl.to(energyImage, 0, {opacity:0}); tl.from(shape, 5, {rotationY:"-=3000", ease:Sine.easeIn}); tl.from(shape, 1, {autoAlpha:0}, "-=4"); Thanks
  4. This may be obvious, but I was wondering the best practice for dealing with Timelines on rollover/out states? Specifically I do a Timeline animation on rollover of an object (using jQuery's hover()) — on rollout I want to kill that timeline and tweenback — I use a simple TweenMax on the rollout because I don't simply want to reverse the Timeline (that would be the obvious and elegant solution), as the 'out animation' is different from the 'in animation'. The best I could come up with is to store the Timeline in the object, and then kill it on rollout (myTImeline.kill()) and then do the 'out animation'. Is there a more elegant way? I take it because a Timeline is a complex thing that there's no equivalent to TweenMax's 'kill all tweens of this object'?
  5. Hello every one. This is my first post. And before i write anything, i would like to say how much i enjoy this library and how it opens great opportunities for any type of design. So many heart felt thanks are in order. http://goo.gl/DMBeAQ Basically, i got this page and scroll related animations(with John Polaceks SupersScrolloroma , shout out for his great script as well). As the page scrolls, so the pictures in phone changes. My problem is, when someone scrolls fast, the animations (like changing opacity from 0 to 1 and back) stops animating all together and just hang in there. So I've looked through the docs and kinda got lost on this issue. Since im designer and not a coder, somewhere along the reading i blew my head to the ceiling trying to find the solution for my problem. May be though i was looking for wrong keywords such as resetting animations altogether. Is there a way i can force tweenlite to do all the animations in order without jumping to other PS: i didnt use codepen because it didnt have superscrollorama (it seems) and i really think one of you will bump my head with an extremely obvious solution without even looking at my site Thanks in advance. PS2: Well i think it better to let you guys decide thats wrong rather than me saying something that would confuse you. So PS2: I dont want you to hunt for the code either, so here the part i believe is the problematic part. Please take note that, the problematic layers are usually "beaconimage1" which is "loading" image (since its being called several times) and "#beaconimaged" which is "detecting" image. But it can some other layer altogether. It really depends on luck. Every time i refresh and scroll down fast, some layer just gets stuck in the mid animation as i've mentioned above. ease:Quad.ease-Out had to be seperated because it countained letters which when combined makes a spam word " S E O " it seems. So in original code its together and not seperated. // START controller.addTween( '#start', (new TimelineLite()) .append([ TweenLite.to( $('#service_logo'), 0.3, {css:{opacity:0}, ease:Quad.ease Out}), TweenLite.fromTo( $('#phone'), 0.7, {css:{opacity:0, display:'none', marginBottom:-150}}, {css:{opacity:1, display:'block', marginBottom:0}, ease:Quad.ease Out}), TweenLite.fromTo( $('#beacontitle'), 0.7, {css:{opacity:0, display:'none', marginBottom:-150}}, {css:{opacity:1, display:'block', marginBottom:0}, ease:Quad.ease Out}), ]) ); // LOADING SCREEN controller.addTween( '#loading', (new TimelineLite()) .append([ TweenLite.to( $('#beaconimage1'), 0.5, {css:{opacity:0}}), TweenLite.fromTo( $('#beaconimaged'), 0.5, {css:{opacity:0, display:'none'}}, {css:{opacity:1, display:'block'}, ease:Quad.ease Out}), TweenLite.to( $('#beaconimaged'), 0.5, {css:{opacity:0},delay:1}), TweenLite.to( $('#beaconimagel'), 1, {css:{opacity:1, display:'block'},delay:1.5}), ]) ); // step 1b controller.addTween( '#ara1', (new TimelineLite()) .append([ TweenLite.to( $('#beaconimagel'), 1, {css:{opacity:0},delay:0.1}), TweenLite.fromTo( $('#beaconimage4'), 1, {css:{opacity:0, display:'none',marginTop:16}}, {css:{opacity:1, display:'block',marginTop:0}, ease:Quad.ease Out,delay:1}), TweenLite.fromTo( $('#beaconimage5'), 0.5, {css:{opacity:0, display:'none', marginTop:20}}, {css:{opacity:1, display:'block', marginTop:0}, ease:Quad.ease Out,delay:1.5}), TweenLite.fromTo( $('#beaconimage6'), 0.5, {css:{opacity:0, display:'none', marginTop:-20}}, {css:{opacity:1, display:'block', marginTop:0}, ease:Quad.ease Out,delay:1.5}), ]) ); // step 2 // step 1b controller.addTween( '#box2', (new TimelineLite()) .append([ TweenLite.to( $('#beaconimage4'), 0.5, {css:{opacity:0}}), TweenLite.to( $('#beaconimage5'), 0.5, {css:{opacity:0}}), TweenLite.to( $('#beaconimage6'), 0.5, {css:{opacity:0}}), TweenLite.to( $('#beaconimage1'), 0.5, {css:{opacity:1}, delay:1}), ]) ); // step 2 // THE END controller.addTween( '#end', (new TimelineLite()) .append([ TweenLite.to( $('#phone'), 0.1, {css:{marginBottom:75}}), TweenLite.to( $('#beacontitle'), 0.1, {css:{marginBottom:75}}), ]) ); // step 2
  6. I have an object that is within scope of two tweens. I want to relatively tween a numeric property of this object in both tweens, however the tweens both seem to be making their own internal copy of the object during the tween and overwriting the object. Thus the resulting value of the object is equal to the value of the tween that finishes last and thus gets to overwrite the property the last. See my codepen for an example. How would I make these tweens compete against each other?
  7. 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?
  8. How do I set animation delay to using timelineLine? I have an animation that store inside slideUpTemplate instance /*========================================*/ var slideUpTemplate = new TimelineLite({ paused:true, onComplete:animationComplete, onReverseComplete:animationCompleteRev }); /*========================================*/ I've an button that will hover in and out event attached to it, and call slideUpTemplate.play() and slideUpTemplate.reverse() respectively. My problem is when I hover out I want the animation to delay for 1second before triggering the slideUpTemplate.reverse() method. My initial thought was to use slideUpTemplate.delay(1).reverse() but it only works for the 1st time.....
  9. I'm trying to create a simple animation with a trigger button using TimelineLite(), but some how I got stuck... Here is my pen: http://codepen.io/vincentccw/pen/bfojB?editors=101 I can trigger the animation when I hover over the red square but not the button itself (since the animation is store inside the square instead of the button) Thanks for the help in advance
  10. My current project (JavaScript/GSAP) needs lots of tweening on different elements at the same time (it will be a heavily tweened/animated site). In "lots of" I mean 50-75 "TweenLite.to"s per click event, in total about 150-300 css properties to tween. It would be used all over the site on elements (buttons, menus, forms). Most of the elements will have 2 states, an "active" and an "inactive" state, basically when the user clicks on a menu, the menu will be activate, click again/elsewhere and goes to inactive. To efficiently manage the tweens, I would like to use TimelineLite, create all the tweens after the site loads and store them in 2 TimelineLite instances avoiding the "TweenLite.to"s again and again on each event/state change. - the "activateTimeline" and "inactiveTimeline" look like like this: var activeTimeline = new TimelineLite({ paused: true, tweens: [ ...an then lots of tweens with "new TweenLite(...)"s... ] }); var inactiveTimeline = new TimelineLite({ paused: true, tweens: [ ...an then lots of tweens again with "new TweenLite(...)"... ] }); This works really well. But there is a serious problem. When the user clicks rapidly or programatically change states BEFORE the finish ("onComplete") of the ongoing timeline, jumps and slowdowns will occur. This is not the case, when using "TweenLite.to"s on every event over and over again as the TweenLite system will override values and nicely finishes off tweens as naturally would be expected. I have tried to use some conditions to somehow kill/invalidate the ongoing "old" timeline the let the "new" timeline on state change finish nicely as I would expect, also when starting over the timeline again: function activate() { if( !active ) { var activeProgress = headerTimelineActive.progress(); var inactiveProgress = headerTimelineInactive.progress(); // sometimes, on very rapid clicking/programatical state changes, mostly the headerTimelineActive.progress() will give a NaN if( isNaN(activeProgress) || isNaN(inactiveProgress) ) { reinitializeTweens(); activeProgress = headerTimelineActive.progress(); inactiveProgress = headerTimelineInactive.progress(); } if( inactiveProgress > 0 && inactiveProgress < 1 ) { headerTimelineInactive.kill(); } if( activeProgress > 0 ) { headerTimelineActive.pause(0, true); } headerTimelineActive.play(); active = !active; } }; function deactivate() { if( active ) { var activeProgress = headerTimelineActive.progress(); var inactiveProgress = headerTimelineInactive.progress(); if( isNaN(activeProgress) || isNaN(inactiveProgress) ) { reinitializeTweens(); activeProgress = headerTimelineActive.progress(); inactiveProgress = headerTimelineInactive.progress(); } if( activeProgress > 0 && activeProgress < 1 ) { headerTimelineActive.kill(); } if( inactiveProgress > 0 ) { headerTimelineInactive.pause(0, true); } headerTimelineInactive.play(); active = !active; } }; ...but these methods did not help. Again, on rapid clicking/programatically state changes/click before the actual timeline "onComplete"s jumping, jittering and some sort of race/concurrent conditions occur. Here is a small CodePen demo. Please, give me some advice on what should I do/how should I do to use 2 "TimelineLite"s as I described and on state changes, somehow stop the "old" timeline and let the "new" timeline go. I wolud like to get the same effects/tweening experiences, when using just "TweenLite.to"s again and again (as the TweenLite system will override values and nicely finishes off tweens as naturally would be expected), but with 2 "TimelineLite"s. If I can get this to work with 2 timelines, there will be menus, when a 3rd state will be introduced, a "disabled" state with a 3rd TimelineLite. But currently, I am not able to do, what I wolud like to do with 2 timelines as I described. Thank you in advance, thank you all!
  11. Hello everyone, I'm struggling to achieve the following sliding effect : When my mouse is over a box, I want that box to appear with a sliding effect. Right now I'm using TimelineLite, animating the "width" from 0 to 100px, as shown in the Jump start guide. The problem is I can't have the mouse over a 0px box... It works when I include this box in a div, I can now have the mouse over the div. BUT as soon as the box appears at 100px, the mouse isn't anymore over the div but over the box, resulting in an unwanted mouse out, looping the animation... Does anyone have got some suggestions to achieve this effect properly ? Thanks a lot !
  12. Hi - not sure what I'm doing wrong, but I've got an AS2 script here, and I'm building a sequence of tweens. All is well until I get to staggerTo - I am positive I'm giving it an array as its first property, but it keeps throwing a type mismatch. Here are the important bits: var introTl:TimelineLite; var btnsArr:Array; function init():Void { // activate TweenLight plugins TweenPlugin.activate([AutoAlphaPlugin, ScalePlugin, TintPlugin, RemoveTintPlugin]); // store the buttons in an array btnsArr = new Array(btn0, btn1, btn2); // play intro anim introAnim(); } function introAnim():Void { introTl = new TimelineLite({onComplete:onBoardAnim}); introTl.staggerTo(btnsArr, .5, {autoAlpha:0, scale:150, ease:Back.easeOut}, "-=.3"); //icons } function onBoardAnim():Void { trace ("onboard"); } I've even stripped this out and put it into a new file - same result. I'm sure it's something simple. Any ideas?
  13. I have data that comes to me as milliseconds, and I was wondering if: a) there are any drawbacks to using `timeScale(1000)` in a TimelineLite instance to "simulate" milliseconds if it's a bug that I can attempt to set a child timeline at, say, 5000, but when I inspect the parent timeline it can appear at, say, 5002 (can, not always does, not consistently reproducbile) Thanks!
  14. Hi guys, quick question - I've just grabbed the v12 version of the swc and it no longer recognises calls to the complete() method - has this been removed and if so, what is the accepted procedure to force a timeline to complete please (currently using tl.gotoAndStop(tl.totalDuration))? thanks obie
  15. Guest

    on mouse over

    Hey to you all. I am very very new in Tweening and programming in general and studied a bit the past months. Have a small one running on my website www.casitadelcuco.es but can't find out how I can add a simple mouse over effect. I have this Tween : var myBannerTimeline = new TimelineLite(); myBannerTimeline.from('#vogelhuisje', 5, {css:{top:-500}, ease:Bounce.easeOut}) .from('#plank01', 1, {css:{left:-20,top:30}, ease:Bounce.easeOut}) .from('#plank02', 1, {css:{left:40,top:-50}, ease:Bounce.easeOut}) .from('#plank03', 1, {css:{left:-60,top:70}, ease:Bounce.easeOut}) .from('#plank04', 1, {css:{left:80,top:-90}, ease:Bounce.easeOut}) .from('#plank05', 1, {css:{left:-100,top:20}, ease:Bounce.easeOut}) .from('#gat', 1, {css:{opacity:0}}) .from('#schaduw', 2, {css:{top:600}, ease:Bounce.easeOut}) .from('#schaduw', 2, {css:{opacity:0.1}, ease:Bounce.easeOut}) .from('#webhuisje', 3, {css:{left:-800,opacity:0}, ease:Bounce.easeOut}); Now how can I make that when you go with your mouse over plank01 or plank02 or ... plank05, that all 5 elements go seperatly in 5 different directions. Just can not find it. Hope somebody wants to help me.
  16. Hi there. Can someone demonstrate how I would pass a numerical value to positioning setting such as x or y that is set in a variable from an array using Tweenlite if possible? (tweenmax?) For example, the Flash tween version: var myNumber : Number = 0; var myArray : Array [30, 20, 10]; new Tween(instance_mc,"x",Regular.easeOut,instance_mc.x,myArray[myNumber],1,true); Thanks for any help!
  17. Hi there. This question isn't limited to Greensock but was hoping I could get a little help here. I have an image scroller that basically uses buttons to relatively position a movieclip containing a horizontal line of images. There is a mask over an area so that when you click a left or right arrow, it relatively positions the movieclip under the mask and reveals a section of the movieclip. I have this working fine, however the one functionality I'd like to add, is when the left or right border of the movieclip is reached, the appropriate button is disabled so that the movieclip isn't positioned outside of the mask. Or it loops back to the starting x position. Here is the code: import flash.display.MovieClip; import flash.events.MouseEvent; import com.greensock.*; import com.greensock.easing.*; function init():void { TweenLite.to(products_mc, 1, {x:696, alpha:1}); } init(); function productsLeft(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"-255"}); } function productsRight(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"255"}); } arrowL_btn.buttonMode = true; arrowL_btn.addEventListener(MouseEvent.CLICK, productsLeft); arrowR_btn.buttonMode = true; arrowR_btn.addEventListener(MouseEvent.CLICK, productsRight); if (products_mc.x == 696) { arrowR_btn.visible = false; arrowR_btn.buttonMode = false; } if (products_mc.x == -1086) { arrowL_btn.visible = false; arrowL_btn.buttonMode = false; } /* buttons */ arrowL_btn.doubleClickEnabled = true; arrowR_btn.doubleClickEnabled = true; arrowL_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); arrowR_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); function doubleClickHandler(evt:MouseEvent):void { evt.stopPropagation(); }
  18. I have created a SoundManager object which loads my sounds and has functions for playing them. Most of the time, they are various click-sounds attached to buttons, but in some cases, there are longer sounds associated with a TimelineLite animation. I am trying to trigger them with this: var tlboxBtn = new TimelineMax({onStart: $EV_SoundManager.playSFX, onStartParams: ["glitch020"], paused : true }); // other animation items added to the TimeLine... then... element.grpanimation = tlboxBtn; element.grpanimation.play(); The first thing in the "playSFX" function of $EV_SoundManager is a log to the console displaying the name of the soundfile to play. This is working for all calls triggered from button clicks, but not when this timeline runs. No sound and no log statement. I could just create an anonymous function, call that from the TimelineMax, and have it trigger the function in the $EV_SoundManager object, but that seems like a step too many. Is there a better way to do this? Any help is appreciated. --Kevin
  19. Hello everyone! Here is the link to my codepen: http://codepen.io/reggiegulle/pen/zCHyn As my code stands, it is fairly straightforward, and it does manage to accomplish what it was meant to do. It's just one basic timeline with buttons and all the following functions are grouped at the bottom of the code, like so: $("#debeersTopPanel").on("click", function(){ debeers.tweenFromTo("ringFadeIn","ringPause"); }); function ringBack(){ $("#BackButton1").on("click", function(){ debeers.tweenFromTo("ringFadeOut","ringToStart"); }); } $("#debeersBottomPanel").click(function(){ debeers.tweenFromTo("pendantFadeIn","pendantPause"); }); function pendantBack(){ $("#BackButton2").on("click", function(){ debeers.tweenFromTo("pendantFadeOut","pendantToStart"); }); } function debeersResume(){ debeers.play(0); I am fairly new at JavaScript, and so I am seeking some help on whether the code above can still become more elegant. The events on the timeline are mostly repetitive; could these repetitions be turned into iterations? I am still trying to get a better idea of objects and object arrays, and so I am not too sure whether those principles can apply to my codepen, or if other entirely different processes may be applicable. It's just that there may be a chance that more items will be added to my present drop down menu, and so any method of streamlining the coding (if there is any) would be very useful. I would appreciate any help. Thank you very much in advance! (Note: I mostly specialize in video, so if anyone has any questions about it, I would not hesitate to help out as much as I can)
  20. Hi there, I've got a rather long timeline with several onComplete handlers set at various points. In trying to reverse it with the default suppressEvents set to false, the reversal works except all the onComplete handlers are skipped (the actions within those handlers need to be reversed as well). When I reverse it with suppressEvents set to 'true' ( I wrote it as tl.reverse(true); ), only the first third of the timeline gets reversed, basically right before the first tween with an onComplete handler. Should I be doing something differently? Here's a look at the timeline code: var tl = new TimelineLite(); // tl.timeScale(0.25); tl.to($('#floatBubble' ),1,{top: -12, ease: Expo.easeInOut}) .set($('.down-arrow' ),{clip: "rect(-40px, 40px, 40px, 0px)"}) .to($('.down-arrow' ),1,{clip: "rect(-40px, 40px, -40px, 0px)", ease: Expo.easeInOut},1) .set($('.down-arrow' ),{clip: "rect(40px, 40px, 28px, 0px)"}) // .set($('#loadedContent' ),{overflow: "hidden"}) .to($('#posterContainer'), 1.5, {"margin-top":"111px", ease: Expo.easeInOut, onComplete: function(){ var styles = { "background-color": "white", "z-index":1030 } $('.main-header').css(styles); // $('#loadedContent').css("overflow", "hidden"); $('#loadedContent section').css("padding-top", "11px"); //so #floatBubble doesn't get cut off at top by fixed header } }, 0) .to($('.keyline-work' ),2.5,{width: 40, ease: Expo.easeInOut}, 1) .to($('#posterContainer img'),1.5, {"margin-top":"-111px", ease: Expo.easeInOut },1) .to($('.poster-image'), 1.5, {height: "300px", ease: Expo.easeIn},1) .to($('#fauxHeader'), 0.3, {opacity:0, ease: Expo.easeIn, onComplete: function(){ $('#fauxHeader').remove(); } },0.55) .to($('#loadedContent'), 1.5, {"max-width":"1280px", ease: Expo.easeInOut},1) // .to($('.down-arrow'), 1, {"height":"0px", ease: Expo.easeInOut }) .to($('.prev-post'), 0.5, {"margin-left":"-60px", "width":"160px", ease: Expo.easeInOut }, 1) .to($('.next-post'), 0.5, {"margin-right":"-60px", "width":"160px", ease: Expo.easeInOut }, 1) .to($('.post-nav'), 0.5, {"width":"120px", ease: Expo.easeInOut }, 1.5) .to($('.prev-post'), 1, {"margin-left":"0px", "width":"40px", ease: Expo.easeInOut}, 2) .to($('.next-post'), 1, {"margin-right":"0px", "width":"40px", ease: Expo.easeInOut, onComplete: function(){ $('.post-nav').wrapAll("<div class='post-navigation-wrap'></div>"); $('#floatBubble').toggleClass('icon-landscape'); $('.down-arrow span i').toggleClass('icon-caret-up'); } }, 2) .to($('#posterContainer img'), 2.5, {"margin-top":"-280px", ease: Expo.easeOut },2.5) .to($('.entry-title' ),1.5,{y: 0, ease: Expo.easeInOut}, 1.55) .to($('.keyline-work' ),1.5,{y: 0, ease: Expo.easeOut}, 2.25) .to($('.entry-title h2' ),1.5,{y: 0, ease: Expo.easeInOut}, 1.55) .to([$('.big-header'), $('.entry-title h2' ) ],0.75,{color: "black", ease: Expo.easeInOut}, 2) .to($('.pubdate'),1,{"opacity": 0.75, ease: Expo.easeInOut, onComplete: function(){ console.log("reversed? ", this.reversed()); $(window).trigger("scroll"); } },2) .to($('.poster-image'), 2, {"height":"150px", ease: Expo.easeOut}, 2.25) .to($('.down-arrow' ),1,{clip: "rect(-40px, 40px, 28px, 0px)", ease: Expo.easeInOut},3.5) .set($('.down-arrow span i'),{bottom:-20}, 3.5) .to($('.down-arrow span i'), 1, {bottom: 35, ease: Expo.easeInOut}, 4.35) .set($('.down-arrow' ),{clip: "rect(-80px, 40px, 28px, 0px)"}) .to($('#floatBubble' ),1,{top: -80, ease: Expo.easeInOut},5.35) .fromTo($('.callout'), 2, {"opacity":0}, {"opacity":1, ease: Expo.easeOut}, 2.5) // .to($('.down-arrow'), 1, {"height":"100%", ease: Expo.easeInOut }) .to($('.down-arrow'), 1, {"bottom": -15, ease: Expo.easeInOut},3.75 )
  21. So I have a loop of lights lighting and diming - right now I have this happening in timelinelite with results that I find satisfactory. However, I'm wondering if any of you devs have a even more streamlined way of accomplishing this via timelinemax and an array? Can you let me know anymore details about the technic I'm demonstrating here? 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}) ;
  22. Hello fellow Greensockers! I'm prototyping a method for arranging content on a page to prevent visitors from having to scroll through butt-loads of content. The method I'm trying to use is to shift the content divs over, slide them up, then stick them at the top of the the stack of div blocks. Here's what I have so far to help you visualize: http://jsfiddle.net/4zzaY/4/ Each one of those colored blocks represents a div full of content. Originally I wanted to also have the jQuery .click() method alter the actual HTML ordering of the Divs, and change them the css positioning from relative to absolute and back to relative, that way they would automatically stack up on their own. However, I am not aware of any method to alter the arrangement of HTML with Greensock, jQuery, or javaScript in general. So what I ended up doing is keeping every element positioned absolutely and animating them that way. My problem is that I'm noticing an issue, after the user has clicked on every single one of the buttons, they can no longer fire. I'm guessing this is because after the animation is fired, it's considered complete and no longer run-able. Unfortunately, I can't use any methods to reverse the timeline because that would alter the positioning of the elements. I considered the yoyo method but I believe that only works for tweenMax, not timelines? And even so, I'm not even sure that method would work anyway. I suppose even though my current method isn't exactly ideal, it still works with the exception of the animations not being able to fire twice.
  23. Hi Guys, I just wanted to share an issue I was faced with yesterday, incase it helps anyone else experiencing the same problem. After successfully creating tweens with tweenlite, I wanted to convert my code to timelineLite format. On doing so my animation stopped working. After several hourse of debugging, I eventually got it o work. The problem was with the Tweenmax library I was referencing. I was referencing the latest library, however changing the library to 1.8.4 resolved my issue. The library was present but for some reason my animation would not start. My code was in the format: $('document').ready(function() { var tl = new TimelineLite(); tl.to(element, 2, {autoAlpha:1}) }) Someone may have a better insight as to exactly why it did this... Wes
  24. Hey I have a website which generates posts and I was wondering if I could use the stagger animation to Tween them from opacity 0 to opacity 1 on page load. The amount of elements differs since the website is dynamic. It is structured as follows. <div id="message-container"> <div class="message1"> <div class="message2"> <div class="message3"> etc... </div> I want to animate the divs with class .message<insert number>. Is there a way to do this by targeting the child elements of the message container and then doing the stagger effect on that?
  25. Greetings, Thank you for reading, and for any insight anyone can offer. It is appreciated. I adapted the code from this demo on codepen: http://codepen.io/GreenSock/pen/bpezc ... in order that I may understand how things work. For some reason unknown to me, I must run the timeline from a button (unlike the code in the codepen deal). This works: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); $("#play").click(function() { tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:false}) ); }); $("#pause").click(function() { //alert("Pause Button"); tl4.pause(); //tl4.play(0); }); } This does not: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); $("#play").click(function() { tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) ); //tl4.restart(); tl4.play(); }); } Nor does this: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); tl4.insert( TweenLite.to(logo4, 5, {css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) ); $("#play").click(function() { tl4.play(); }); } It only works if the timeline is put in the function of the button ... but in codepen: var tl = new TimelineLite({onUpdate:updateSlider}); tl.set("#content", {visibility:"visible"}) .from("h1", 0.5, {left:100, autoAlpha:0}) .from("h2", 0.5, {left:-100, autoAlpha:0}, "-=0.25") .from("#feature", 0.5, {scale:0.5, autoAlpha:0}, "feature") .from("#description", 0.5, {left:100, autoAlpha:0}, "feature+=0.25") .staggerFrom("#nav img", 0.5, {scale:0, rotation:-180, autoAlpha:0}, 0.2, "stagger"); $("#play").click(function() { // function } Obviously, I am missing something. Thanks for any guidance offered. Steve