gregor Posted April 9 Share Posted April 9 Hi, I wonder how I could animate elements of a grid that can be dragged in x,y direction. $Draggable.create(el_carsGrid.value, { bounds: el_carsGridWrapper.value, onDrag: function (e) { // calculations by my own? }, }); Should I use the onDragFunction and then check for each element if it is in the viewport or is there already a gsap solution and I didn't find it in the docs? ScrollTrigger.batch will not work, because there is no scrollevent... Link to comment Share on other sites More sharing options...
Rodrigo Posted April 9 Share Posted April 9 Hi, Is really hard to know what you're trying to do without a minimal demo. I don't know any limitation that wouldn't allow you to drag elements of a grid, maybe the only suggestion would be to not drag the direct child of the grid parent container, just as a precaution if you end up reparenting the elements, if not that shouldn't be an issue at all. Maybe this demo can demonstrate the capacities the Draggable Plugin has: See the Pen Pqwxvw by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
gregor Posted April 10 Author Share Posted April 10 Hi, Ah no, I think I didn't explain it well. the whole grid can be dragged and the grid items should be animated when they are visible in the viewport. this is the markup. <div ref="el_carsGridWrapper" class="bg-white h-screen relative overflow-hidden" > <div ref="el_carsGrid" class="relative grid grid-cols-4 w-[800px] origin-top-left" > <div @click="navigateTo($event)" v-for="i in 50" class="aspect-square border-r border-b border-white-dirty p-2" > <img class="el_car w-full h-full object-contain" :src="carsURL()" /> </div> </div> </div> I will later provide a codepen demo if this is not clear enough. Link to comment Share on other sites More sharing options...
gregor Posted April 10 Author Share Posted April 10 ok here is the demo See the Pen XWQqYBr by destroy90210 (@destroy90210) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted April 10 Share Posted April 10 7 hours ago, gregor said: the whole grid can be dragged and the grid items should be animated when they are visible in the viewport. Ahh yeah I see what you mean now. That can definitely be done but requires a bit of custom logic in order to get those elements. That is beyond the scope of what we do in these free forums, unfortunately we don't have the time resources to provide free general constulting and create complex custom solutions for our users. We offer paid consulting services and you can post in the Jobs & Freelance forums to get help there as well. My first approach would be to loop through the elements and create a lookup table/object that stores the position of each element either using getBoundingClientRect or the offset positions (based on the positioned parent element) and based on the x and y values reported by Draggable you can check which elements are in the visible section of the container: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft Happy Tweening! Link to comment Share on other sites More sharing options...
gregor Posted April 10 Author Share Posted April 10 yeah for sure I just wanted to know if there is already a out of the box "gsap solution", because there are so many plugins and helper functions that it is easy to overlook something thanks for your reply Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now