Search the Community
Showing results for tags 'tiles'.
-
I want to create a parent div with 80% of screen width, and inside of that there should be mini square colorful divs, now the functionality i want it to drag though them inside of that parent div, and see all the divs because there'll be so much divs so it will be hard to see them in 1 place, and also It should show the divs in a grid style. another website (midjourney) using same features uses this draggable.min.js() gsap.(). how to achieve it? you can go to (https://www.midjourney.com/) and test it, just click on the eye icon and it will appear on the hero section
- 1 reply
-
- gsap
- midjourney
- (and 4 more)
-
Hi GSAP team, First of all, thanks again for your work, I'm trying to achieve a specific effect for a project I have sections which look like tiles. When we scroll, the next tile is pinned under the current one and then scrolls naturally with the page once the "tile" is fully shown. Like if you have a deck of cards in your hand and you remove them one by one by pushing them to the top. But inside one tile, I have another Scrolltrigger (the black container in the Codepen) and its start value is calculated "well" but as the tile is pinned for one moment, the start value becomes wrong and I would like to recalculate it but it looks like Scrolltrigger cannot do that Do you have an idea of how I can manage this use case? I did a Codepen to show my issue, the markers are supposed to stick to the top and the bottom of the black box Bonus question: I don't understand why the last ".content" background is cut? Cheers ?
-
Hi, I basically modified this example "https://greensock.com/?example=sortable-grid-using-draggable" but I separated it into multiple isolated sections which can contain tiles (Each section has a bunch of tiles which can be reordered, but is independent of the other sections). It is though possible to move a tile from one section to an other. I'm checking in the "Out of bounds" part if the tile is touching an other section, and if yes, I attach it to that section. Everything is working so far, but there seems to be an issue with the relativo position of Draggable. From what I've seen Draggable uses relative translateX and translateY CSS styles to move arround the elements, but when I move my element to an other section, the div element is attached to the new section, and the tile still has the old translateX value, and therefore drifts away from the cursor as the element is positioned in some other place. Is there any way to reset the dragged element position to be relative to the new position in the DOM, and stay under the cursor? Greetings and thanks.