Jump to content

Oscar Rottink

  • Posts

  • Joined

  • Last visited

Everything posted by Oscar Rottink

  1. 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.
  2. 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
  3. 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.
  4. 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.
  5. 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).
  6. 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.
  7. 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.
  8. 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
  9. 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.
  10. '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.
  11. 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
  12. 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.
  13. 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.
  14. 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.
  15. 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
  16. I think in my 40.x.x Firefox there was no problem but after getting the latest version I saw what you mean. I changed a bit so the width was set in pixels but I still get some weird moves sometimes in Firefox. Hard to see but sometimes it seems it moves one pixel and than one back. So also tried if force3D:true or autoRound:false helped but no luck so far. If it's just the latest version of FireFox I'm not sure if you should put much energy into it. My thingie: http://codepen.io/OzBoz/pen/oxoNGB
  17. Think it's easier to help if you create a codepen example: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/
  18. Well a part of it is. Just take a look at the sourcecode of the site. Their are many common javascripts used and TweenMax is one of them. Not sure what you want with your question. If you want to create a page like that you really should start practicing
  19. I got an idea but can't figure out if it's possible in a simple way. I tried to find an answer on Google and I came by http://oridomi.com/ but that's much more complicated than what I want. At the codepen you see squares and they get transformed. But since they are in a 3D space their will be gaps left behind between the squares. It makes sense that float: left doesn't help. But how can I prevent those gaps and keep the things together? Or is it much simpler to do something like this using SVG's since you can combine corner points? I'm puzzled
  20. Maybe this points you a bit in the right direction http://stackoverflow.com/questions/14499884/tweening-svg-attributes-with-greensock-tweenlite-js-version
  21. Really messy but look here http://codepen.io/OzBoz/pen/vEORqe
  22. Diaco really know more but I now you I would suggest a counter. Know you run through the array and when it's done it's done. So you have to add a counter so you can give it a new position and start again the same thing. I've the same background, some Flash and not much JS. You could also place all images as a long line in a kind of container div and tween the content of that div by using a timeline. Using 'clip' in CSS can make the container so that it doesn't show the other images. And when you have all images seen you can play the timeline at zero or just put it on repeat: -1 Advantage of a time line is that it's easier to control instead of giving each image a tween.
  23. I'll send you a PM of what I've done.. not sure it's the best way but it's a way. Just can't post the URL on this forum yet. But the principle I used is making a large container which you can drag and snaps to the next 'fullscreen' or you can use the mousewheel to go one screen up or down. You can use scrollTo but not sure what the benefits are. And I don't want a normal scroll function but at least a bit of a pause between each screen.
  24. I'm a bit further now, not sure how I can use GSAP. I tried some things but the results were weird. http://codepen.io/OzBoz/pen/MYwwdq
  25. Curious but is there a good way to monitor that memory use and what normal mobile devices have to spend? And it's not a problem for me, I'm from the old days where they want a page to be no more as 30kB. So I try to do a lot to optimize things. With the site I'm working on I test a lot on my iPad 2 (the old one) but I don't have a clue what other devices do. Think it would be nice to have some kind of chart in the docs about performance and specs. Or a kind of cheat chart for certain devices. And it's not that I make such complicated things but sometimes I read something in this forum about certain devices and their problems with some kind of tweens. Would be nice to have some kind of overview.