modularorg/modularload

Question transition

paallaire opened this issue · 3 comments

paallaire commented

I'm not sure how to make a simple transition like "fadeIn".

Is it possible to have an example with a "simple" transition like "fadein"?

hum-n commented

Hi, for a simple fadeIn transition, you could do this in CSS:

[data-load-container] {
    opacity: 0;
    transition: opacity 0.3s;
}

html.is-loaded [data-load-container] {
    opacity: 1;
}

And maybe add an enter delay:

this.load = new modularLoad({
    enterDelay: 300
});

Also add an is-loaded class on the html tag by default for this transition:

<html class="is-loaded"></html>

Next, if you want a custom transition for a specific page, you can change this css with the transition class added to the html tag for example is-customTransition. This part is documented in the readme.

michelhartevelt commented

Dear @AntoineBoulanger How does this work for GSAP animations? Could you please give a little example for that too?