scrollTo for super-smooth animations
Yehuda Katz
I had something of a breakthrough this evening that will make page
transitions super-smooth.
I was playing with Firebug on iphone, looking through all the various
properties available (and I believe strongly that there are some
unexplored avenues) when it hit me. Instead of trying to move elements
around the page, why not try scrolling the viewport itself.
We already know that scrollTo works just fine, so I tried to see how
many scrollTo's I could make happen using a simple setTimeout. I was
amazed. I was able to get super-smooth page transitions using
scrollTo. I told Joe about this finding, and he was able to duplicate
it for use in iUI.
Good luck folks! I'm excited,
-- Yehuda Katz
Jeffrey903
it?
Hal!
H!
Yehuda Katz
-- Yehuda
Yehuda Katz
Web Developer | Procore Technologies
(ph) 718.877.1325
Randy Walker
scrollto, or something like it, to scroll content in an overflow div?
Ie.now that I have the alphabet in place, how would I cause a tap on the
alphabet to scroll the overflowed div to the right letter? I don't want to
use anchors since they seem to always cause the address bar to drop down for
a minute and then disappear again. Blech!
Yehuda Katz
Also, you don't really need an overflow div, as there are no scrollbars to look nasty, and hiding elements outside of the viewport makes scrolling impossible. You simply show the element you want for animations ;)
-- Yehuda
Randy Walker
-=R
Scott
I have a prototype that does exactly what you're talking about.
I've been sitting on it for a week now, hoping to get around to a blog
post, but, its not going to happen ;) Its pretty rough, but it works
well once you get used to the two-finger slide:
http://static.biggu.com/ipdrag.html
Touch a box to select it, then two-finger drag it to where you want it
to go. I'm sure the math is off, as I did this at 2 AM last week, so
feel free to correct it/make it actually usable :)
- Scott
On Jul 30, 2:46 pm, Randy Walker <cleverda...@gmail.com> wrote:
> I mean a div that is 334px high containing content that may be thousands of
> pixels high. Ie. A list. overflow:auto would keep the div at the exact
> height, then I want to be able to use scrollto, or something similar, to
> scroll that content. Looking for a replacement to two-finger scrolling.
> There are no scrollbars anyway in iPhone? Not talking about sliding a div
> in/out of the viewport. Talking about scrolling the contents of an existing
> div, without moving the div. Hope that makes sense.
>
> -=R
>
> On 7/30/07 12:18 PM, "Yehuda Katz" <wyc...@gmail.com> wrote:
>
> > Use IDs ;)
>
> > Also, you don't really need an overflow div, as there are no scrollbars to
> > look nasty, and hiding elements outside of the viewport makes scrolling
> > impossible. You simply show the element you want for animations ;)
>
> > -- Yehuda
>
Scott
drag-and-drop ;) I guess I jumped the gun, maybe I should make a new
post for that ;)
- Scott
RyanA
Found this... not sure if it will help:
http://www.webdeveloper.com/forum/archive/index.php/t-43785.html
-=Ryan
On Jul 30, 3:46 pm, Randy Walker <cleverda...@gmail.com> wrote:
> I mean a div that is 334px high containing content that may be thousands of
> pixels high. Ie. A list. overflow:auto would keep the div at the exact
> height, then I want to be able to use scrollto, or something similar, to
> scroll that content. Looking for a replacement to two-finger scrolling.
> There are no scrollbars anyway in iPhone? Not talking about sliding a div
> in/out of the viewport. Talking about scrolling the contents of an existing
> div, without moving the div. Hope that makes sense.
>
> -=R
>
> On 7/30/07 12:18 PM, "Yehuda Katz" <wyc...@gmail.com> wrote:
>
>
>
> > Use IDs ;)
>
> > Also, you don't really need an overflow div, as there are no scrollbars to
> > look nasty, and hiding elements outside of the viewport makes scrolling
> > impossible. You simply show the element you want for animations ;)
>
> > -- Yehuda
>
> > On 7/30/07, Randy Walker <cleverda...@gmail.com> wrote:
>
> >> I was thinking along the same lines all day yesterday! How would one use
> >> scrollto, or something like it, to scroll content in an overflow div?
> >> Ie.now that I have the alphabet in place, how would I cause a tap on the
> >> alphabet to scroll the overflowed div to the right letter? I don't want to
> >> use anchors since they seem to always cause the address bar to drop down for
> >> a minute and then disappear again. Blech!
>
> >> On 7/30/07 3:02 AM, "Yehuda Katz" <wyc...@gmail.com> wrote:
>
> >>> > Hey guys,
>
> >>> > I had something of a breakthrough this evening that will make page
> >>> > transitions super-smooth.
>
> >>> > I was playing with Firebug on iphone, looking through all the various
> >>> > properties available (and I believe strongly that there are some
> >>> > unexplored avenues) when it hit me. Instead of trying to move elements
> >>> > around the page, why not try scrolling the viewport itself.
>
> >>> > We already know that scrollTo works just fine, so I tried to see how
> >>> > many scrollTo's I could make happen using a simple setTimeout. I was
> >>> > amazed. I was able to get super-smooth page transitions using
> >>> > scrollTo. I told Joe about this finding, and he was able to duplicate
> >>> > it for use in iUI.
>
> >>> > Good luck folks! I'm excited,
>
> >>> > -- Yehuda Katz- Hide quoted text -
>
> - Show quoted text -
Randy Walker
Wow. Very cool thing you've got there! So if I was on an iPhone, I could
two-finger drag that box anywhere, not just along the x or the y, but both x
and y at the same time? It appears to be moving the whole div and not just
the box... Hmmm...
If every entry in a favorites list was on it's own div layer with your code,
it'd be pretty easiy to get a drag-n-drop system going. When the list first
appears, each item's div (with your code in each) is say only 24 pxiels high
with the same z-index. When tapping on an item, change the div's height to
say 416px (or the then available screen height) retaining the y positioning
of the item, make sure the 'extra space' around the item has it's background
set to nothing, set the div's overflow to auto and set the z-index to say
1000. (be cool to add soft shadow png around the item to simulate being
above the other items) Now you can two-finger scroll that item (the whole
div) up or down 'over' the other items in the list. When dropping, there'd
have to be some calculations as to where it was dropped, eg.whether it moved
up/down far enough to actually change it's order in the list, then store the
updated results in the database so it remembers the order for next time.
Maybe a quick AJAX update to the database as soon as the moved div is
released and redraw the item list so you can then select another item and
start the whole process over again. I can totally see the normal iPhone
favorites list being emulated in this fashion. Only difference being a
'click to select' first, then be able to two-finger scroll.
Question: If there was a normal two-finger scrolling div that contained say
20 divs, each with your code, would that list of your divs be two-finger
scrollable as a whole, only changing to the drag-n-drop thing after single
clicking?
Now, for a single application of your code, not an array of them, can you
use scrollto to programmatically move your 'box' around? Say, I click on a
link, can you tell your box to scroll to a certain position? I want to use
that for the alphabet linking to each individual letter in the list. Trying
to stay away from causing the address bar to appear/disappear. I'm hoping
an onmousedown javascript would avoid seeing the address bar. So if I want
to jump to the T's, I can click in my alphabet div (maybe go off height
percentage clicked in the div, rather than 26 individual links?) and then
mixed with your code, scroll the contents of my overflow:auto div to the
T's. If there aren't any T's, then scroll to the closest letter that is in
the list.
Very cool stuff!
-=R
Yehuda Katz
http://yehudakatz.com/2007/07/30/smooth-iphone-animations/
w00t!
-- Yehuda
Jake
Jerrod Hofferth
Now... Joe? :-D
On Jul 30, 10:52 pm, "Yehuda Katz" <wyc...@gmail.com> wrote:
> Here's the demo:
>
> http://yehudakatz.com/2007/07/30/smooth-iphone-animations/
>
> w00t!
>
> -- Yehuda
>
Joe Blow
Yehuda,
A few things.
First, your URL for the iPhone smooth animation demo is not typed
correctly in the text of the link (the underlying URL is correct, but,
if people are trying to type the URL into their iPhone directly,
they're going to get a 404 error). You have it listed as:
http://www.yehudakatz.com/wp-contents/iphone.html
It should read:
http://www.yehudakatz.com/wp-content/iphone.html
i.e., it's "wp-content", not "wp-contents" (no letter "s").
Second, you should pick the shortest URLs possible if they're to be
viewed on an iPhone - people are going to make a lot of errors typing
in long URLs with slashes, etc. Your name in the domain doesn't help,
either - you might want to get a shorter domain just for iPhone pages.
Third, the demo scrolls to the right, but, never scrolls back to the
left (if that's what's intended when clicking on the right content).
This is true on the iPhone or in any computer browser.
Last, the scrolling can be a little jerky, with not all lines
scrolling togehter, but, otherwise, it's pretty cool.
Thanks for posting the technique, in any case.
All the Best
Joe Blow
Jeffrey903
server, without the included JS file on your local machine. It is
also a shorter URL:
http://www.moviesapp.com/scroll/
On Jul 30, 11:52 pm, "Yehuda Katz" <wyc...@gmail.com> wrote:
> Here's the demo:
>
> http://yehudakatz.com/2007/07/30/smooth-iphone-animations/
>
> w00t!
>
> -- Yehuda
>
Yehuda Katz
-- Yehuda
Joe Hewitt
feel of clicking links. I've updated iUI with the smooth scrolling
and it works fabulously, especially on complex pages that previously
could barely get 1 frame of animation.
There will be an upcoming iUI release in a week or so that includes
this change - I have a bunch of other things I'm working on as well
that I need to finish.
Dan Wood
maybe:
:-O_.
--
Dan Wood
dw...@karelia.com
Karelia Software — Sandvox for the Mac
http://www.karelia.com/
It is the habit of every aggressor nation to claim that it is acting
on the defensive. — Jawaharlal Nehru
Randy Walker
I adjusted your code to only allow scrolling in the Y direction and tried it
on an iPhone for the first time. It works, but the movement/animation of it
is almost non-existent. I was bummed that it was sooooo sluggish. Works
perfectly on Safari 3 on my mac. Great idea and got my brain spinning with
the possible applications of it. Maybe there's another way to get the
movement to be at least as smooth/fast as regular two-finger scrolling of
divs and iFrames?
-=Randy
On 7/30/07 1:57 PM, "Scott" <bauer...@gmail.com> wrote:
AwayBBL
I'd like to add a splash screen to my iJoker thingie that bascally is
a smiley icon that bounces around the screen. Could I use this new iUi
version for something like that?
Any other suggestions would be welcomed too... Guess the simple way
would be to make an animated GIF and just use that, but it wouldn't be
random.
AwayBBL
Is it animated?
uDt.SEAL...@gmail.com
Safari thinks your trying to scroll around the page.
On Aug 4, 4:04 pm, AwayBBL <away...@gmail.com> wrote:
> Can someone with an iPhone plz try this URL...http://www.myhip.com/animated_demo.html
Lyle Holmes
Let me know how this develops for you.
Lyle Holmes
Directors, Ltd.
Motion Picture Entertainment
206.364.3693 Seattle
206.364.0371 Fax
323.627.3306 Los Angeles/cell
Lost
On The B Side......In Theaters 2007!
Ain't It Cool News: "a twisted narrative...exactly what you expect out
of a festival film...something fun."
AwayBBL wrote:
Can someone with an iPhone plz try this URL... http://www.myhip.com/animated_demo.html
Is it animated? On Aug 4, 11:28 am, AwayBBL <away...@gmail.com> wrote:
Randy Walker
-=R
Lyle Holmes
I would be interested in knowing your experiences/thoughts. It detects if you're on the EDGE or Wi-Fi and launches the appropriate stream.
http://www.tradescreening.com
Lyle Holmes
Directors, Ltd.
Motion Picture Entertainment
206.364.3693 Seattle
206.364.0371 Fax
323.627.3306 Los Angeles/cell
Lost
On The B Side......In Theaters 2007!
Ain't It Cool News: "a twisted narrative...exactly what you expect out
of a festival film...something fun."
looks good. but you cant scroll to create more smilies faces, as Safari thinks your trying to scroll around the page. On Aug 4, 4:04 pm, AwayBBL <away...@gmail.com> wrote:
Can someone with an iPhone plz try this URL...http://www.myhip.com/animated_demo.html
Miguel Vargas
> There will be an upcoming iUI release in a week or so that includes
> this change
While I wait for Mr. Facebook © 2007, has anybody else figured out
how to integrate this trick into iUI? Below is Yehuda's original
demo. I'm not good enough at JavaScript to figure it out, but if
anyone's interested the iui.js function is slidePages().
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=utf-8">
<title>Hello</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<meta name="viewport" content="width=320, initial-scale=1.0, user-
scalable=no">
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 320px;
height: 416px;
font-family: Helvetica;
-webkit-user-select: none;
cursor: default;
-webkit-text-size-adjust: none;
}
#main {
width: 320px;
overflow: hidden;
}
#entire {
width: 100%;
background-color: #fcc;
position: absolute;
height: 416px;
}
#next {
background-color: #ccc;
position: absolute;
left: 100%;
width: 100%;
height: 416px;
top: 0;
/* display: none;*/
}
</style>
<script>
recurse = function(i) {
window.setTimeout(function() {
scrollTo(320 - i,1)
if(i > 0) {
recurse(i - 10);
} else {
scrollTo(320,1);
document.getElementById("entire").style.display = "none";
// window.scrollTo(0,1);
document.getElementById("next").style.left = "0"
}
}, 10)
}
window.onload = function() {
window.setTimeout(function() {
window.scrollTo(0,1)
for(i=0;i<=100;i++) arr.unshift(i * 3.2);
}, 100);
document.getElementById("entire").onclick = function(e) {
scrollTo(0,1);
document.getElementById("next").style.display = "block"
recurse(320);
}
document.getElementById("next").onclick = function(e) {
document.getElementById("next").style.left = "320px";
document.getElementById("entire").style.display = "block";
scrollTo(0,1)
recurse(320);
}
}
</script>
</head>
<body>
<div id="main">
<div id="entire">
Left. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="next">
<span id="nextChild" style="display: inline">
Right. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</span>
</div>
</div>
</body>
</html>