styke

You can view the site here: http://hpbdbrii.meteor.com/ Site is very buggy and in progress, but the core of the issue is visible when you try and open the card by dragging the front cover - the applied Matrix3D transformation seems to shrink it in width, even the this is the code that's updating it in my animation ticker function: TweenLite.to(options.el.$left, 0, { force3D : true, transformOrigin : 'center right', rotationY : currentState.leftY, }); If you open the console you will see I'm outputting the intended rotation of the element. If I set the transformation with jQuery, like so: options.el.$left.css('transform', 'rotateY(' + currentState.leftY + 'deg)'); The element will be correctly transformed. Let me know what other information I can provide.

Hey, I'm initializing a draggable instance with the following parameters (simplified): var drag = Draggable.create("main .hide-scrollbar", { type:"scroll", throwProps:true, lockAxis: true, force3D: true, edgeResistance : 0.3, dragResistance : 0.1, maxDuration : 0.5, //Nothing I put here works bounds : { maxY: value }, snap : { x : function(){} }, onThrowComplete : function(){} }); As commented, none of the bounds I set are working. Why is this? I need to be able to control the scroll top min/max values because the inner content I'm dragging is of varying height, and I need to keep it fully within the screen at all times. The only way I've found of doing this otherwise is by explicitly setting the draggable element's height manually, however the app I'm building is for mobiles and the reflow is too expensive.

Title says it all really. Is it possible to init draggable/throwprops on an element which draggable modifies along the x axis, but doesn't activate when it is scrolled natively on the y?

It's pretty much a fancy ad. When my client gets some gambling sites involved more closely, I expect it to become a bit more of a game, but as it at stands you hit the nail on the head

http://winorgamble.co.uk/ Designed and programmed it all myself, been working on this for a while now. Let me know any thoughts

Hey! I was testing on Samsung Galaxy s3 4.3 As I the actual element that was being animated was not animated by GSAP, I had to set 3D rendering to the elements myself. The code that was causing lag was simple, just adding classes with some CSS transforms to elements with transitions very quickly in a recursive function something like this: var shuffle = function () { var _this = this; if (this.rouletteSpinning) { el.removeClass('show'); //some more logic //Select an element based on a random logo slug from the logoSlugs array $('#'+rouletteClass.activeType + '-freebies').find($('[data-slug="' + rouletteClass.logoSlugs[Math.floor(Math.random() * rouletteClass.logoSlugs.length)] + '"]')) .addClass('show'); setTimeout(function () { _this.shuffle() }, x) } } I am animating the rotation. I have lots of images, many of which are large. However I've found that switching on GPU rendering on them, even if they're not being animated, is a good way of increasing page framerate. Thanks so much for your offer, I will PM you a link once it is a little more developed!

To be fair, I haven't tested it on iOS - I will rename this (can I rename topic titles?) to be specific to android browsers, and update in regards to iOS as soon as I've done some testing. Hopefully android won't follow suite anytime soon! It took me way too long and cost way too much to figure out how to get it perfectly smooth!

This has currently only been tested on Android, so take it with a grain of salt for now. So if you've used draggable on some mobile devices, you may have noticed that the animation was choppy, even after all optimization you can think of (I'm looking at you, stock android browser). Even if you did get it smooth you may have not been able to use any other effects on the page as it would cause stuff to lag up, especially if what you are animating is quite large. I've found a way around this by incorporating native CSS transitions into the throwprops animation. The throwprops/draggable combo I used was for rotation, but I'm sure it won't be hard to incorporate this technique for other types of interactons. Take a look: //I initialize on a faux element that also happens to //be the trigger area. We will animate the actual element later on rouletteClass.rouletteObj = Draggable.create('#interaction', { type: "rotation", throwProps: true, resistance: 1000, maxDuration: 10, onPress : function(){ //make sure the element you want to be animating has //something like transform: translate3d(0,0,0) set in css //so that it is GPU enabled // //Also, I use a great plugin, PrefixFree (http://leaverou.github.io/prefixfree/) to //automatcally add prefixes to any css set in javascript //reset position of draggable object $('#spin').css({ //android %$#@#$ stock browser transition fix, //otherwise transition won't stop 'transition' : 'all .001s linear', 'transition-delay' : '-100s', //reset current position 'transform' : 'rotateZ('+this.rotation+'deg)' }); }, onDrag : function (){ var _this = this; //let user move drag element $('#spin').css({'transform' : 'rotateZ('+_this.rotation+'deg)'}); }, onDragEnd: function () { var _this = this; //Set up a transition for the calculated duration of the tween. //I had to use the crazy easing timing to appease the stock //android browser once again $('#spin').css('transition', PrefixFree.prefix + 'transform '+ _this.tween.duration() +'s cubic-bezier(0.165, 0.84, 0.44, 1)'); //Set a transform to carry it to the tween's end position $('#spin').css('transform', 'rotateZ('+_this.endRotation+'deg)'); } }); It still needs a little bit of cleaning, but you get the idea. As I started doing this, I was able to add alot more effects on the page (also via CSS properties), and even on the weakest devices in stock android browser, they would all work buttery smooth! Hopefully this helps someone.

I'm sorry, I'm finding it hard to find the right terminology for my problem. Put simply, I need just the velocity tracking to continue as normal. In regards to the transitions, I want to see how it works with other effects on the page. Otherwise any other animation effects on the page cause the throwprops animation to lag on mobile devices...

Elsewhere in my program I use `ThrowPropsPlugin.getVelocity(this.target, "rotation")` to get velocity and switch the numbers as the roulette spins, getting progressively slower until the animation stops. I have the math skills of a hammer and would not be able to write something similar with just the time and initial velocity The problem with kill is that it kills the whole tween - even the behind the scenes stuff mentioned above. Ideally a solution would kill the animation, but leave the tween working in the background. I'll post a seperate thread if this idea works out.

Hi, I'm making a small HTML5 roulette game. Draggable has so far proved very useful, but I'm running into some problems with performance while the roulette is spinning after it has been let go. I have done everything possible to optimize the animation, and while it is smooth, as soon as I add in effects elsewhere it starts to lag. I have an idea to see if I can increase the performance even further: use draggable to gauge the velocity and duration of the animation, and then set a CSS transition to smoothly spin the roulette to a final state. First off, I need a way to disable the tween initiated by GSAP when the user spins the wheel. I have not been able to find anything that would let me do this in Draggable's documentation yet. I've found that calling this creates an effect of animation stopping: onDragEnd : function(){ this.disable(); this.enable(); // or this.pause(); this.start(); } This stops the animation, but my current program uses the velocity tracker to work - I was wondering if there's a different way that wouldn't require me to reprogram other parts of my script. Also, is there a way to find out the end rotation degrees/how many degrees the wheel is planning on turning for? This would make my code much cleaner and simpler when feeding in the CSS transition. Missed the endRotation property first time round, my bad Thanks

Thanks for all your advice guys. I wasn't able to optimize Draggable and Throwprops this time, however I found that for my requirements (smoothly scroll a container horizontally, manipulate DOM based on container's X position) it was easy enough to do using a combination of stock android browser scrolling, setInterval and jQuery Mobile's scrollstart and scrollstop events. The caveat is that iOS safari doesn't work so well with these events so I had to check which OS the user is on before initializing the appropriate code (thankfully Draggabe and throwprops go with iOS like bread and butter).

Hi all! I'm starting to optimize a site I'm building - I've run into some serious performance issues in regards to Android's stock browser when using Draggable and the throwprops plugin. Every where else it works relatively perfect. I initialize draggable for this page on line 336 of main.js, it's a pretty big function as I initialize all the code to identify when the slide changes section and code to animate the top little menu type thing. If you swipe around you'll notice the elements inside #profile-bottom .inner toggle visibility:hidden if they're off screen. It's unfortunate but this doesn't increase performance by as much as I'd hoped. For some strange reason the slide container has to have overflow set to auto, otherwise the layout fucks up. Not sure if this makes a difference, but there you go. Please, recommend me how I can get the animation smoother on android. It's really choppy at the moment! Thanks! Good night

Hi Rodrigo, Thank you so much for your input! I have incorporated clearProps into my code and now it works perfectly well. I really appreciate your other suggestions too. Have a nice day!

My aim is to create a continuous animation of clouds sailing across the page. As the clouds load, they are added to an animation queue, which is processed every x amount of seconds. These two simple functions are what I'm trying to use to give the effect of the clouds sailing by infinitely and randomly. var floatCloud = function(cloud, time, floatTo, resetY){ TweenLite.to(cloud, time, { ease: Linear.easeNone, x : floatTo, onComplete : function(){ this.invalidate(); resetCloud(this.target, resetY) }}); } var resetCloud = function(cloud, y){ console.log('Cloud being reset: '); console.log(cloud); cloud.css('transform','matrix(1, 0, 0, 1, '+ -cloud.width() +', 0'); if(y){ cloud.css({ 'top' : Math.floor( Math.random() * $(document).innerHeight() - cloud.height() ) }); } floatCloud(cloud, 12, $(document).innerWidth() + cloud.width(), y); } However, it is not working, namely the cloud's X position is not reset. Also, for some reason, after a couple of iterations it stops animating altogether. How can I make sure that animation continues indefinitely and that the elements X position is reset properly? Also, I'm welcome to any suggestions on how I can improve these functions! Thanks for your time, take care! EDIT: Forgot to mention a couple of things - I have a plugin that automatically adds vendor prefixes to jQuery's css() function. Also, strangely enough console logs that a cloud is being reset. However the transformation matrix stays the same - and no animation occurs!