martis

Well, I have tried a few things and cannot figure out how to get interactions on a layer UNDER a draggable object or vice versa, how to get interactions on the draggable with a layer OVER it. Is there any hope in using the onClick callback and define the scope of the site? or is that only for child elements of the draggable object? I have an idea to put the drag (without throwprops) functionality on the actual site layer then onDragEnd create a custom throwProps on an invisible bottom 3D layer that moves that layer smoothly and updates the site layer to its position... Not quite sure how to work this out, suggestions on either onClick or this method?

Thanks Jack, Really appreciate your advice, I am going to try the things you mentioned above. Quick question: Do you have some sort of list that details which attributes (ie. scaleX vs width) perform better than others? Would be great to know which attributes perform the best, especially on mobile. UPDATE: Good news: I had success using the proxy method... smooth drag, smooth animations/scroll on flick. Bad news: Since I have the proxy dragger on top of my content I am not able to interact with the site layer (click on the first box). If I have put the proxy under the site layer I cannot interact with the proxy http://thegeminisociety.com/dragTest_proxy/ Performance is good, now to solve the interaction problem. Suggestions?

Hey guys, Been struggling with this one, would love any suggestions at this point. I am using draggable with throwprops to create a mobile site that can be scrolled with animations (iOS does not allow DOM updates during native scrolling) All my elements inside the force3D:true scroll container animate chunky, but the container itself scrolls beautifully. Can anyone think of a work around method where I can de-couple the elements inside the scroll container so they don't live inside the force3D:true container? I created 2 simple examples below: *** Please use ipad or iphone to view (shows the results clearly) force3D:false on the container: smooth drag animations, sluggish throwProps flick http://thegeminisociety.com/dragTest_no3D/ force3D:true: chunky animations on drag, smooth throwProps flick http://thegeminisociety.com/dragTest_3D/ I feel like I am so close, I really want to figure out how to get the best of both worlds!

Gotcha, I think I am at a catch-22... If I have force3D: false, the drag and inside animations are super smooth, but the throwProps movement of the container is laggy View on iOS (iphone5 or ipad3): http://www.thegeminisociety.com/gia_force3D_false If I have force3D: true, the drag and inside animations stutter, but the throwPropss movement of the container is super smooth. Not to mention the introduction animation wonks out a bit. View on iOS (iphone5 or ipad3): http://www.thegeminisociety.com/gia_force3D_true I tried to toggle them, but I get weird screen flickers and the inside animations during flick are still laggy... View on iOS (iphone5 or ipad3): http://www.thegeminisociety.com/gia_force3D_toggle I feel like I am so close, I really want to figure out how to get the best of both worlds! Sorry about the big load

Thanks guys, I will look into creating a custom throwProp after the drag ends... Any advice on easily getting the velocity at dragEnd? I think I am seeing the stuttering onDrag when force3D is true due to the elements being inside the object that is being dragged. Will post my final example when I figure this out

I have a working draggable site with throwprops... I have animations that play when dragging, and I want the animations to continue to play while the throwprops finishes its inertia. When I have Force3D set to TRUE: Animations during the drag stutter, Inertia throwprops is smooth When I have Force3D set to FALSE: Animations during the drag are smooth, Inertia throwprops stutters. My first questions is: How can I toggle Force3D to FALSE during the drag and toggle it to TRUE when the throw props begins? My second question is: How can I keep calling my processMobileTimeline function during the Interia throwprops? I pasted me code... My first guess is I need to separate the Draggable call from the throwProps? function setupDraggable() { Draggable.create("#site", { type:"y", bounds:$('#siteContainer'), force3D:false, onDrag:function () { processMobileTimeline(this.y); }, onDragStart:function() { force3D:false; }, onDragEnd:function() { force3D:true; }, edgeResistance:0.5, throwProps:true }); }

Hi, I am trying to enable tween animation on scroll for mobile. How would I go about making my whole site (#site, 9400px tall) draggable to avoid using native scroll on mobile... so that I can maybe get animations on scroll I am trying this, but it keeps limiting itself to the top and bottom of the iphone's browser Draggable.create("#site", { type:"scrollTop", bounds:{top:-9400, left:0, width:0, height:9400}, onDrag:function () { console.log(this.y); }, edgeResistance:0.5, throwProps:true }); Thanks! UPDATE: I ended up wrapping my #site in a container and it is working now

Nm, event.target.content.parent worked

Hey guys, Trying to figure out how to access the "container" on my onImageLoad function, any help is appreciated. Thanks! private function loadAsset(asset : String, holder : *) : void { var loader:ImageLoader = new ImageLoader(asset, {container:holder, noCache:true, onComplete:onImageLoad}); loader.load(); } private function onImageLoad(event:LoaderEvent):void { // get container here }

Hey guys, I am trying to "mask" on a div from the bottom up. I would love if there is just a simple way to tween the div's height value from the *bottom* point. I tried doing the transformOrigin on bottom left, but did not have any luck. I also tried setting the container to overflow:hidden, then shifting all the content above the container, then moving the container up while moving the content down at the same rate. This works, but I don't think its the most efficient solution. Thanks!

Thanks for posting this. I actually moved away from tweening the WIDTH of the div and put a div OVER the background image with a white background and am scaling the scaleX of that white cover to achieve the same effect. No wiggle anymore! I don't think iOS liked changing the width of a div, with a background image, at a zoomed out viewport

Yeah, it's odd... this wiggle just started appearing. Do you have older versions I could test against? Maybe pre any iOS fixes?

The wiggle is most apparent on 1st gen ipad. Looks like the background image is shifting left and right 1 pixel while it plays (towards the end of the tween).

I got the latest codebase and was looking at my site on ipad. http://www.thegeminisociety.com I notice that when the "OF" animates on it wiggles. Any suggestions? Here is my code JS function animateAboutUs() { TweenMax.staggerFrom([$sons, $of, $zeus], 1, {css: {width:"0"}, ease:Quad.easeOut, delay:1}, .5) TweenMax.set([$sons, $of, $zeus], {css: {autoAlpha:1}}); TweenMax.to($introCopy, 1, {css:{opacity:1}, ease:Quad.easeOut, delay:3}); } CSS #of { background-image: url('../img/logo-of.jpg'); width: 400px; height: 204px; opacity: 0; filter:alpha(opacity=0); /* For IE8 and earlier */ } UPDATE: I changed the width of the div from 400 to 600 and it seemed to help it a bit. I wonder if it has anything to do with the WebkitPerspective or WebkitBackfaceVisibility fixes

Oh man, I have to get used to how JS works with calling a function and passing a function! I updated my code to do this: $(document).ready(main.init); $(window).load(main.animateAboutUs); I do all my caching, etc in init and now call the animate function on window.load. Everything seems to be working perfectly now! At least we uncovered an issue within webkit lol. But seriously, thanks for your help looking into this... I will be around to help uncover more issues I'm sure

Over the last 8 years I have made my living creating Flash experiences. I was very sad to see the decline of it. I feel like we have taken a step backwards in the interactive space due to mobile/browser limitations and inconsistencies. With that being said we must push forward, and come up with new, inventive, high performing experiences within these limitations. I have had to relearn HTML/JS/CSS. The more I do it, the more I enjoy it (thankfully). I am part of a digital studio here in Austin, TX. We had a really nice flash site up until maybe 2 months ago when I rebuilt a totally new site using JS/GSAP. Feel free to check it out: http://www.thegeminisociety.com/ Oh, and a BIG shout-out to greensock for making the transition MUCH easier and MUCH more appealing

Downloaded and tried the new codebase.... The flicker is gone. After about 2-3 page reloads the animation stops rendering correctly (same issue). I added back in the jQuery.animate and it renders correctly every time. http://www.thegemini.../index_fix.html (visit on iOS and reload, should not render correctly after a few)

Wow, what a horrific bug in mobile safari... Glad I could help you uncover it. And yes, I really should implement the stagger from code, next on my list! Thanks for being so persistent on tracking down/fixing odd and strange bugs, its why I use your products! I will try your new version and let you know how it performs!

Yes, 100% sure that the only thing I change is adding in the jQuery.animate call before any tweens. I tried out the new version, and I am getting weird flickers on the initial animation. I am beginning to wonder if it has something to do with tweening a div's width with a background image. Check this on iOS.... http://thegeminisociety.com/index_fix.html Works great on safari desktop. Really wish I could help you track this one down!

Hey Jack, I did not have the jQuery line in there to begin with. It only started playing every time when I added in the jQuery line.

Thanks for looking into this everyone. The fact remains that the animation had spotty results when I left out the jQuery.animate on mobile safari. With the jQuery.animate function firing first it has NEVER missed the entire animation on reload. Sure, caching would be great thing to implement, but its not the cause or solution. I'm pretty baffled as to why this solved the issue.

I tried downloading the latest version and still had the animation not play sometimes on reload (mobile safari). I tried adding in TweenMax.ticker.useRAF(false); (I am using TweenMax for pause/resume) and had the same result (sometimes would not display). Weird yeah?

Thanks, glad you like the page! So I found a solution, a very odd one, but a solution. I tried setting more delay on the animations and I had the same results. I then realized if I touched the screen the animations would come on. I finally tried putting a jQuery animation BEFORE my tweens and wa-la it plays the animation EVERYTIME. I am baffled as to why my solution works. Does jQuery.animate somehow force the page to render? Here is my code... the jQuery.animate somehow resolved the issue? function animateAboutUs() { var sons = $('#sons'); var of = $('#of'); var zeus = $('#zeus'); var introCopy = $('#introCopy'); sons.animate({opacity:1}, 1000); TweenMax.to(sons, 1, {css:{width:"797px"}, ease:Quad.easeOut, delay:1}); TweenMax.to(of, 1, {css:{width:"386px"}, ease:Quad.easeOut, delay:1.5}); TweenMax.to(zeus, 1, {css:{width:"758px"}, ease:Quad.easeOut, delay:2}); TweenMax.to(introCopy, 1, {css:{opacity:1}, ease:Quad.easeOut, delay:3}); TweenMax.from(introCopy, 1, {css:{top:"50px"}, ease:Quad.easeOut, delay:3}); }

Hey guys, I have found an odd issue, not sure if it is Tween, cache, or browser related, BUT.... On first load of this page it runs perfectly on iphone/ipad... http://www.thegeminisociety.com/ When I RELOAD the page the animation only shows the tail end. I am using this at the bottom of my page to fire off my JS using JQuery.... <script> $(document).ready(init()); </script> I call my animation function at the end of the chain in init(). Does anyone know how I might track this issue down? Works perfectly on desktop browsers, but weirds out on mobile safari. Thanks! UPDATE: I see the animation on reload if I TOUCH the screen after reload. This is really weird!

Hey Carl, When you say you realized a big part of the performance was redrawing a large canvas repeatedly could you elaborate? I am redrawing a large canvas when TweenLite ticks, were you redrawing even when TweenLite was not ticking? Would it make more sense to create individual canvases for each object and tween those? Thanks!