Jump to content
GreenSock

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

Search the Community

Showing results for tags 'js'.

  • 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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hello again, I'm now moving on to the menu. How do I setup the menu (styled it etc..), so what I want is that once you click on a menubutton it auto scrolls down to that page/section. And my question is. How do I do that? Because when I look at the demo of this I don't see any demo with an actual functioning menu. There is a lot about effects and animations, but nothing in it about how to make all of that work with a navigation also. Does anyone got some kind of tutorial on 'How to make a menu that scroll to page/section'? Maybe there is a tutorial somewhere that I have missed?
  2. Hi, Since the introduction of animation in JS, ad management programs are changing the standard of Flash to JS when it comes to advertisement. But they keep the same restrictions on KB. When I was given the task to make a banner in JS, Greensock immediately popped up in my head. I've looked at the download page and when customising the library I saw 7 kb when only selecting Tweenlite. As shown here: But when I look on my mac when inspecting the file: Am I doing something wrong downloading or am I missing something here? For the banner to be accepted @ the ad networks the JS should be under 10kb. Hope someone can help me out! Thank in advance! Youri
  3. Hello there again! I use TweenMax.set() to set properties like opacity and transform(x,y,rotate,scale(x,y)) for IE6-8, and it works like charm, everything is perfect! But I have one issues, which I don't know how to solve. The life cycle of my page: Set DOM values via MVC engine Wait until $(window).load() and then fadeIn() page Problem is TweenMax.set() executes on slow computers after load is complete and then user needs to wait like 2-3 seconds until element by element is positioned for him. Basically it look like mess. What I would want is to know when TweenMax actually sets the values and after that I show content to the user. Is it possible, has anyone ever had this problem? Sincerely, Masq
  4. Hi there, and thank you for these fine greensock tween engines. Can't imagine how many flash banners I've made importing that com.greensock package. So let's cut to the chase, I've started using greensock for html-banners as well and ran through a problem. TweenLite onComplete triggers right away. I've searched the forums and all but didn't find anything on this. Here's the (stripped) code that's not working: function init() { TweenLite.to('#frame1', .3, {opacity: 1, delay: 0, onComplete: arrowLoop, onCompleteParams:[arrow1]}) TweenLite.from('#arrow2', .3, {opacity: 0, top:"-=10",delay: 10, onComplete: arrowLoop, onCompleteParams:[arrow2]}) } In arrowLoop(arrow) function I logged the arrow and it traces right away the latter arrow2 twice before the arrowLoop is called for arrow1. If I comment the latter tween out then the arrowLoop works just fine. This one works correctly: function init() { TweenLite.to('#frame1', .3, {css:{opacity: 1}, delay: 0}) TweenLite.delayedCall(.5, arrowLoop, [arrow1]); TweenLite.from('#arrow2', .3, {css:{opacity: 0, top:"-=10px"},delay: 10}) TweenLite.delayedCall(10.3, arrowLoop, [arrow2]); }
  5. When tweening a CSS property, once the tween is complete it seems the property is removed. How can I make the CSS property that was tweened persist?
  6. Reporting a bug here. On IE8 my animation complete kills the experience, throwing a runtime error popup. Works fine though on Chrome and proper browsers. I'm doing the following: animateInBars : function(callOnComplete){TweenMax.staggerFrom( dom_element.find('.barchart-bar'), 0.5,{height:"0%", ease:Elastic.easeOut}, 0.01, callOnComplete);}, The animation works fine, but when the onCompleteAll kicks in, it crashes. IE8 throws this at me: Object expected TweenMax.js, line 308 character 7 That corresponds to this code on line: onCompleteAll.apply(onCompleteAllScope, onCompleteAllParams); So I tried adding an empty array for the onCompleteAllParams: animateInBars : function(callOnComplete){TweenMax.staggerFrom( dom_element.find('.barchart-bar'), 0.5,{height:"0%", ease:Elastic.easeOut}, 0.01, callOnComplete, []);}, And that fixes it
  7. I was wondering about the best way to handle a jQuery resize event when a user resizes the browser window. I am using TimelineMax and currently I am pausing the timeline, moving it to the very start of the timeline and then removing the timeline object, initializing a new one and rebuilding the timeline each time the browser resize event is fired. I was thinking there might be a better way to do this. I found this answer on StackOverflow here. Having said that, this solution works, but it moves the timeline to the start every time. If I try and resize the window and pause the timeline at the current time of the label it gets thrown off? If I simply try and remove the timeline and rebuild it with a new object, it gets thrown off also? I had seen something about a liquid stage? Is this available on the JS version, or maybe there is something I am overlooking? Here's my resize code: $window.on('resize', function(){ var time = 0; if(globalLabel != "") time = controller.tl.getLabelTime(globalLabel); //time would be used to pause the timeline but it does not work clearTimeout(id); controller.tl.pause(0,true); controller.tl.remove(); //on the Update view call, I am creating a new timeline object //and rebuilding the timeline id = setTimeout(controller.UpdateView, 150); }); I appreciate any help.
  8. Hi friends, In my document I am doing this: <script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/TweenLite.min.js"></script> I would like to know if is it possible to load GSAP library from an absolut url. somethin as: <script type="text/javascript" src="http://greenshock.com/js/greensock/plugins/CSSPlugin.min.js"></script> Thanks
  9. Hello, I love GreenSock, it's a phenomenal product. I am a Flash Developer migrating to HTML, Canvas, CSS, and Javascript web designing. The Javascript versions are excellent. The one challenge I am having is trying to make the CSS 3D Transformations work. I looked at the demos of how powerful these transformations can be at: http://www.greensock.com/transitions/ http://www.greensock.com/css3/ and the "CssPlugin" section of your documentation at: http://api.greensock.com/js/ But, unfortunately I see a whole lot of small snippets of code (i.e. the trailer for a really awesome movie that I can't wait to see), but I would really like to see the whole html page with the css and javascript included (i.e. the whole "unrated, director's cut with alternate endings and commentary.") After searching through the GreenSock forums I found this link that the great Carl Schooff posted some downloadable examples of CSS Transformations: http://forums.greensock.com/topic/6230-how-to-tween-css3-transform-properties/ What I'm trying to say, is I would really appreciate it, if it were a little easier to figure out how to use these powerful tools to the most. Thanks, for viewing & best wishes, J
  10. Hello, I've been working with the Javascript version of GreenSock v 12, EaselJs, and the Canvas element. I know that the Actionscript version of Greensock has a CircluarPath2D or something something like that, but I've searched Google and the Greensock forums and cannot find a way of actual animate the drawing of a shape like in Flash. I've seen tons of examples on "Transforming" shapes, and the drawing of shapes and then put them on the screen, but not any actual on-screen animated drawing of a shape/bezier. I also, looked into svg, but did not see an option there. Is it possible to do this without using masks? If so, please provide a very simple example or send me a link to how to do this Thanks for viewing, any help will be greatly appreciated.
  11. This is probably an edge case so it's not a huge deal, but thought I would report this as I spent the past few hours figuring it out... My PhoneGap (Cordova) iPad app allows orientation changing in all four directions. 1 = home button bottom 2 = home button top 3 = home button right 4 = home button left For each orientation I use GSAP to rotate an element so that the top of that element always points to the home button. This worked in all variations except when rotating from 3 or 4 to 1. When rotating to orientation 1 I was using rotation:0 Changing rotation:0 to rotation:360 resolved the issue. Crazy right? Hope that helps someone...
  12. As a Flash Developer coming into Canvas, I'm loving GSAP. But I was amazed how slow it was just tweening the color of a EaselJS object. Experiment tweening alpha and scale: http://antoniobrandao.com/canvas/ Experiment like the above, but also tweening the "tint" of an easelJS Shape http://antoniobranda...vas/index2.html It completely destroys it!!! Am I doing it wrong or is this just slow? Check the source code in the experiments. Any help appreciated!
  13. I'm having an issue with Animating alpha PNGs in TweenMax JS in IE8, there is a lot of distortion during the animation but after it is complete the PNGs return to a normal state. I know IE8 inherently has issues with PNGs but is there a work around for this in TweenMax?
  14. I'm new to JS/CSS (coming from AS3) -- I wonder if someone could help me figure out the following: I'd like to have tabs at the bottom of a page which, when rolled over (or clicked) slide up. The tabs will contain images of 45px height. I'd like, say, the extended tab to be something like 100px in height. I gather this has something to do with overflow, hidden, auto, etc -- I've seen solutions using jQuery slide, but I'm not sure how to do it with Greensock -- that is, I am well-versed in the GS engines, but putting it all together (CSS, DIVs, overflows, etc) is throwing me. Any help much appreciated!
  15. Alan

    bezier in javascript

    Hi, I wonder if we will have bezier support in javascript version soon? I had a great success with greensock and easelJs together, I can almost 100% duplicate what I have done with actionscript 3 before, apart from bezier curve animation...
  16. Hi, Experimenting with js version. I wonder if there is a js version of overwrite manager? I am having weird behavior sometimes. And right now i guess we should not use tweenlite/max for production. ?
  17. Berry

    IE issue

    I am new to both Jquery and TweenMax but so far I love using TweenMax js. I took the code from http://www.snorkl.tv...script-preview/ exploding bunnies example and tweaked it a bit to get a effect of multiple rain drops falling on the screen. It looks good in firefox, chrome and safari but in ie 7 and 8 (I don't currently have access to ie 9) it is not displaying correctly. There is only 1 rain drop displaying and it is grey instead of the white png. Also I have it paused when loaded and have a click event to play the tween but it is playing upon load. Any ideas of what I am doing wrong? here is my code: var rainDrops = $(".rainDrop"); var frame3Tl = new TimelineLite({paused:true}); rainDrops.each( function (index){ var delay = 1 + (Math.random()*2); var duration = 1 + (Math.random()*3); var left = 7 + (Math.random()*840) + "px" var rainDrop = $(this); $(this).css({'left': left}); frame3Tl.insertMultiple([TweenMax.staggerTo(rainDrop, duration, {css:{rotation:1}, ease:Power1.easeOut, delay:delay, repeat:-1}), TweenMax.staggerTo(rainDrop, duration, {css:{rotate:"1deg", top:"504px"}, ease:Linear.easeNone, delay:delay, repeat:-1}), ]); } ) Thanks for your help!
  18. Hi Jack, Just wondering if you had any plans on creating a JS equivalent to TransformManager in addition to the newly released Tween library. Thanks!
×