4

I'm using stellar.js and iscroll-probe.js (part of iScroll 5), to handle scrolling on a mobile device, in a HTML5 app built with Ionic (using Cordova).

My issue is that I am telling stellarJs to scroll using transforms 

scrollProperty: 'transform',

Now when the page is at the top, and the user drags it down, I apply a css scale to the element so it grows.

document.getElementById('imageHolder').style["-webkit-transform"] = "matrix(" + scaleVar + ", 0, 0, " + scaleVar + ", 0, 0)";

This scales it but there is a flicker. This is because Stellar.js constantly overwrites the transform on the element with

translate3d(0px, -5px, 0px)

(If the page is 5 px down)

If I console log my transform value I get something like this:

matrix(1.02, 0, 0, 1.02, 0, 0) 
translate3d(0px, -1px, 0px) 
translate3d(0px, -0.5px, 0px) 
matrix(1.00666666666667, 0, 0, 1.00666666666667, 0, 0) 
translate3d(0px, 0px, 0px)

Any idea how I can overcome this? can I append the transforms?

I tried 

"matrix(" + cssVar + ", 0, 0, " + cssVar + ", 0, " + this.y / 2 + ")";

but it doesn't help, it still overwrites and it actually makes the animation worse.

Any help would be appreciated

Ben Taliadoros
  • 7,003
  • 15
  • 60
  • 97
  • 1
    could you provide a demo? – Gaël Barbin Mar 17 '15 at 14:43
  • Take a look a the last example in the docs: http://markdalgleish.com/projects/stellar.js/docs/ You can apply custom position property that consists of both translate3d and scale transform. Another option is to add another parent or child element wrapper and apply second transform to it. And third option is to allow stellar.js to use js for scrolling and use CSS just for scale. – Teo Dragovic Jan 17 '16 at 21:57

0 Answers0