Jump to content


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

4,338 profile views

jermbo's Achievements

  1. 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 )
  2. 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.
  3. 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!!
  4. jermbo

    Click test distance

    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 ); } }
  5. jermbo

    FPS Examples

    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 );
  6. jermbo

    FPS Examples

    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.
  7. jermbo

    FPS Examples

    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
  8. jermbo

    Drag to Delete

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

    Drag to Delete

    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?
  10. 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!
  11. 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
  12. 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.
  13. 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!
  14. Is there a plan to build a LoaderMax javascript equivalent?