Skrollr, flipping image on direction change

Question

I have an image of an animal facing left that, when scrolling, moves left -> flips horizontally -> moves right -> flips horizontally, etc.

The issue is when the user scroll up, the animal goes backwards. On direction === 'up' I'm trying to get the image to flip immediately so when the user scrolls it is facing the correct way in which is it moving.

<span class="animal skrollable skrollable-between" 
    data-100="right: 2%;" data-400="right: 78%;"
    data-401="-moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
            transform: scaleX(-1);
            -ms-filter: 'FlipH';
            filter: FlipH;" data-700="right: 2%;" data-701="-moz-transform: scaleX(-1);
            -o-transform: scaleX(1);
            -webkit-transform: scaleX(1);
            -ms-transform: scaleX(1);
            transform: scaleX(1);
            -ms-filter: 'FlipH';
            filter: FlipH;"
    data-900="right: 78%;" data-901="-moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
            transform: scaleX(-1);
            -ms-filter: 'FlipH';
            filter: FlipH;"
    data-1450="right: 2%;" style="right: 2%;">
 </span>

Script

<script>
  var animal = $('.animal')[0];

  var s = skrollr.init({
    edgeStrategy: 'set',
    smoothScrolling: true,
    keyframe: function (element, keyframe, direction) {
      if (element !== animal) {
        return;
      }

      if (direction === 'up') {
        animal.style.webkitTransform = "1";
        animal.style.MozTransform = "1";
        animal.style.msTransform = "1";
        animal.style.OTransform = "1";
        animal.style.transform = "1";
        animal.style.msFilter = "flipH";
      }
    }
  });
</script>

The other issue is that I've also tried using @addClass:MyClass so the whole thing is cleaned up, in to a class rather than in the HTML, but it's not working at all.

I've added an example in to a fiddle with inline comments to show the issues. http://jsfiddle.net/dp5zvxwk/1/

@MoshFeu Sure thing. Just created one quickly - http://jsfiddle.net/dp5zvxwk/1/ — DT.DTDG, Oct 14 '15 at 07:36
I'm afraid it's impossible. I tried to fix you code (http://jsbin.com/vinabar) but when you use the function `keyframe`, this happens only once and then, data value from the data attribute override this property; — Mosh Feu, Oct 14 '15 at 09:16
@MoshFeu Thanks for trying. Maybe you can think of another way to achieve what I'm trying to do but without the keyframe function? Possibly using a sprite with the image facing two ways and then setting background-position? — DT.DTDG, Oct 14 '15 at 09:26
It will the same problem as it now. Because the framework (from short reading the docs) let you do just one thing in both of the direction (up and bottom), so you can't do this. Maybe you can do the `transform` with the `keyframe` function, so you can decide where and how to animate based on the direction. The problem is that you will need to "implement" the keyframes functionality by yourself. — Mosh Feu, Oct 14 '15 at 10:17
@MoshFeu Thanks for looking in to this. One other possibility would maybe be to swap the background positions on all the data attributes on scroll up and on down set them all to the other position. Like: (if animal.data=600 && direction==="up") { } — DT.DTDG, Oct 14 '15 at 11:27
Try this: add a class to the body like `skrollr-up/down`, wrap the image in another container and flip the container. This way you have the flipping separated from the scroll-flipping. — Prinzhorn, Oct 22 '15 at 10:21
@Prinzhorn Thank you! That's really confusing though :/ could you please add your response in an answer so I can accept, accompanied with a modification of my fiddle? — DT.DTDG, Oct 25 '15 at 12:58

score 0 · Accepted Answer · answered Oct 26 '15 at 08:28

0

Use a wrapper element instead of trying to flip the element itself. I added a skrollr-up/down class to the document to achieve that.

.skrollr-up .animal {
    transform: scaleX(-1);
}

http://jsfiddle.net/dp5zvxwk/3/

Please make sure you understand html and css very well before trying to use skrollr.

answered Oct 26 '15 at 08:28

Prinzhorn

22,120
7
61
65

Thank you. In your fiddle, scrolling up works fine (the animal is facing the correct way) but scrolling down it doesn't. In my fiddle I have it facing correctly scrolling down but not up. – DT.DTDG Oct 27 '15 at 09:56
Never mind, it actually was only doing it on mobile where one direction was incorrect. Desktop works fine, thank you. Any idea why my `@class` isn't working in my fiddle? – DT.DTDG Oct 28 '15 at 10:47

Skrollr, flipping image on direction change

1 Answers1