Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'timelinelite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  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 ma
  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 ad
  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 t
  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
  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
  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.reve
  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 a
  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 sugg
  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():
  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. 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.eas
  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 positio
  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 l
  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.t
  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
  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, sca
  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 t
  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
  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:{borderBottomCol
×