Hey great project!! I'm trying to implement universal test so made a little test, but it doesn't seem to be working on any mobile devices. Any idea why? http://www.postspace.org/ddtest/

It would be awesome if the tilt would also respond to touchstart and touchmove events by tilting when moving the finger over the element or tapping it and then restore back to the gyro position once the finger is lifted.

Basically allow an override of the position if the element is being touched while in gyro mode.

So the bug I am currently experiencing is that when I enter an object which has the scale option, it only scales in a smooth manner if I leave my mouse completely still as the transition occurs. If I continue to move my mouse as the transition is occurring, the scale will not occur at all, and then once the allotted time has passed (set by speed option) the animation jumps to completed, and the item grows to full size with no transition played at all. I will attempt to get a screencast gif later tonight when I am home from work.

I have forked the repository and had a peek at the code. I am currently at work so I do not have much time available to me but I believe I have found the issue. When I am home from work tonight, I will attempt to fix it if it is not fixed by you already by then. I am only a beginning coder though, so perhaps I will be unable to fix it.

anyways, what I believe is the issue is the combination of onMouseMove() and update() which updates scale 3d. I think if you continue to move the mouse fast enough, it just keeps updating the scale to the same size because onMouseMove() is constantly being called before the transition has enough time to take effect.

What I planned to do is move the scale portion into it's own function called updateScale() and only call that on onMouseEnter and onMouseLeave.

  onMouseMove(e) {
    // set event
    this.event = e;
    this.updateElementPosition();


    window.requestAnimationFrame(() => this.update());   <======================

    if (typeof this.settings.onMouseMove === 'function')
      this.settings.onMouseMove(this.element);
  }

and

update() {
    const values = this.getValues();

    this.element.style.transform = `perspective(${this.settings.perspective}px)
      rotateX(${
        this.settings.disabled && this.settings.disabled.toUpperCase() === 'X'
          ? 0
          : values.tiltY
      }deg)
      rotateY(${
        this.settings.disabled && this.settings.disabled.toUpperCase() === 'Y'
          ? 0
          : values.tiltX
      }deg)
      scale3d(${this.settings.scale}, ${this.settings.scale}, ${     <=========
      this.settings.scale                                            <=========
    })`;

    if (this.settings.shine) {
      Object.assign(this.shineElement.style, {
        transform: `rotate(${values.angle}deg) translate3d(-50%, -50%, 0)`,
        opacity: `${this.settings['shine-opacity']}`
      });
    }

    // tilt position change event
    this.element.dispatchEvent(
      new CustomEvent('tiltChange', {
        detail: values
      })
    );
  }

Receiving an error -
" Uncaught TypeError: UniversalTilt.init is not a function "
when using this approach -
// v2
const tilt = UniversalTilt.init({
elements: elems,
settings: {
// options...
},
callbacks: {
// callbacks...
}
});

For some reason the /(iPod|iPhone|iPad|Android)/ data exclude won't work. On desktop in looks fine, however, on mobile phones it looks weird as hell.

My website: https://casinoxbonuses.com/

HI, i have added universal-tilt.min.js but it says Uncaught ReferenceError: global is not defined at universal-tilt.min.js:1

i have use jQuery v3.3.1. Can you help please?

Receiving an error -
"Uncaught TypeError: UniversalTilt is not a constructor "
when using VanillaJs approach
// v1
const tilt = new UniversalTilt(elems, {
// options...
});

Hi

I found the issue that the physical tilt of the device triggers the tilt only works when the mobile device is flat on a surface. Since a phone or a tablet is usually not in that position when the script is loaded I would suggest to define the first position you get from the gyro lib to be set as the 0 of the tilt. I think instead of an absolute 0, its a relative to the starting point. If that makes sense 👍

Love your fork of the original lib!

Kind regards
Jonas Gredig

This library should allow control tilt value manually

@JB1905

v2.0.5 (v2.0.4) probably fixes this bug

Btw it probably produces a bug, when base option is set. With 2.0.3 and base works just fine.

Problem is here:

Originally posted by @TemaSM in #38 (comment)

with the original js libraries, it is possible to add "data-tilt-full-page-listening", then the tilt effect is used always and not only if someone is over the tilted object.
Is this feature on the roadmap or ist it in the actual implementation not possible to add?
thx!
I really like the gyro effect btw!

With base=window, currently all tilting elements on the page move completely in unison, regardless of where they are in relation to the cursor. It would be great if an option(s) could be added so

1. the amount of tilt applied to a given element decreases as the cursor moves further away from that element
2. the angle of each element is unique so each one tilts towards/away from the cursor
3. the scale effect is decoupled from the tilt to allow for the scale only being applied when the cursor is over each specific element

These options combined could make for some really unique effects when dealing with multiple tilting elements on a single page

Hi there. Playing around find some good things to add

             key: "getValues",
              value: function getValues() {
                var x, y;
                **var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);**
                if (this.isMobile()) {
                  **if (isSafari == true) {
                    x = this.event.accelerationIncludingGravity.x / -4;
                    y = this.event.accelerationIncludingGravity.y / 4;**
                    } else {
                      x = this.event.accelerationIncludingGravity.x / 4;
                      y = this.event.accelerationIncludingGravity.y / -4;
                    }                    
                  var stateX, stateY;

This makes equal behavior on iPhones and Android devices. I guess -4 makes right movement depends on device orientation.

'background-image': 'radial-gradient(circle at bottom center, rgba(252,253,255,1) 20%,rgba(255,255,255,0) 60%)', parameters for shine gradient looks better for me.

Also it will be great to move the card by finger on mobile in addition to device orientation movement. And filter acceleration data of course lol.

And finally small question. I didn't get easing for shine rotation. It was possible to make it in previous versions (like in demo page). But now it unfortunately does not work. Quick shine rotation on mobile absolutely not cool and looks glitching.