Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
grommas

draggable + throwprops slider similar to fullpage

Recommended Posts

hello folks

 

first post. and first of all – thank you for the nice work so far. i'm really glad to use all of your stuff. i want to create a fullpage.js like slider based on gsap. i used a couple of resources to build a prototype. the problem: it’s hard to get slides and sections in a loop. it works for vertical navigation, but i have no idea for the horizontal navigation. would be great to get some hints or even modifications / better solutions.

 

best regards

jakob

See the Pen qNOBVz by grommas (@grommas) on CodePen

Share this post


Link to post
Share on other sites

To create complicated UI components, I think it's much easier to use some type of model view architecture. What you're making looks like a grid, so I would use a two-dimensional array for the model.

 

Here's what one looks like.

var grid = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8]
];

Although instead of using numbers, you should use objects, which would be the model for that cell. To access a cell inside the grid, use the y-value as the first index, and the x-value as the second index. So the cell at x=1, y=2 is 7.

var cell = grid[2][1];  // => 7 

Now that you have a cell, you can quickly get other information about it's state like what cells border it, is it at the edge of the grid, etc. Whatever changes you want to make, you would update your model first, and then your UI. This makes handling logic much easier, since you're only doing it one place.

 

Here's a simple example of a grid. If you click anywhere on the screen, you can use the keyboard arrow buttons to move the box around. This is same approach you could take with what you're doing. Whenever you drag or scroll, update the model first to figure out if and when changes to the UI should be made.

 

See the Pen a9cc6ea07c7b4bd228055bd04964d97e?editors=0010 by osublake (@osublake) on CodePen

  • Like 5

Share this post


Link to post
Share on other sites

How would the different cells move around? Do the rows and columns move together as a single unit, or does everything get mixed up like a rubik's cube? If I knew that, I could show you how to shift the cells around.

Share this post


Link to post
Share on other sites

thank you for your help osublake. saw your name already a couple of times. really appreciate! and great idea! kind of hard to get it work with draggable and throwprops, i guess. but i’ll try my best, still have to learn a lot. the rows move together in vertical navigation and separately in horizontal navigation. so everything get mixed up like a rubik’s cube. but each row has a different number of slides / various cells, this is also important as far as i understand your current code.

Share this post


Link to post
Share on other sites

Working with grids can be hard. Try making a Tetris game. How do you go about figuring out where are all the blocks are? I bet a lot of people would try to calculate the distances. I'm sure you could do it that way, but it would probably be a lot of work. A better way would be to create an abstraction of the game board, and work with that instead of the DOM.

 

A two-dimensional array is an excellent abstraction when working with grids. Now we can easily tell where everything is.

 

fY8GhfV.png

 

I created a similar abstraction with my

See the Pen RNLdpz?editors=0010 by osublake (@osublake) on CodePen

. Every tile is represented by a simple unit. A normal sized tile is 1, and a wide tile is 2. If a row can hold 4 units, and there are 5 units in the row, I can easily tell that it's in overflow and send that tile down to the next row. This is all done before updating the layout visually.

 

When using Draggable, it doesn't decide how to lay things out. It just tells the model to update the layout when a certain condition is met. 

 

The model for your grid is real easy to update. All you have to do is shift an array like this.

// Moves a row left or column up
data.push(data.shift());

// Moves a row right or column down
data.unshift(data.pop());

Once you update the model, you can then update the view. To update the view all you have to do is loop through your model, and append the current element. Everything will be in the correct order!

 

To animate it, all you need to do is a simple relative animation. This animates an element right.

tl.fromTo(cell, 0.5, { xPercent: "-=100" }, { xPercent: 0 });

I didn't get a chance to add any Draggable stuff, but you can see how works. If you wanted to keep entire grid area full, you could add clones to empty the area.

 

See the Pen 979176f145bfe526bcbc45a9f6adc804?editors=0010 by osublake (@osublake) on CodePen

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×