CSS3 Translate 3d Transform with JavaScript Drag

Question

perspective:400px; transform-style: preserve-3d; transform:translateX(-$drawerWidth); transition: #{$transition};

window.onload = addListeners(); function addListeners(){ document.getElementById('app').addEventListener('mousedown', mouseDown, false); window.addEventListener('mouseup', mouseUp, false); } function mouseUp() { window.removeEventListener('mousemove', divMove, true); } function mouseDown(e){ window.addEventListener('mousemove', divMove, true); } function divMove(e){ var div = document.getElementById('app'); div.style.position = 'relative'; div.style.left = e.clientX + 'px'; }

I have a little bit of CSS and a little bit of JS as above. I am trying to drag and reveal a drawer. I want the dragging to not only track the app-canvas with the touches, but I also would like to see the navigation drawer dragging and opening out with the transform tracking 1:1 with the rest of the dragging of the app.

Thoughts? I know this is sort of hard to read so... When you drag a div, another div begin to play it's animations 1:1 with the dragging +1 or -1 along the x-axis.

If you want to see the drag/transform happen in real time, you will need to use the mousemove event as well — tewathia
– tewathia, Commented Feb 18, 2014 at 8:55

kartikluke · Accepted Answer · 2014-02-18 09:21:38Z

1

If you're looking to control CSS animations with Javascript this is an excellent resource.

http://css-tricks.com/controlling-css-animations-transitions-javascript/

Without getting too deep into it the easiest way to go about this is to replace the css transform style with jQuery. Changing it on each mousemove to depict the change.

edited Feb 18, 2014 at 9:21

answered Feb 18, 2014 at 9:05

kartikluke

2,4151 gold badge22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dapinitial Over a year ago

Thanks, I actually found this earlier today. I will update as I move towards a solution... IN JSFIDDLE!

kartikluke Over a year ago

Sure I'll be happy to help.

dapinitial Over a year ago

cool! I am really busy right now, but this is something that I am anxious to work with! Low-priority at the moment unfortunately:(

Collectives™ on Stack Overflow

CSS3 Translate 3d Transform with JavaScript Drag

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related