Search the Community

I have got this snippet of gsap code working pretty well to adapt my 1280x768 webgame to almost any mobile viewport size. It's not perfect, but I think it's pretty close. I'm looking for any constructive advice or ways to improve this method as adapting viewport sizes is kind of a pain. // disable all mobile dragging of webpage $("html").on("touchmove", function(e){ // only disable dragging of html element if(e.target===this){ e.preventDefault(); } }); // make html page scaling originate from top-left corner TweenMax.set("html", { transformOrigin:"0 0" }); function resizeWindow(){ var w=window.innerWidth; var h=window.innerHeight; // width less than 1280? if(w<1280){ TweenMax.set("html",{scaleX:w/1280}); }else{ TweenMax.set("html",{scaleX:1}); } // height less than 768? if(h<768){ TweenMax.set("html",{scaleY:h/768}); }else{ TweenMax.set("html",{scaleY:1}); } } $(window).on("resize", function(){ // only do this for mobile devices if(isMobile===true){ // do not resize if focusing on an input or the keyboard will squish the whole webpage if(inputFocus===false){ resizeWindow(); } } });

Hello there, As a new user of your fabulous library, I'm experimenting and I just went into a big issue. On my computer, all is displaying fine but on my iPad and mobile, I've an issue. I'm trying to animate my logo making images coming from the sides to the center of the screen. If on computer the effect is just as I designed it, on the tablet and the mobile phone, the browser resize (scale down) to fit to the new width of the page according to the position of the image on the left (not on the right side). Do i have a way to force browser to keep the page width and not scale down to fit in the logo? Here's a link to the animation: http://francoish.net/test/ Kind regards.

Hi all, this is my first post on this forum. I am working on a mobile calendar which requires to manage a large horizontal drag area combined to a important vertical scroll for a mobile web application (in webkit browser : Safari / Chrome) You will find a mockup attached to this post in order to understand what i am trying to do. This calendar has : - on left side : a vertical list of people (called "fixedView") - on right side : a vertical list of blocks which has a horizontal scrollview (using Draggable) in order to swich days by using drag gesture on axis : x (called "InnerView") These two sides are embedded in a "mainView" which is the page container for calendar. (Please have a look to attached file). In fact, i am trying to use a horizontal Draggable (InnerView) into a container which has a vertical scroll (mainView) I made a lot of research , check mobile performances (Galaxy S3 mini to iPhone5) and tests to try : "Scroll In Scroll" : Adding a vertical Draggable for mainView + Adding a horizontal Draggable for InnerView it "works badly" but don't know how to control vertical & horizontal in order to "lockAxis"; right now you can do diagonal drag which is not good (and bad perfs of course) moreover : with this method, i removed native scroll (provide by webkit with -webkit-overflow-scrolling: touch; which brings low perfs on vertical scroll => My Conclusions :using Greensock Draggable to manage vertical scroll is not possible cause we have very bad perfs on low devices I have to use native scroll provided by webkit for vertical scroll (best perfs.) and use Draggable for horizontal scroll (in InnerView) only Do you agree ? So, this is the problem i can't resolve : When i create a new Draggable for InnerView (params below) with {type : "x"}, i can't do a vertical scroll anymore (for sure). What i would like to do is to detect when user is doing a horizontal or vertical scroll on InnerView (by a swipe or drag gesture) . If User is scrolling horizontaly => we use Draggable Instance for InnerView only if User starts scrolling verticaly => we use a "prevent default" for Dragable to release touch bind and so let the browser do a native vertical scroll (webkit) So for this 2nd point, i don't know how to do this. (I had a look on google, GSAP forums, Docs...) I tried to bind the event with onDragStart method but didn't get it. Do you this this is the right approach ? I cant use a Draggable instance with {type : "x,y"} because it would mean that only "InnerView" will scroll vertically but in our case we need to scroll the entire mainview (which include FixedView + InnerView => so the mainView I had a look to "scrollLeft" and "scrollTop" properties and several code pens but i am still blocked. Hope my post is understandable; if you need more details, do not hesitate. Here Draggable Instance for InnerView : innerView = Draggable.create(innerViewEl, { type : "x", bounds : targetStageEl, throwProps : true, force3D : params.stage.force3D, edgeResistance : params.stage.edgeResistance, dragResistance : params.stage.dragResistance, // dragClickables : true, lockAxis : true, // zIndexBoost : false, snap: { x: function(endValue) { return Math.round(endValue / contextInterface._width) * contextInterface._width; } } }); Here DraggableInstance for MainView (bad perf for vertical scroll) mainView = Draggable.create(mainViewEl, { type : "y", bounds : {minY:0, maxY:-3000}, //SimulateLongScroll throwProps : true, force3D : false, // params.stage.force3D, edgeResistance : params.stage.edgeResistance, dragResistance : params.stage.dragResistance, dragClickables : true, lockAxis : true }); Thanks in advance.

I was wondering if anyone could help me with an issue involving TweenMax and Easeljs. We're nearing completion of a game built in EaselJS, and just in the device testing phase. We're finding on some lower end devices, such as the iPhone 4 (iOS7), that whenever the framerate drops from our standard of 24 to around 18 or less, any TweenMax tweens currently running will appear to run at an incredibly low framerate compared to anything else. Other non-tweened movements will continue as you would expect at the framerate drop, but we'll only see as little as three frames in any one TweenMax tween - the start properties, maybe one or two frames somewhere in the middle, and eventually the end properties applied to the object, and that's about it. Very odd. It makes it look like the game is struggling much more than it actually is, as everything not tweened is often running at a reasonable rate. Originally we added an event listener to TweenMax's ticker, telling it to update the canvas on tick but this resulted in a lot of performance issues, as it was trying to update the canvas more often than it needed to. So now we just update the canvas on the EaselJS ticker update. I've since tried setting the TweenMax ticker's fps property to whatever the current easel framerate is, and this is adjusted each frame. This generally improves the animation speed of the tweens quite a bit, but they're still not updating as smoothly as any other animations we have playing on screen during these slightly more intensive moments. The canvas is continuing to update fine, so it seems to be that TweenMax isn't updating the values as frequently as it should be. Does anyone have any idea what might be happening? Is there a relatively easy way to manually update the progress of the tweens, so that the canvas ticker and the TweenMax ticker can be properly synced? Thank you

Helly everybody, I was hoping someone out there might be able to provide some info on applying the greensock throwprops plugin to a vertical scrolling nav menu for an android app. I have tried modifying the code from the throwprops page, but it uses a textfield, i want buttons inside a movie clip... Is that even possible? Can anybody point out any useful tuts or articles? or would someone like to view the file? Thanks a bunch everybody, Alex

Hi Everybody, Can you share your approaches for conditionally disabling tweenlite/tweenmax tweens? For example, I have some divs sliding in from the left on a desktop site, but for a width less than 720px i'd like to disable the animation. Any example code, ideas would be very helpful. Thanks!

Hello Everyone! I have been working with Edge Animate along with PhoneGap when packaging my applications. The platform serves a number of essential purposes. But, the maximum size is not large enough, resulting in choppy animations. In your experience, what is the fastest open-source platform you have used with GreenSock? Thanks for your help! Simon

Hello Greensock community, A small question that had me scratching my head late last night. I have a simple mobile slide-out menu on http://swizzy.gingersoulrecords.com/ (below 767 px browser width, trigger is in the upper left). If you use a desktop browser to narrow your browser and trigger the slide-out animation, it's smooth as butter...but on an actual mobile device (iPhone 4 in my case), it gets a little choppy as it has to 'push' the lorem ipsum down as it expands. Interestingly, if I get rid of the text and leave just the menu there, it has nothing to 'push down' by expanding and slides down perfectly with no choppiness. This may be due to my device being slow, but I'm thinking it's because Greensock has to do double duty - animating the transition of the target and then animating the 'push down' of the non-targeted content area. I tried adding the z(0.1) trick to kick for hardware acceleration, but that didn't seem to do much for me. Anyone want to open http://swizzy.gingersoulrecords.com/ on a mobile device and compare the slidedown animation performance with desktop? I may just design around this (I think a fixed, persistent nav is better for mobile anyways), but I imagine that one of my greensock animations will be 'pushing' content in the future, so I'd like some help understanding this. Thank you! Dave Bloom Ginger Soul Records

Hi, I'm looking at optimizing my code as much as possible using greensock v11 (+ starling and feathers) and Adobe Scout. I could identify the broadcast of many "progress" events as a place that takes quite a bit my iphone 4 cpu time. Since I do not add any callback to onProgress, I did expect the library to not broadcast those events. But after looking at the source code, it seems that, as I use a GroupLoader with subloaders (because I load textures atlases with .png + .xml at the same time), the GroupLoader will register listener for those events on it's childs anyway. Is there something I can do ? Thanks, Sebastien

I work alot in Flash, and haven't tried anything for mobile yet.. Just wondering how the community is feeling about it.. How amazing is it? A list of known bugs? Things TO DO, and NOT To Do? Thanks,