Donna

Hi,

Is there any way to remove the delay from a tween added to a timeline? I would like to have a delay on the first tween the first time the timeline plays, but would like to remove it on subsequent plays.

Thx.

Of course. Just the plugin, not any dependencies.

I'm such a fool. I just realized that I need to reset pauseHeight after a swipe. Works great now!

We purchased the Business Green plan last week so that we can use the throwProps plugin. It makes it so much smoother. This is going to look great on customers' digital signage, which is where we plan to use it.

I've also packaged this functionality up into a jQuery plugin and I will be putting it on Github for whoever wants to use it. 

Cheers!

I actually ended up using the onUpdate function to check to see if the content had scrolled the height of the viewable area (i.e. a "page"). If it had, I paused the tween, calculated a new position at which to pause the tween again, and then resumed auto-scrolling after a brief pause.

It works very well. As usual though, I have another problem that I haven't been able to solve. It once again has to do with the position at which the tween resumes scrolling after it has been swiped. Here's my CodePen - 

See the Pen lLpCg by donnapep (@donnapep) on CodePen

If I let it auto-scroll twice until row 19 is showing at the top, and then I swipe it back to the very top, I would expect that when scrolling resumes, it would resume scrolling a page at a time; instead it scrolls to the very bottom. I'm not sure why it's doing that since I'm recalculating the progress in the onRelease event. I must be calculating this incorrectly?

Any insights into this particular problem?

Thx!

You knew I'd be back. 

Thanks to the replies from this thread, I've got my table to scroll to the bottom continuously and to support swipe - http://goo.gl/wvE60x

I'm now working on doing a similar thing, but with a scroll transition that shows a "page" of content at a time. So in the previous CodePen, at first rows 1-9 are visible. I then want to show rows 10-18, pause, and so on until the bottom is reached. Will this require me to create multiple tweens? Or can I somehow manipulate the configuration of the existing tween? Please keep in mind this is a very simple example. In Production we may have 1000 rows in a table. Just looking for some guidance as to the best approach to take.

Thx.

Oops. Forgot to change that variable when pasting it in from my code. Your changes worked perfectly though. Thanks again for the excellent support on this forum!

Cheers.

Hello Donna,

 

You could declare !important on your #scroll-body:

#scroll-body {
  overflow: hidden !important;
}

!Important tells the browser to overide the inline styles.. in this case overflow-y is set to auto inlne on the #scroll-body div

 

**Just beware that you should use !important with caution, due to it being able to override styles inline on the tag.

 

Or you could try to use the set() method to apply the overflow:hidden after it creates the Draggable and ScrollProxy

TweenLite.set("#scroll-body",{"overflow":"hidden"});

Hope this helps!

Thanks. Was hoping there was a config parameter I could use as I'm not a big fan of !important or putting CSS in the Javascript, but if not then I'll just have to suck it up. Cheers!

 

Hi,

 

Have you tried overflow-y:hidden in the stylesheet?

element
{
  overflow-Y:hidden;
}

Yes, I have. It's getting overridden by something in the GSAP libraries. I'd prefer to avoid the use of the !important attribute, but I was just wondering if there was a better way (a configuration parameter that I may have missed)?

Also, so far I've been unable to introduce a delay in onComplete and onReverseComplete before reversing or playing the tween again - 

See the Pen ekIKn by donnapep (@donnapep) on CodePen

Thx.

Thanks, that looks like it will work for me. Is there a way to get rid of the vertical scrollbar? I don't want that to be visible.

Thanks again.

Hi,

I've refactored my code to use both the Draggable and ScrollTo plugins, but I'm still having the same results as I did with my previous code. Namely, if I swipe to the middle of the table with my mouse, the tween will scroll beyond the bounds that I have set for it. I'd thought the autokill feature would prevent that, but that doesn't seem to be the case.

Here's my latest CodePen - 

See the Pen aCLos by anon (@anon) on CodePen

Any thoughts?

Thx.

Awesome, thanks Rodrigo! Will check it out. Sounds much easier than rolling my own.

Cheers!

I'm loving the GSAP library so far. Nice work! The problem I've just come up against is in determining the best way to structure my tweens and timelines given what I want to do.

Essentially, I have a table which contains rows that are not all visible. After pausing for 5 seconds, the table will start scrolling until it reaches the bottom, at which point it will wait another 5 seconds before taking 2 seconds to scroll back to the top. This is achieved by simply altering the top margin, and uses two tweens that are added to the same timeline. It works perfectly.

The problem is that I have added event handlers so that a user can use their mouse or finger to swipe the table up or down. When it does so, the main timeline will be paused and a new timeline gets created to handle the swipe. This will, of course, put the main timeline out of sync once it resumes, and the table will jump when the main timeline resumes. I want it to continue scrolling from its current position, not from the position in the main timeline.

I thought to use the progress method to set the main timeline to the appropriate spot by dividing the top margin by the total scroll height, but the position still jumps when the main timelines resumes. I'm assuming the reason it doesn't work is because this calculation of progress doesn't account for the second tween that is responsible for scrolling back to the top. However, even if i remove the second tween, it still doesn't work.

Here's a CodePen to illustrate - 

See the Pen ulozm by anon (@anon) on CodePen

I'm wondering if there is a better way for me to structure this (perhaps using the same timeline for all tweens?) that would prevent the table from jumping?

Thx.