Trying to make a ThrowProps list of items

[crooksy88]

Hi,

 

I'm currently trying to create a reusable ThrowProps object that incorporates a scrollbar, simulating those found on iOS devices.

Once complete my plan is to share it with fellow Greensock users.

 

Unfortunately though I'm having difficulty working out the scrollbar positioning in relation to the scrolling list as was wondering if anyone can workout the calculations required.

 

My work in progress is attached which is an adaptation of the ThrowProps example provided on the website.

 

scrolllist1.zip

 

Thanks,

 

Mark

[Carl]

Hi

 

Thank you for posting your file.

 

Unfortunately it would take me quite a bit of time to figure out how to perform all the calculations in your file. What I can do is give you a bit of a tip and an example.

 

Tip: You don't need to create a separate ThrowProps tween for the scrollbar. You should have an updateScrollPosition (or similar) that can calculate the desired position of the scrollbar based on the current position of your list. The ThrowProps tween can than call updateScrollPosition using its onUpdate callback.

 

Here is an example of a list scrolling automatically and a scrollbar moving the proper distance:

 

http://www.snorkl.tv/dev/scrollTween/

 

the code looks like this:

 

import com.greensock.*;
import com.greensock.easing.*;

var listEndY:Number = -300;
var barMaxDistance:Number = 300 - scrollObject.bar.height;

TweenMax.to(scrollObject.list, 4, {y:listEndY, yoyo:true, repeat:-1, repeatDelay:.5, onUpdate:updateBar, ease:Bounce.easeOut});

function updateBar(){
scrollObject.bar.y = Math.abs(scrollObject.list.y / listEndY) * barMaxDistance;
}

 

the math basically figures out the percentage of distance that the list has moved and then tells the scrollbar to position itself based on the same percentage of the total distance the scrollbar needs to move.

 

basically it says, "the list has moved 75% on its way to -300, now the scrollbar needs to move 75% along the way to its end distance of barMaxDistance.

 

you can download the fla here: http://www.snorkl.tv/dev/scrollTween/scroll.fla (cs4)

 

*** you are going to probably need a more complicated equation if you want to exactly mimic iOS behavior, particularly the fact that the scrollBar shrinks when you pull the list beyond its intended range.

[crooksy88]

Thanks for your reply Carl. I'll let you know how I get on.

[crooksy88]

The files are available for download...

 

http://www.infin8iphone.co.uk/?p=57

 

Enjoy

[Carl]

wow crooks, i'm impressed. very cool. Thanks so much for sharing that, I imagine it will help a bunch of folks.

I haven't gotten into the code, but it seems to work really nicely and I especially like how you got the scrollbar to shrink, looks very iOS-ish. nice.

 

-carl

 

ps: thx for remembering not to include ThrowProps in the download.