nigelotoole / direction-reveal Goto Github PK

Apparently webpack cannot bundle the dependency to your module because of some transpilation config...

It works if I copy it into my project though...

The closest issues about this is :

• Error from UglifyJs - Name Expected
• ERROR in bundle.js from UglifyJs Name expected

Any intention of looking into it ? It would be a shame to prevent people using webpack from using your work...

I've created a CodeSandbox with the most minimum requirements:
https://codesandbox.io/s/direction-reveal-demo-nvfc6?file=/src/pages/index.js

My primary issue is, that the CSS animations are not picked up. The regular styling does.
I took the ready rendered CSS and not the SCSS

Can you help me please or point me to the problem?

Many thanks in advance

The calculation for x/y (line 33, 34 in direction-reveal.js) is not correct. The right parenthesis for the normalization is set wrong. Correct calculation:
let x = (e.pageX - position.x - (w / 2)) * (w > h ? (h / w) : 1);
let y = (e.pageY - position.y - (h / 2)) * (h > w ? (w / h) : 1);
This causes a correct normalization for aspect ratios of the hovered element not equal 1, and subsequently the correct calculation of the direction.

for browser support (Edge, IE11, IE10)
add polyfill:

(function () {
    if ( typeof NodeList.prototype.forEach === "function" ) return false;
    NodeList.prototype.forEach = Array.prototype.forEach;

    if (!String.prototype.startsWith) {
      Object.defineProperty(String.prototype, 'startsWith', {
        enumerable: false,
        configurable: false,
        writable: false,
        value: function(searchString, position) {
          position = position || 0;
          return this.indexOf(searchString, position) === position;
        }
      });
    }
})();

PS. Maybe it will be useful to someone

Hey there, great plugin! I have installed this on my react app and seems to be working great! I have one issue: when I mouse over the right side of my images no matter where I exit, up or down, the animation it brings up is always swing--out-right or swing--in-right. See in the screenshots, I went from the top to the bottom of the two sandwiches on the left of the screen. Strangely though, if I do it on the left half of the images, they work just fine. Any help or insight would be greatly appreciated!

Thanks again for the useful script!

Atlante

There are no demos for React so could someone give example?

Hi,

On iOS 11.1, when you click on another zone, the revealed zone should hide like the web version.

Thanks

animationPostfixEnter and animationPostfixLeave are missed in the main script, but is mentioned in the docs/readme as well in /docs/script

When I use the usage script:

const directionRevealDefault = DirectionReveal({
  selector: '.direction-reveal',
  itemSelector: '.direction-reveal__card',
  animationName: 'swing',
  animationPostfixEnter: 'enter',
  animationPostfixLeave: 'leave',
  enableTouch: true,
  touchThreshold: 250
});

The animationPostfixEnter and animationPostfixLeave is not picked up. The generated classes are still outand leave and not enterand leave

It took me hours to find that out :-) , please be so kind and fix that to help others who stumble over this problem

PS: For libraries which uses static page generators (eg: React, Gatsby,...) documentand windoware not defined while build time, so a check for document in line around 23 makes it possible to use your script/library "out-of-the-box":

const containers = typeof document !== "undefined" ? document.querySelectorAll(selector) : []

Imported styles, created my DirectionReveal() with no options and copied the demo markup exactly but nothing happens?