universal-tilt-js/universal-tilt.js

🎆 Parallax tilt effect library

universal-tilt.js's Issues

Add tilt effect with full page listening

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!

Adjust shadow color to tilt element color (clone?)

Disable tilt for parallax children

Feature request: enhancements to base=window

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

Manual tilt control

This library should allow control tilt value manually

works on desktop but not on mobile...

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/

Scale not transitioning smoothly while mouse moves.

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
      })
    );
  }

Add shine over parallax children

Convert to monorepo

Problem with base option

@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)

UniversalTilt is not a constructor

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

Data exclude /(iPod|iPhone|iPad|Android)/ not working

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/

Rewrite with TypeScript

Fix husky

Mobile device flat on surface to get tilt position 0

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

Export types

Clean up

Update tests

Global is not defined

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?

5 cents to nice plugin

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.

Uncaught TypeError: UniversalTilt.init is not a function

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...
}
});

Invert tilt for parallax children

Add alternatives

Allow interaction in gyroscope mode on touch devices.

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.