Search the Community
Showing results for tags 'js'.
Found 102 results
-
My colleague had scaled a DIV container with text/vector graphics. It looks super sharp on a retina screen in firefox, but on a regular monitor he has connected it looks blurry. For me it looks like on the retina it has scaled the fonts, but on the regular screen it seems like it has bitmaped and scaled (everything is blurry) Any workarounds? We used Elements inspector to check the width/height after scale and it´s whole pixel values.
-
Hello, EDIT: I'm looking for 3D Planes in 3D space, like Flash's native 3D planes and like CSS3 3D transforms. Hard planes rotating & moving in X Y Z. I'm looking for some advice on how I may achieve a 3D Image Flip effect using GSAP JS, in the Canvas. The "cards" will be Bitmaps with transparent areas (PNGs) I intend to re-create this: http://www.westfieldbrochure.com That's a small presentation I crated using GSAP JS but in that case I used CS3 3D transforms. I would like to try it in Canvas now. But I have no idea how to start. If you guys could give me some advice I would be really grateful. Thanks in advance AB
-
Hi, I am new to GreenSock and trying to use Draggable plug in of GreenSock. I have added the JS libraries in following order <script src="../../../js/jquery-1.10.1.min.js"></script> <script src="../../../js/jquery-ui.min.js"></script> <script src="../../../js/greensock/plugins/ThrowPropsPlugin.min.js"></script> <script src="../../../js/greensock/TweenMax.min.js"></script> <script src="../../../js/greensock/plugins/Draggable.min.js"></script> My HTML code structure is as follows: <div id="imageContainer"> <div class="galleryImg"></div> </div> I completely flush #imageContainer and add few elements, with class name galleryImg, to it dynamically. To make the imageContainer draggable I added following code in my JS Draggable.create("#imageContainer"); However, when I try to drag the element, an error is thrown and the element is not draggable. The error from FireBug is as follows: TypeError: i._gsTransform is undefined ...},this.content=o,this.element=t,this.enable()},H=function(i,n){t.call(this,i),i The error also occurs as soon as I click (mouseDownEvent) the imageContainer. Is there anything am I doing wrong over here ? Which JS files do I need to add to use Draggable? Where can I find standalone sample examples on how to use GreenSock plugins? (e.g. JQuery has this "View Source" link which can display full HTML to understand the whole example) Please guide.
-
Hello, I've got an animation of some objects looping through a bezier using the BezierPlugin. I want to fire a function to make the objects stop with an ease, wherever they are but along the bezier curve. Imagine a racetrack and there's suddenly a red flag, all the cars need to come to a halt all of a sudden. How would I go about that? I tried overwriting the tween but it just stops. Another question as well on how the bezier the plugin draws, how can I make it not start drawing the bezier from x:0 y:0. Say I want it to start on the middle of the stage instead. Thanks!
-
I'd like to pause my timeline at a particular point. How do I do this? This is the code I have so far. http://hastebin.com/soqelufado.pl The code repeats, but I'd like to pause it before it repeats. I figure that I should do this my providing a parameter to the final tween, which currently looks like this: . to( $(els).eq(2), 2, { left: 0, delay : 3 } ) So, how do I make this tween pause after it runs? Also, if I'm right, and there is documentation for this. where is it? Thanks.
-
On all browsers I'm getting a Uncaught TypeError: Cannot read property 'style' of null This is the culprit: v = function(t, e) { var s, r, n, a = t.style; Uncaught TypeError: Cannot read property 'style' of null if (void 0 === a[e]) { for (n = ["O", "Moz", "ms", "Ms", "Webkit"], r = 5, s = e.charAt(0).toUpperCase() + e.substr(1); --r > -1 && void 0 === a[n[r] + s]; ) ; if (0 > r) return ""; i = 3 === r ? "ms" : n[r], e = i + s } return e } It's all obfuscated so I'm not too sure what's going on here. Why that function is even running on load when no animations have run is beyond me. Still happens on an isolated page with this stack: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ColorPropsPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/TextPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"></script> This may be an artifact of obfuscation? Was still happening on other versions of 1.10.x
-
First of all I would like to thank you for creating GSAP for JS its simply Amazing! I was checking out : http://www.greensock.com/customease/ and thought it would be amazing to be able to do something like that in JS/HTML5, so I thought I'll ask. Mate it may sound a little off-topic but is there a way to maybe draw such a bezier curve in HTML5/Javascript? I want to ask a a animate an object along the bezier path. Is it possible to maybe do something like this, where user can edit the bezier curve? I hope I make sense, please pardon me if I don't as I am pretty new to JS/jQuery. Looking forward to hearing about it. Thanks in advance. Praney
-
I've been having an issue using TweenMax and setting the css properties of an element. It seems to be automatically picking out a z-index and applying it to the style of the element. I'm assuming this is something that was added as a quick fix for performance or css3 animation flickering as backface-visibility is also added without me requesting it (which is a whole different issue and really bogs down performance on iOS Safari). The code is: TweenMax.set(element, {css:{y:0}}); This ends up being: <div class="header" style="z-index: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate(0px, 0px); ">...</div> The problem is the z-index on the style attribute is overriding the z-index i have applied in my stylesheet. And as it sets the value to 0, my element just disappears. I can manually set the z-index in the tween and fix that issue but i shouldn't have to worry about updating that value anywhere other than my css. Is there something that I'm applying improperly? Maybe another parameter that will remove this default behavior (tried autoRound: false but didn't work)? If this is the intended behavior might i suggest getting the element's z-index and applying that value to the style attribute so to not override it to 0. Thank you for this awesome platform. I've been using greensock for such a long time and so glad it made it to JS.
-
Simple HTML5 example that tweens embedded SVG graphics. tween_svg_example.zip <embed id="svgBoard" src="board.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgPeopleRight" src="people_right.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgPeopleLeft" src="people_left.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgText" src="text.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <script> function $(id){ return document.getElementById(id); } TweenMax.from( $('svgBoard'), 2, { delay:1, css:{top:-300}, ease:Expo.easeInOut } ); TweenMax.from( $('svgPeopleRight'), 1, { delay:2, css:{autoAlpha:0} } ); TweenMax.from( $('svgPeopleLeft'), 2, { delay:3, css:{left:-350}, ease:Strong.easeOut } ); TweenMax.from( $('svgText'), 2, { delay:5, css:{autoAlpha:0} } ); </script>
-
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? -
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
-
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
-
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]); }
-
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?
-
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
-
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.
-
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
-
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 -
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.
-
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...
-
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!
-
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?
-
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!
-
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...
-
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. ?
