Jump to content
Search Community

draggable + throwprops slider similar to fullpage

Grommas Dietz test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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
Link to comment
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.

Link to comment
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
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...