xtianmiller / emergence.js Goto Github PK

View Code? Open in Web Editor NEW

1.9K 31.0 62.0 317 KB

Detect element visibility in the browser

Home Page: https://xtianmiller.github.io/emergence.js/

License: MIT License

JavaScript 100.00%

viewport visibility reveal animation javascript scroll element

emergence.js's People

Contributors

Stargazers

Watchers

Forkers

ccurtin watermelonpizza dominicbure mojtaba06 schramphoto amirfawzy umarmughal jayvi hellfish2 ikziriv nunodotferreira brandline mengyou658 agdolla empia tngamemo hhy5277 sweelemk ki11ua web1o1 wanjarus seanhellwig eric013 aklokov-html marcinsztankowski arnetesch sikrigagan abartsev cybernetics jianchang512 ssyz1988 kitsune-xyz bukalov expl4life duezerouno nullnotfound ayatsajedi austinjkovach mustardforbreakfast bgarraud k2fx mevolkan kristyjanzer nishchal-p mikepuerto pacez tzkmx apsolut-javascript auriga-z franksoong vishalr3 dinour jstnbr aidarkhan melcarthus anand9930 keyzf absamindiacatra 8adre yetanotherfork yofukashi-bakka artmeet bianmaxingkong

emergence.js's Issues

destroy method

Hey. I am using your script in a project and want to ask you, if there is any option to destroy emergence.

cheers
Marco

IntersectionObserver

Why not feature check for IntersectionObserver support and use it when available?

Staggering `data-emergence` Toggle

When multiple items are suddenly made visible, it would be great to have an option that would stagger the [data-emergence=visible] change based on source order. This allows for some really appealing intro animations for sections of a site. This prevents having to hard-code transition-delay or animation-delay in the CSS, which will cause unnecessary delays if items are not made visible at the same time.

For example:

<body>
<div class="scene-1" data-emergence="hidden" style="height: 33vh"></div>
<div class="scene-2" data-emergence="hidden" style="height: 33vh"></div>
<div class="scene-3" data-emergence="hidden" style="height: 33vh"></div>
</body>

JS:

emergence.init({
   stagger: 100 // Delay in ms between item attribute changes
});

Because all items are revealed in the viewport at the same time and the stagger option is set:
.scene-1 gets data-emergence=visible change right away
.scene-2 gets data-emergence=visible after 100ms
.scene-3 gets data-emergence=visible after 200ms

Reset: false not working?

Hey there,

I've specified in the settings reset:false, but the emergence status is still resetting after it's left the viewport. I'm using Chrome version 56.0.2924.87, and it's happening in 2 separate projects.

Any clues as to what might be causing this?

Code below:

(function($, document) {

var six_inview = {

    on_ready: function() {
        six_inview.initEmergence();
    },

    initEmergence: function() {
        emergence.init({
            reset: false
        });
    },
}

$(document).ready( six_inview.on_ready );

}(jQuery, document));

Multiple Instances of `emergence`?

Is it possible to have multiple instances of the emergence object with different options active?

Consider the following:

import * as emergeOnce from 'emergence.js'
import emergence from 'emergence.js'

emergeOnce.init({ reset: false })
emergence.init()

This is possible, but is there an option for the queryselector data-emergence to be set? If no, how about setting inline options, such as data-emergence-reset="false" for unique conditions?

DOM re-render implications?

How does this lib function with libs like React, which might re-render an element under the hood? Would .engage() need to be called again?

Define "visible"

The README never really defines the complete criteria it uses to determine whether an element is visible. From what I can determine looking at the code, the element's CSS visibility, opacity, and transform are not considered for example, but the display property is checked. Intersection with the viewport is the primary criterion.

Current project status

Hi, what is the current status of this project? Is it still maintained?

Uncaught TypeError: viewport.addEventListener is not a function...

Hi, I'm playing your package. It seams that it sweats my needs. Good job. :) Back to the issue. I'm using Laravel Mix for handling all js and css assets.

In my main js file app.js I have just added these simple lines:

import emergence from 'emergence.js';
emergence.init();

After the Mix compilation npm run dev I included the final js file in my html. Here is the error I get:

app.js:292 Uncaught TypeError: viewport.addEventListener is not a function
    at Object.emergence.init (app.js:292)
    at Object.<anonymous> (app.js:79)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:364)
    at __webpack_require__ (app.js:20)
    at Object.defineProperty.value (app.js:66)
    at app.js:69

Hope you can help me.

Watched elements not visible when scrolled to on mobile

Hi, thanks for the awesome plugin. I found an issue where I have data-emergence="hidden" on my watched element and works fine on desktop. However, on mobile (Android OS) the elements are not being revealed like they are on desktop, they stay hidden.

Trigger animation when div is visible

I have a little paper plane and want to satrt its animation qhen the div enters de viewport. This is what i have in the css:
@Keyframes example {
0% {left:0%; top:75%;}
25% {left:25%; top:75%;}
50% {left:75%; top:75%;}
100% {left:100%; top:75%;}
}

.target[data-emergence=visible] {
animation-name: example;
animation-duration: 5s
}

Do i have to attach this to the div or to the image i want to animate?

Doesn't work on load

When element is in viewport on loading ( initial view ), sometimes it doesn't work. Can't find any 'rule' when this is happening, anyone had similar problem ?

init inside imagesloaded callback

the plugin only triggers after first scroll movement when initialised inside the callback of imagesloaded.

Feature Request?

Thanks for the lightweight and awesome plugin and I have 1 question?

Instead of changing the [data-emergence=visible] can we add the Class Toggle? Example:

I am using the animate.css and want to add some animate class to enter visible viewport.

Current condition is ok and I can customize the Classes but if I do this then I will duplicate this CSS file for [data-emergence=visible] right?

I hope you can understand me :)

Thanks.

Per-item options

Would be nice to be able to define the options on an individual element. For instance, you might want one element to grow when it's 50% visible, and some other to only react when it's 60% visible.

Offset in percentage or em?

Thank you for a great and simple plugin to use! Would you consider adding support for percentage based or vh based offsets (if that's even possible)?

The problem I am having is that px result in very different timings on a smaller screens vs larger screens. On smaller screens 400px is a lot of the viewport height, but on a large screen it's not. I need a way to trigger the visibility when users reach the same area, regardless of screen size.

Property override support per element

Allow the user to override offsets/cushion properties with a data attribute on specific elements. For example:

<p data-emergence="hidden" data-offset-top="100" data-cushion="0.5">Emergence rock's!</p>

This will allow more flexibility on complex websites.

Use native Intersection Observer

Would be nice to make use of the native Intersection Observer API.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API