Feature: Animating scrollTop on scrollable elements about velocity HOT 11 CLOSED

As a quick follow-up question - is this the correct way to scroll the full browser window using velocity?

$('html')
   .velocity('stop')
   .velocity('scroll', { duration: 750, offset: top - 100 });

from velocity.

Hey Chip!

Very good question.

We'll start with the basics: Velocity doesn't support animating scrollTop property like $.animate() does. (It's not a real property -- jQuery shimmed it.)

Scrolling in Velocity is only achieved by the "scroll" command -- as demonstrated in your last example. It results in a cleaner interface with more performant code.

With that out of the way, let's get to the bottom of your issue: You're trying to scroll to an element within a container element that has scrollbars. When you use the correct Velocity scroll syntax (as mentioned), Velocity only brings you to the top of the container element, but doesn't go a step further by also scrolling the container down to the position of the targeted element?

from velocity.

Sorry if being dense here, can't work out how to scroll the innards of the container then.

With jQuery I can do:
$(".ref").hover( function(event) {
event.preventDefault();
container.stop().animate({ scrollTop: containerHeight }, 2000);
}, function(){
container.stop(); // unhover - stop
} );

When switching out animate for velocity and scrollTop for scroll the page scrolls - not the container?

Can I achieve the container contents scrolling with velocity?

Thanks in advance

P.S. What you're achieving here is awesome so Props!!!! Big time :)

from velocity.

@julianshapiro you nailed it. I love the new scroll syntax - it just doesn't scroll inside the a container div. When I make the container element the first in the chain (eg. .pickup-locations above) the window is scrolled to the container element as expected. When I change the first element to be the item I'd like to scroll to - it still scrolls the window:

$('.pickup-location-item')
  .velocity('stop')
  .velocity('scroll', { duration: 1000 });

What would be nice is another parameter in the options object for 'container' so that we could do this:

$('.pickup-location-item')
  .velocity('stop')
  .velocity('scroll', { duration: 1000, container: '.pickup-locations' });

and the '.pickup-locations' div would 'scroll' to have the '.pickup-location-item' at the top of its container.

Thoughts? Thanks again!

from velocity.

It's definitely happening. Today, in fact :) Stay tuned.

Thanks so much, Chip.

from velocity.

Rock n' Roll 👍

from velocity.

Yes, you should definately implement this. ;)

from velocity.

Well, I couldn't have asked for anything more! :D 👍

from velocity.

@chiplay, @AshleySheinwald, @Merg1255 , @scooterlord

Thanks to you guys, this feature has been added to Velocity.

See documentation for details on use: http://julian.com/research/velocity/#scroll -- should be intuitive and very performant.

Go ahead and update your copies of Velocity with the raw GitHub files (the MaxCDN link is usually a couple hours out of date).

from velocity.

@julianshapiro incredible! Works great - thanks for making this happen. Excited to start pushing our animations to new levels. (our mobile web app https://m.relayfoods.com - currently uses Zepto for animations, will be using Velocity soon)

from velocity.

Beautiful. This is why I spend time on Velocity. Because I love it when people show me what they make with it :-)

When it's converted to Velocity, tweet to me and I can link to relay and your own portfolio in the upcoming Velocity gallery.

Sent from my phone.

On May 2, 2014, at 7:49 PM, Chip Lay [email protected] wrote:

@julianshapiro incredible! Works great - thanks for making this happen. Excited to start pushing our animations to new levels. (our mobile web app https://m.relayfoods.com - currently uses Zepto for animations, will be using Velocity soon)

—
Reply to this email directly or view it on GitHub.

from velocity.