Oscar Rottink
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Oscar Rottink
-
-
I think the stuttering is due to the fact that scroll positions snap to whole pixel values.
For something like this you would probably do better creating an tween that performs a y translation. You could still track scrollwheel changes to figure out how far to move the elements.
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.
-
Help Kim Jong @Dipscom take over the world in this exciting 5 element animation!
See the Pen 533f7d740312e93f45e5fc38475f6456?editors=0010 by osublake (@osublake) on CodePen
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).
-
Since you are a Shockingly Green member you should tap into MorphSVGPlugin's pathDataToBezier() method...
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
-
3
-
-
That looks sweet Oscar, nice job!!
Hey @Rodrigo,
Maybe you know, I was testing some things and I wonder why the movement is so choppy. If you look at
See the Pen RajZqd by OzBoz (@OzBoz) on CodePen
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.
-
I am on Windows 7 and Windows 10 using Firefox 40.* and I do not see that jump towards the end.
'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.
-
-
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.
-
1
-
-
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.
-
1
-
-
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
-
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:
-
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/
-
1
-
-
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
-
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
-
Maybe this points you a bit in the right direction http://stackoverflow.com/questions/14499884/tweening-svg-attributes-with-greensock-tweenlite-js-version
-
-
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.
-
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.
-
-
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.
Using scrollTo but ease problem (stutter)
in GSAP
Posted
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 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
See the Pen gmydRr by OzBoz (@OzBoz) on CodePen
(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.