Antdev

Hello I am trying to achieve something like this: https://asgordon.github.io/rotodrag-js/ I am creating a table top touch screen app and users can approach the table from any angle and select an element of the app to open a modal. As I have no idea which side of the table the user is facing I have no idea which orientation to use for the modal. Hence I would like it so if the user drags the modal towards them it orientates based on the angle the finger is dragging. I would like the modal to stick to the finger similar to how it does in the link above. I have seen an old example using gsap from 2015 but the draggable does not appear to stick to the finger and tends to drift off. https://codepen.io/osublake/pen/KwbxNX Has anyone got an example of this functionality working with gsap? I had implemented dragging and rotating separately like this https://codepen.io/antdev/pen/jOagBVq But I would much prefer the functionality of the rotodrag example above. Edited to add, I have just found this example but it doesn't use Draggable. I need this to work so when you drag the modal it moves and rotates. https://codepen.io/GreenSock/pen/KKgZJMz Thanks Anthony

Thank you very much Trapti - that is a great solution for me. Oh and I like the addition to make the square move back:)

I have now worked out a way to do this using the following: window.scrollTo(0, document.body.scrollHeight); Here is an updated codepen. Not sure if this is the best solution though and if perhaps gsap offers a better solution. https://codepen.io/antdev/pen/eYyzYEd

Thank you for your reply. To try and explain it better. Imagine you are starting at the ground floor of a high rise building and are going to take the elevator upwards. So using touch screen functionality I would drag downwards and the first floor would scroll down into view. The ground floor would move downwards too and out of view. I will look into the link you have provided - thanks again.

Hi there I am making a vertical timeline that will have 10 content areas. I want it so that from the initial view of content area 1 that content area 2 scrolls down from the top rather than scrolling up from below content area 1. The idea is you start at the start of a timeline that continues upward - it makes more sense when testing on a touch screen device. Note the browser scroll bar will not be displayed as this will be packaged up as a full screen app with no browser elements visible. Is there a clever way to do this in ScrollTrigger / GSAP? Thanks in advance Anthony

Thank you OSUblake - yes I agree it is a bit funky. I will stick with the other solution you recommended with the rotation elements.

I am curious what this one does? It looks like the entire card is both draggable and rotatable. https://codepen.io/antdev/pen/mdqNRYQ

Thank you very much for the super fast reply OSUblake. I can see why you are called a Superhero. That looks like an excellent solution that should let me make the right and left sections result in a rotation and the central section just drag.

Hello I would like to have a modal that the user can drag and also rotate. Imagine a photo on a table that is at an angle to me and I want to drag it closer to me but also to rotate it so it is straight. Is there a way to use both the rotate and drag functionality at the same time with Draggable. My quick test didn't work. Thanks Anthony https://codepen.io/antdev/pen/MWONJmW