Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jean-Tilapin

Infinite choice wheel

Recommended Posts

Hello everyone,

 

It's my first post on your forum. I discovered this library with Scrollmagic and I'm since amazed by its quality. Anyway, here's my problem. I'll try my best to explain but It's quite difficult...

 

I want to allow my users to change the proportions on a recipe on my page by clicking on an infinite wheel/list... For example :

Let's say the original recipe is meant for 6 people. Above "ingredients for 6 people" (followed by the list of ingredients), I want to display "5 people", and under "7 people". When clicking on "5 people", "5 people" must take the place and css style of "6", "6" the place of "7", "7" must go down and disappear", and a "4 people" must appear where "5" was. Like an infinite wheel where only 3 items are visible at the same time (with different css styles). Of course, it needs to trigger a function which changes the list of ingredients based on the current proportion...

I can't create on every recipe page a pre-generated wheel of proportions values because some recipes are for "1 pie", another for "800 grams of sushi rice", or "30 cookies". The values of the list can't be under 1, and for example, above 12, proportions should increased by 5, above 50 by 10, above 100 by 25, above 500 by 100.

 

I could drop the idea of this animation, it's simple without. A bit of jQuery to capture the current value and calculate then display the rest. But i really want the list to move...

 

Could anyone help me please ? I can't figure out how to generate hidden fields on my list each time it moves...

 

Thank you.

 

Link to comment
Share on other sites

Hi @Jean-Tilapin

 

I'm having a hard time visualizing what you're asking. Can you provide some sketches or links to something that is close to what you had in mind?

Link to comment
Share on other sites

36 minutes ago, Jean-Tilapin said:

I could drop the idea of this animation, it's simple without. A bit of jQuery to capture the current value and calculate then display the rest. But i really want the list to move...

 

Or better yet, just make a simplified demo without the animations. You can add the animations in later.

 

 

  • Like 2
Link to comment
Share on other sites

Of course ! Here's a picture of the current page with css. Sorry it's in french ;)

So :

- without animation : I can click on '8 personnes', captures the value "8", change the ingredients ("180g de farine" becomes "205g. de farine", etc.) and change the proportions ("6/7/8 personnes " becomes "7/8/9 personnes" with "8 personnes" in black, the others in grey), all with a script using text() and some simple math.

- but what I really would like is creating a slideup/down effect instead of an instant change of values. I can of course make a timeline with {y: 32} or {y:-32} but how can I generate the non yet exisiting values for the next slide effect ("10 personnes", "20 personnes", "1000 personnes") ?

 

Is that clearer ?

Thank you for your time.

 

EDIT : currently trying to create a CodePen, but not sure it really changes anything.

 

proportions.PNG

Link to comment
Share on other sites

Hi @Jean-Tilapin

 

Thanks. I was imaging some sort of pie chart when you said wheel, but I get what you mean now.

 

Couple quick question. Does the wheel actually loop based on some min/max values?  And where are the values coming from? Like an array?

var wheelValues = ["10 personnes", "20 personnes", "1000 personnes"];

 

 

Link to comment
Share on other sites

The original value comes from the member who posted the recipe. The others are created by the script, something like (could be adjusted) :

- if original nb between 1 and 12, then the "more" value could be nb+1, the "less" nb-1;

- else if nb > 12, "more" =  nb+ 5;

- else if nb > 50, "more" = nb + 10;

etc.

As I said, the problem is that some recipes could be for "800 grams of rice", another for "1 pie", etc. So the list of values just can't be 1 more at each click : I will not click 300 times if I want 500g of rice !

The min value must be 1, but the max one...hard to determine. But if it helps, we could fix the max value at...maybe 2 000 ?

 

EDIT : the value list could be fixed...Let's say :

1-2-3-4-5-6-7-8-9-10-11-12-15-20-25-30-35-40-45-50-60-70-80-90-100-125-150-175-200-250-300-350-400-450-500-600-700-800-900-1000-[......]-2000

That list must be tried on multiple recipes to see if these numbers are relevant each time.

Link to comment
Share on other sites

5 minutes ago, Jean-Tilapin said:

As I said, the problem is that some recipes could be for "800 grams of rice", another for "1 pie", etc. So the list of values just can't be 1 more at each click : I will not click 300 times if I want 500g of rice !

 

Hmmm... have you thought about maybe making it draggable? Using the ThrowPropsPlugin with Draggable, you could do something like how setting the alarm on a lot of phones work. That would allow you to easily flick the value to 500g of rice.

 

NpYRBwj.jpg

 

 

Here's a draggable/throwProps demo you can play around with. Notice how you can drag the wheel and the page sections. The ThrowPropsPlugin is a Club GreenSock bonus plugin, so it's not free. I'm not trying to pressure you into becoming a member. This just seems like a perfect use case for it. 

 

See the Pen gnoDc?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Draggable or clickable, sorry, but what difference does it make ? I still have to know the complete list of values to make it work, right ? Or are you suggesting a "0000" to "9999" counter where the user drags one digit at a time to the value he wants ?

Link to comment
Share on other sites

Using draggable with a complete list, going from "0000" to "9999" one digit at a time, or having individual digits similar to the clock really doesn't matter. The main reason I was suggesting draggable is for speed.

 

Using the list you provided above...

1-2-3-4-5-6-7-8-9-10-11-12-15-20-25-30-35-40-45-50-60-70-80-90-100-125-150-175-200-250-300-350-400-450-500-600-700-800-900-1000-[......]-2000

 

If only 3 values are visible at time, it would still take a lot of clicks to get to a value in the middle of the list.

 

It was just a suggestion though. What do you think?

 

And making a codepen would still be good just to get an idea of how you're setting everything up.

Link to comment
Share on other sites

Oh, ok, I see your point. You're right, it would be faster. But I could also allow my members to type in their own value.

 

Considering the trouble to make that idea happen, I might really consider other options.

 

And...I have another idea, but even the CodePen would take time to make. I'll try to explain...

Basically :

- the 3 divs containing the visible values are piled up, with absolutely no white-space or borders. They don't move.

- each div contains 3 values : one visible, vertically centered, the 2 others hidden, above and below (like the image in the previous post). Overflow hidden.

- when the user clicks, each divs makes its 3 values move (with color effect) in the same direction : so, when the visible value of a div goes up or down and becomes hidden, the same value becomes visible in the next div. If the timing is alright, the transition should be invisible.

- at the end of animation, jQuery re-calculates the new values.

 

Does it make sense ?

Link to comment
Share on other sites

The animation part should be pretty easy. It reminds me of some of the stuff posted in this thread.

 

The big thing is just knowing how you want it to behave, like the questions I asked about if it loops and the values to use. I'm sure I can point you to plenty of demos, or maybe set a simple one up for you if I knew the exact behavior.

  • Like 1
Link to comment
Share on other sites

Codepen (work in progress) :

See the Pen LzEMLy by Jean-Tilapin (@Jean-Tilapin) on CodePen

The callback function is the main issue now.

 

Edit : damned, I'm stupid. Losing myself. All these 9 divs are pointless. The whole point is discretly updating the values after the animation.

Link to comment
Share on other sites

I made this demo the other day, and I think it will be easy to modify to do what you want.

 

See the Pen brZLoP?editors=1010 by osublake (@osublake) on CodePen

 

I'll create another version of that later on today.

  • Like 3
Link to comment
Share on other sites

Here's a modified version of that demo with the basic behavior you described. It uses the ModifiersPlugin. With that you can change values while they are animating. Very useful for doing things like wrapping values.

 

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

 

 

  • Like 4
Link to comment
Share on other sites

Thank you for your help and support. I finally reached my objective, using an array of determined values, which made the animation part easy.

I have a new fantasy, now :D

See you around ;)

  • 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.
×