Image floating from left

[levipadre]

Hi,

I just stared to use this directive. It seems really good, just I can't figure it out, how can I float one of my images.
Basically, when the user is scrolling, the image starts the float from out of the screen on the left side, and finally arrives the original point.
I tried with this:

scroll-watch="{from: 1000, to: -1}" sw-style="{left: 100 * $progress + '%'}"

but the direction is wrong, and now is going to right from the starting point.
Do you know where is the problem?

[levipadre]

Also I don't want to see to disappear, when I'm scrolling up again. Is that possible?

[pc035860]

Hi @levipadre ,

Try

scroll-watch="{from: 1000, to: -1}" sw-style="{left: 100 * (1-$progress) + '%'}"

[levipadre]

Hi,

Thank you, it's working.

[levipadre]

And do you know that possible to stop the reverse watching? I don't want to move back my element.
With class is also good for me, like this:

scroll-watch="{from: 0, to: -1}" sw-class="{active: $percentage > 80 }"

Just when I scroll up, I need to keep the class

Also when I refresh the page, and I'm already there (80%), I need to scroll up and down again to get the class.

[pc035860]

Hi @levipadre ,

I think you'll have to setup a scroll-broadcast to change a scope variable indicating that your element is in position.

It's kind of similar to #4.

scroll-watch="{from: 1000, to: -1}"
  sw-style="{left: animateLeft($progress) + '%'}"
  sw-broadcast="{
    'hiiiiiit': '$negative > -2'
  }"

And you can setup an scope method for your sw-style:

$scope.animateLeft = function (progress) {
  if ($scope.animated) {
    return 100;
  }
  return 100 * (1 - progress);
};

$scope.$on('hiiiiiit', function ($event, active) {
  if (active) {
    $scope.animated = true;
  }
});

It feels like a workaround though, one way to make this easier may be introducing some new directive like scroll-watch-once.