We Keep Coding

Creating a side panel similar to code pen

I am trying to create a side panel similar to that of codepen editor in react, where you can drag to adjust the size of the different editors.
If I drag an editor header towards the bottom low enough, the editor below it will follow, almost as if I have appended that component to the drag, likewise if i try ti drag the header upwards. I have built the layout to my liking with a similar concept to the accordion from material UI:
https://mui.com/material-ui/react-accordion/
I was also able to mimic the on click behaviors of the header from codepen, for example, double click would open the editor to full size and triple click will open all evenly by keeping track of the heights of all the 'containers' in a useState hook. However, I am having trouble with the dragging part. I am looking for some suggestions for good libraries/ideas to use to help me achieve this.
Currently I am using framer motion to make the expanding of the container more 'smooth'.
https://www.framer.com/docs/transition/
I noticed that they also have dragging capabilities which I am also exploring. My idea is to have an onDrag for each of the headers. Depending on which header I am dragging, if I drag down until my container size is 0, I start shrinking the container below it and then the one below it and so on and so forth. I am able to get the Y property from the onDrag function but I am a bit hesitant to do my calculations in x/y coordinates. Does anyone have any suggestions or any libraries that might make this easier?

I don’t know any libraries. I think if you got this far you can probably do it yourself in plain js, using listeners and selectors, etc, or whatever react can provide. Is there something specific that makes you ‘hesitant’? I recently found these which made things easier for me, they might not be 100% relevant but still good to know: getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
That will tell the position relative to the viewport, it was useful for me dragging dividers between panels.
And if you need the position relative to the container:
https://stackoverflow.com/a/11634823/5350539
And if you’re not already, I guess you could look at setting the panel CSS positions using ‘bottom’ (with position absolute or relative), then animating the height to e.g. 30px less than the bottom edge of the upper panel. Tip: while dragging, add a body class to disable user select: user-select: none;

How can angularjs route transitions be animated interactively?

I know how to animate between routes, but how can these animations be made "interactive"? For example, rather than simply triggering a preset slide animation on swipe, I would like the animation to map directly to the user's drag gesture. Another side effect of this type of interaction is that a user should be able to start a transition, but then cancel it using the same gesture.
This sort of pattern seems important for building the sort of animated transitions seen in Google's Material Design. I can accomplish these transitions within a route, but for organizational reasons I would like to be able to do so between routes.
Any examples or descriptions of designs would be greatly appreciated.

I would do this :
Detect touchstart event and trigger behaviour
detect the finger position while moving, and shift your wrapper html element accordingly. Probably with css, like transform3d: translateX( ... )
on touchend, evaluate if the distance is enough to trigger route change
if not, animate back to original position with css transition.
You probably want to have a look at http://hammerjs.github.io/ for gesture detection.
Good luck !

Preventing page rubber band / overscroll while preserving scrollable divs: A WEIRD BUG

I need to disable the bouncy page-level scroll for iOS while preserving the ability to scroll inside a div. The solution to the most popular StackOverflow question on the matter seemed to work for me at first, but I found that with certain positions/transforms, the solution would break.
If I disable -webkit-overflow-scrolling, it works fine, but the user experience without it is greatly diminished in my opinion.
I am using THREE.js's CSS3DRenderer to do the positioning because in the project this is for, I need to composite the dom element on top of a 3D scene and have the cameras match. But essentially, its just adjusting the transforms and nothing more.
I created a CodePen that shows clearly that camera/object position consistently scrolls while blocking page scrolling and another breaks it.
http://codepen.io/aaronmeyers/pen/LKgsG/
please see codepen

Imitate a iPhone swipe view on a webapp (like the weather app)

I'm trying to find a Javascript snippet that I can archive the UIScrollView + UIPageControl effect of the iOS using Javascript and CSS3.
Generating the page control to a dot to each view and do the switching is very easy, but the complicated part it is to do the elastic movement.
I would want to do this myself, but it seems to much work to me, like hours of work, tried googling, but I not found anything. I don't like JQuery but the mobile framework doesn't seems to do this.
If I had to do this by myself, do you guys have any suggested approach? I'm thinking in using a parent div, with a bunch of divs inside for each view. Use the parent with overflow: hidden;
and attach event to the parent view and listen to drags and bind to the horizontal scroll offset. This would be a good way? or using css transitions with left or translate-x would be more smooth?
EDIT:
This is what I tried (not working very well): JSFIDDLE

Yeah,
Im not sure about touch swipes, although i think the 'activate' or 'touchstart' handler might be useful. Using CSS3 transitions to achieve the elastic movement is quite smooth, just alter the left or right style property of your internal div and the transfom will move from its current position to where you need it to be.
This is not the worlds bestt example but have a look here
villasanrafael.eu/Gallery.php

jquery ui draggable accordion stick to mouse in Chrome

I am working on a jquery ui website and have a draggable accordion div that experiences an odd behavior with the mouse sticking only to the scroll bars.
$("#item_accordion").draggable();
This behavior seems to only occur in Google Chrome which is stranger yet. I can eventually get the mouse to let go of the accordion by doing a right-click and moving the mouse quickly. I was curious if anyone have experience, and hopefully solutions, with this isse.
Thanks so much,
Derek

I've had the same issue. Unfortunately I don't know what's causing it since I didn't want to dig too much into JQuery but I was able to work around it by specifying a "handle" for my draggable object. The "handle" is the only place where a drag can be initiated and since my "handle" didn't contain a scrollbar I no longer had this issue.
$('#overlays_dialog').draggable({handle: '.dialog-header'});
overlays_dialog is a div containing a child div with a class of '.dialog-header'.