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. [sOLVED] IMPORTANT: When using GS with require.js dont override the GS variables like that: define(['ScrollToPlugin', 'TweenLite', 'TimelineLite'], function(ScrollToPlugin, TweenLite, TimelineLite) { // your code here }) Hello, I am doing something weird probably because I cant add Tween to Timeline. var tw = TweenLite.to(window, 0.7, {scrollTo:{y: 300}, ease:Power3.easeInOut}); console.log(tw); var tl = new TimelineLite(); tl.add( tw ); and the same when testing this way: var tl = new TimelineLite(); tl.add( TweenLite.to(window, 0.7, {scrollTo:{y: 300}, ease:Power3.easeInOut}
  2. I have a TimelineLite tween sequence that has an element tweening in the from the right, then later tweening off to the left with the opacity tweening to 0. Once the element's opacity tweens to 0 (on the way out) I'd like to reset the element's position to it's original position. Here's how I'm attempt to do so, which isn't working: var tl = new TimelineLite(); tl.to("#element", 1, {left: "-=50px", autoAlpha:1}) .add("elementOutLabel", "+=2") .to("#element", 0.5, {left: "-=50px", autoAlpha:0}, "elementOutLabel+=1") .set("#element", {left: "+=50px"}); } Can someone explain to me why this
  3. The basic of my problem is that I am using superscrollorama to pin timelineLite animations and when I want to jump to another part of the html page going up works fine but going back down is slowed down, (the anchor points are offset by part of the pixel animation that is bigger then the image so links don't go to the correct point on the page), by the animation being done in the timeline. I was hoping for a good way for setting timeline animation to be complete but I have been having problems of goto a specific frame and such. I originally tried to unpin all the pins and put them back
  4. Hey all, Relatively fresh in the web-dev world, really enjoying using greensock! I've been working on the website for my company. One of the features of the site will be a colour chooser/builder, allowing visitors to choose/design there own variation of one of our products (Mountain Bike related in this case). The idea is, you select the colour of the component you want, and it tweens to the select colour. I need it to fade out of the current colour, then into the selected. I've got it working, although the images I have are slightly large and un-optimized at the moment. I've create
  5. I actually started this topic in another thread but decided it needed a more appropriate title and separate thread. It seems as though the animations are not working or displaying properly under iOS 5.X and Safari desktop 5.X. I'm currently using the latest GSAP files (from CDN). I've tried using this but to no avail: TweenLite.ticker.useRAF(false); I have no idea what to try next. You can see how I'm stringing together the timelines in Matchups.js build(). I can rip them out and put them in the post if that helps. Please let me know. Most of the view is blank under iOS 5.X and Saf
  6. Hello i have a question, is possible add new tweens to a TimelineMax and reorder another on the fly (dynamically). Example: timeLine = new TimelineMax(); timeLine.add( TweenMax.to(".box1", 1, {left:100}) ).addLabel("box1"); timeLine.add( TweenMax.to(".box2", 1, {left:100}) ).addLabel("box2"); After in need add a new TweenMax after box1 but i need that box2 run after the box3 tween = TweenMax.to(".box3", 1, {left:100}); timeLine.add(tween, "box1"); timeLine.play(); RESULT: Currently the box2 and the box3 run at the same time. Another test, was get 'box2' tween and use Updat
  7. VJ90102

    debugging advice

    [see "Why can't code be in <head>?" thread as the problem has been pinned down to putting the timeline in the <head> and .play() in the <body>] Been using jQuery animation and am new to GSAP. I created a TimelineLite animation on a standalone page. The page includes all the scripts and style resources used by my live website so I could check for conflicts. It ran fine -- animation was mostly opacity changes. I put the script into my test site. [uPDATE: On the test site I use a JS closure to encapsulate the TimelineLIte animation -- this seems to be the problem]. I see
  8. I am currently working on a project that makes use of the TimelineLIte to sequence some animations together. While testing, I discovered that only in IE9 (havent tested in 10) that the timelines do not complete their transitions for 3 elements. If you haver over the elements, then you see them finish. Visit the URL below (please respect the fact that this is a dev link) and click on any number from 1-8 (on the bottom of the page).... in IE9, the Winner banner the percentage cells do not fully reach full opacity. I could really use some assistance working through this problem. Thank you in
  9. I am trying to make it so that I can change the ease type on the contained tweens of a timeline without remaking the timeline to do so. Is this possible?
  10. As I understand it, a Timeline is set up so that it uses the values of variables at the time the timeline is created. Thus, if n=100 tl.to(mc,1,{x:n}); will move mc to x = 100. What happens if I do var n:int = 100; tl.addCallback(function() {n = 200}); tl.to(mc,1,{x:n}); More importantly, what if I want the timeline to use values that are determined at the time the timeline plays? (Yes, I could do a test of above, but I'm trying to understand this once and for all, conceptually — I'm setting up complex timelines with many moving parts and subcalls, and trying to understand what
  11. If one has has a long timeline with various 'sections', which one could delineate by labels, what is the best way to know when it has played through a section? Is there a way to 'listen' for a tlmeline passing through labels — or is the best way to add a callback at the end of each section which would dispatch an Event? PSEUDO CODE _timeline.addLabel('start section 1',_timeline.totalDuration()); _timeline.to(...); _timeline.addLabel('end section 1',_timeline.totalDuration()); // can I detect when this passes? _timeline.addCallBack(dispatchAnEvent(finishedSection1),_timeline.totalDuratio
  12. Simple question regarding TimelineLite / TimelineMax .add() with Stagger: Is it necessary to do this: tl.add([tween, tween, tween], "+=5", "normal", "stagger", 5); // shown in documentation example or would you do this: tl.add([tween, tween, tween], "+=5, "normal", 5); // what I would expect to do
  13. var duration = 0.65; var tl = new TimelineLite({onComplete: function(){ tl.reverse(); }}); tl.addLabel(labels[0], 0); tl.appendMultiple([new TweenLite(help, duration, { _alpha: 0, delay: 3 }), new TweenLite(year, duration, { _alpha: 100, delay: 3 }) ]); tl.addLabel(labels[1], duration*1); // first stop tl.appendMultiple([new TweenLite(dragger, duration, { _x : getXFor(arr[1]), ease: Strong.easeOut }), new TweenLite(year, duration, { _x : getXFor(arr[1]), ease: Strong.easeOut }) ]); tl.addLabel(labels[2], duration*2); // 2nd stop tl.appendMultiple([new TweenLite(drag
  14. I am getting this issue where if the progress() gets set to something below 0 it goes to the end of the timeline. Is this supposed to happen?
  15. Hello. Thanks for the priceless GSAP. However, not sure why stagger isn't honoured with this code: function getButtonsInAnimation(callback) { var i, spots, spot, tween = new TimelineLite({paused: true, onComplete: callback}); for(i in spots = shuffle(hotspots)) { spot = spots[i]; tween.add(TweenLite.fromTo(spot, 0.3, {scale:0, alpha:0, left:290, top:168}, {scale:1, alpha:1, left:parseInt(spot.css('left')), top:parseInt(spot.css('top')), ease:Expo.easeOut} ), undefined, 'start', 0.05);
  16. Hi, there— I'm hoping someone can help suss out what I'm doing wrong. I have a page that has 2 blocks of content with a couple of <li> elements to toggle between the two, like tabs. I'm using TimelineLite to show the first block, and—when toggling to the other block—TweenMax to hide the first block's elements and TimelineLite to transition in the second block's. What happens is page loads, first block appears. Toggle to 2nd block. 1st block is hidden, 2nd block appears. When I toggle back, 2nd block is hidden, 1st block appears BUT proceeds to disappear; it doesn't stay visible.
  17. Hi guys I'm using TimelineLite to animate an html5 banner and I'm having trouble with one of the lines: here is my code: panel.animate = function () { var _tweenTime = this._tweenTime, _staggerTime = this._staggerTime, _frameTime = this._frameTime, _carTime = 5; this._timeline // frame 1 .to(expTxt0, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime) .to(expTxt1, _tweenTime, { alpha:1, ease:Power2.easeOut }) // frame 2 .to(expTxt1, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime) .staggerTo([ expTxt2, expTxt3, expTxt4, expTxt5, expTxt6,
  18. Ok, I am pretty new to this flash / actionscript so please help me get on track... I am trying to do the following: FirstSwf -- contains a timelinemax that animates a text from left to right SecondSwf -- contains a X number of photos that fade in and fade out with Y animation duration (number of images is dynamically parsed via XML configuration) ThirdSwf -- contains a timeline that animates a text from bottom to top (sort of like credits screen) Main.swf -- This is where I am stuck. I want to load the three SWF's into a master timeline inside main.swf and than sequentially
  19. Hi Forum-goers, I am completely new to this platform and am having a few issues getting my timeline to run all objects at the same time. In my code I am simultaneously running another plugin that counts up numbers, which you can ignore, but I have included in the code any how. What I want to achieve is that all of the bars in the chart animate out at the same time. Any help would be great : ) $(function() { var tl = new TimelineLite({align: "start"}); tl.to( $(".bar1"), 0.5, {css:{width:"200px"}, ease:Strong.easeInOut}); $('.percentage1').countTo({ from: 0, to: 75,
  20. I'm trying to create an animation (timelineLite animation) that can be controlled by a scrollbar or scrubber. a perfect example of which, is the demo swfs on the TimelineLite page as well as the TimelineMax page. The scrollbar has to allow the viewer to play the animation forward and scrub the animation in reverse. Thanks in advance!
  21. Below is a snippet of part of a timeline I building using TimelineLite. There are parts before and after this sequence but this one part is giving me some trouble: timeline.insertMultiple( [ 'discharge', function () {charge.hide();}, TweenLite.to(wave, 0.25, { ease: Linear.easeNone, raphael: { r: 1, 'fill-opacity': 0, 'stroke-width': 1 } }), ], 0, 'sequence', 0); If I call timeline.play('discharge'), the function is not called - only the tween runs. I have functions in the timeline in other places but they are always after the
  22. I know you can set a defaultEase for TweenMax, but how can I set it for a TimelineMax? I've tried... var tl = new TimelineMax({defaultEase:Power2.easeInOut}); ...and other variations but nada happens. Is it possible? Thanks
  23. Hi everyone! I have been using GSAP flawlessly for my personal projects quite a while now. Recently, I found strange behavior of the TimelineLite class. Sometimes, when I add callback at the end of the timeline it occasionally fires twice. I have been trying to solve this for a whole day now and I am starting to believe this must be some sort of a bug in TimelineLite class. I found out, looking at the stack trace, that whenever this redundant calls happens, the callback gets called in the forceChildrenToEnd method, but the same callback has already been called in its regular callback t
  24. I'm working on a slide show application in javascript and got all things separated on different files but more or less this is what i'm doing: var tl = new TimelineLite(); tl.insert(TweenLite.to($('.container'), 0.5, {css:{marginLeft:'-=100px'}, ease:Power2.easeOut, delay:0.2})); tl.insert(TweenLite.to($('.container'), 0.5, {css:{autoAlpha:1}, delay:0.7})); Afterwards I reverse the timeline and add a callback to the end of the reversed timeline with call() tl.reverse(); tl.call(someFunction); The animation plays reversed but the someFunction function never gets ex
  25. flag468x90.zipHi all While trying out the new v12 GSAP with a small 468x90 banner I noticed the background image shifts a few pixels, like a quick snapping movement once it starts to loop via a label in the timelinelite. Why is this happening? The bg image is img_fundo_mc. Thanks for your help. The code: import com.greensock.*; import com.greensock.easing.*; var tl:TimelineLite = new TimelineLite({onComplete:loopBackground}); tl.append( TweenLite.from(img_flag_mc, .5, {x:"-=100", ease:Power4.easeOut}) ); tl.append( TweenLite.from(img_cursos_mc, .5, {y:"-=10
×