Oscar Rottink

I see what you mean but that wouldn't explain why it's only in the end. And I think I do transform y (the scrollTo). But if you go to my first codepen http://codepen.io/OzBoz/pen/wJOXzY and you scroll really fast with the mouseWheel you see it's not subtile, the elastic tween is just like it's blocked. Now I changed a few things (don't use Scrollto anymore) and it's very smooth http://codepen.io/OzBoz/pen/gmydRr (even if you scroll like crazy). So I'm happy with the second one but I wonder what's different in using scrollTo with same easing and the one without. For my personal common sense they should give the same result.

But if I would understand it right in your theory everything would stutter, but here it only is bad at the top or bottom. Not sure if you guys see what I see so made a little clip. https://fizion.nl/zooi/list.mp4

Hi Manfred, Not really, I think this image makes it a bit more clear The center number of the list will be the active option. For now I use the scrollbutton but if all works well I also want to use dragable so you can also use it very well on tablets etc. But in my codepen youll see that if you scroll somewhere there's that elastic tween. That's ok for now. But if you are at the entire top or bottom of the list the Elastic tween seems cut off. It doesn't animate smooth like the in between options. That's why I thought it might have to do with some room after/before the LI's. I tried several things but it keeps stuttering. I also thought that it might have to do with overwrite:true but that also didn't make a difference. I'm using Chrome but I guess the problem is visible in other browsers as well.

It's been way too long since I used GreenSock but now I've time, a nice idea and trying to get my ideas to work. I think this is a very simple problem but I don't get it. I have a list which is scrollable and that works, also there is a dial which reflects the current state of the scrollable list. The problem is that the tween of the LI's is not very nice at the top (number 0) or at the bottom (number 9). You see it stutters there. I thought that might have to do with margin/padding of the LI's or UL but I don't see it makes any difference. So what am I doing wrong? I tried to look for a solution but it's a bit hard to find the right search words.

ROFL! Haha. Attack! And Blake, what Carl said helped me a lot. Working on http://oscar.maakt.nu/portgrid/ and trying some stuff. Will be nice (I hope).

Hero! I don't like to ask stuff but I'm really happy I did. Thanks! This makes other idea's I have also worth to try.

Hope you guys don't mind but I got a similair question. What I did was drawing a shape in Illustrator with around 20 points and from every point I noted the x and y. That works but it is quite boring. And I have to do more points to get the animation more fluent. The idea is simple, move a bitmap along a (invisible) path, I only drew in Illustrator to get the coordinates. But I wonder if it can be done much simpeler or is it just some boring write down the coordinates? Also took a look at the svg data if I would export it from Illustrator but except for the start point I think it's based on differences between points (like Blakes post makes clear) and not really making things easier in this case.

Smart tip @Dipscom i was always playing with negative delays (which are really hell to use that way) so this makes my life more pretty

Hey @Rodrigo, Maybe you know, I was testing some things and I wonder why the movement is so choppy. If you look at http://codepen.io/OzBoz/pen/RajZqd you see a very slow animation but especially at the end it's not smooth at all. Is it a bug or is it me? edit: i see the width is not using subpixels, so that's what makes it choppy. edit2: fixed if I use x instead of width. edit3: yes! autoround:false did the trick and prevented the width from being whole numbers. Must say that in combination with the other things in the tween I didn't assumed it was neccesary.

'Jump' sounds pretty heavy but it's only like one pixel. And since it zooms pretty hard to see. I can imagine it is annoying though when you notice it. It just shifts a pixel or so. Thought it might be caused by rounding number or so but didn't found a working cure.

Cool @Jonathan, I was just playing around to cheat a bit using Skew for the desired effect but your feedback looks very interesting. I did try something with the preserve-3d but that was in my CSS and well, didn't try all. My skew cheat is here: http://codepen.io/OzBoz/pen/grGVQV

You now scale the entire canvas with your tween. So what you see makes sense. I don't have much experience with canvas but if all circle elements have the same class like '.randCircle' than that's the thing you have to tween. It then will scale all items with that class. Sitting in a bus right now and not sure if it works that way also in a canvas but you have to think in that direction I think.

If I get that far it's ok. But I think I run into trouble because of the perspective part of 3d transforms. Maybe I should try to do it with 2d transforms and skew to just fake it a bit. I keep you posted, appointment now so the puzzle will continue later.

Yeah Dipscom, I think I have to dive in something like this, as I recall right the cos rule you can use if you know one side and one angle.

Thanks @Dipscom, I just have the feeling what I want shouldn't be that complicated but I might be wrong. If I use Chrome to watch one of the transforming elements in the developer tools I see a tooltip with the actual size in pixels (width) of the transforming element. So I guessed (maybe wrong) that there was a way I could at least use that value. And call a function on update repositioning the other divs. For me it's an option to look further into oridomi.com but I prefer programming something myself. Less overkill and I learn more. I'll keep looking for some answers. If you look at oridomi.com you see that it's pretty nifty and lots of nested divs. I don't need overlapping items so the content is just on one square. Maybe I should have finished some eduction, oh wait, no internet back then