jermbo

Here is a solution to dragging and reordering divs, vertically. I was wondering if someone could check my code and see if there is anything I can optimize? ( Original idea was from Blake http://codepen.io/osublake/pen/zxZQXX )

NodeJS is built using the V8 Engine by Google. DOM and Window are browser items, things like the DOM and window don't exist in NodeJS. Disclaimer : I've used node, but not an expert by any means.

This is why I LOVE GSAP! I am having the same exact problem being described here in my current project. At first I was doing what the other forum replies suggested, by disabling the ones not in play. That works, but kills phone performance. I have been pulling my hair out trying to figure out a performant way of doing this. Love the new updates as well!!

That is SUPER useful. When is this expected to be released? Is there away to lock it on the x or y axis? Here is what I currently have, and works perfectly when I drag left and right. But the state change also happens when I swipe up and down. Draggable.create( $this, { type : 'x', edgeResistance : 0.2, throwProps : true, minimumMovement : 100, lockAxis : true, maxDuration : 0.5, bounds : { minX : -gridWidth, maxX : gridWidth }, onDragEnd : function ( e ) { target = e.target; current = ( current < childLength - 1 ) ? ++current : 0; updateHero( target ); updateHeroText( target, current ); }, onThrowComplete : function () { TweenLite.set( $this, { clearProps : "transform, z-index" } ); resetText( target ); } }

I noticed things didn't work on the phone, and I figured out that it's because the requestAnimationFrame. Here is an example that would work in a lot of different situations. I see Chrome gives me a waring, telling me to use the standard 'requestAnimationFrame', but I can live with a warning. // FPS Tests var fps = document.getElementById('fps'), startTime = Date.now(), frame = 0, requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; function tick() { var time = Date.now(); frame++; if (time - startTime > 1000) { fps.innerHTML = Number(frame / ((time - startTime) / 1000)).toFixed(1) + ' fps'; startTime = time; frame = 0; } requestAnimationFrame(tick); } TweenLite.delayedCall( 1, tick );

This is perfect! Thank you. The reason I need the display is because I am doing testing on mobile devices that I don't always have access to dev tools.

I am trying to do a FPS test on my animation, but I am not sure I fully understand how and why the speed test example is working. I have forked a couple of the GSAP examples and added the fps code, but everything is overing around 90 - 101 fps. Is that right? Can some one explain to me how to properly get FPS in any animation? I have messed with the animations a little bit, trying to get them to show a different result than 100 fps.. Here are some of the examples I have forked. http://codepen.io/jermbo/pen/azyGEN http://codepen.io/jermbo/pen/azyGVd http://codepen.io/jermbo/pen/NPvMvO http://codepen.io/jermbo/pen/azyGJv http://codepen.io/jermbo/pen/BydxZx

I knew it was something stupid simple like that. Thanks! ( face palm )

I am creating a simple todo app that when you slide to the right, it reveals a delete box. That works fine. But when I swipe left it settles into -11px. I dont' know why. Any idea why this does this?

Thank you! I did try to do the delay() in different spots and this does not solve my problem. I used the delayedCall for the win!

Hello, I am have a simple animation that hides and shows the navigation. I made this into a TimelineMax sequence where on mouseenter it plays the time line, and on mouseleave it reverses the time line. With out setting a timer for 2 seconds, how can I delay the start of the reverse when the user rolls off? Here is what I currently have. var navTL = new TimelineMax(); navTL.to( $navMenu, 2, { alpha : 1, left : 0, ease : Strong.easeOut }, 'start' ) .staggerTo( $navMenu.find( '.top-btn' ), 1, { alpha : 1 }, 0.2, 'start' ); navTL.pause(); $navArea.on( 'mouseenter',function ( e ){ navTL.timeScale( 1 ).play(); } ).on( 'mouseleave', function (){ navTL.timeScale( 3 ).reverse(); } ); I tried adding things like navTL.delay( 2 ); to the mouse leave function And tried adding a repeat delay to the time line its self. But since I am not yoyo-ing that doesn't really come into play. I am looking for a GSAP solution to this. I can make a settimeout function but I don't think that is the cleanest way. Thanks in advance for your help. Jermbo

Hey Jonathan, First thank you for your quick response! Second, w....t....f...! I was up all night last night trying to figure this out and it was, was a stupid position!! The funny part about that is I took it out in earlier revisions of the trial.. and didn't think to add it back in. *FacePalm* Hello rhernando, thanks! I had already had in mind what I was going to do, but this is definitely making me think about it in a different way.

I am trying to make an interactive map with the draggable plugin that zooms in and out. I have made my image an SVG so it can scale well, and my location dots are css. But i have been running into two issues. 1. Since my map is longer than the view port, i can't seem to see the bottom of the map. it keeps scrolling back to the middle if i drag upwards. 2. All the zooming solutions I have found have only been for images. I need to zoom all the elements in the entire div. I started to create my own zoom, which zooms the whole div and the elements in side it. But this presents a couple of issues. First, it zooms in and out at the same spot, I would like it to zoom into the current mouse location. And second if I zoom out at the edge, the div goes out of the visible boundaries so i can't drag it around. As per your requests I created a codepen, http://codepen.io/jermbo/full/LktfB , and I realize this is a very specific situation. Any direction would be greatly appreciated. I just need a push in the right direction and I got the rest of the map functionality. Thanks in advance!! *Plugin Request : Zoomable. If this were a greensock plugin like Draggable I would be the happiest developer in the world!

Is there a plan to build a LoaderMax javascript equivalent?