Jean-Tilapin

Codepen (work in progress) : 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.

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 ?

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 ?

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.

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.

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.