• Resolved joy0114

    (@joy0114)


    Hi,

    I’m looking for informations about the behavior of some classes as eds-scroll-visible or eds-scroll-hidden for example.

    Does someone known where I can find out this ?

    Thanks a lot.
    Best regards

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author eleopard

    (@eleopard)

    Thank you for using Animate It!

    eds-scroll-visible or eds-scroll-hidden classes are used for achieving “On Scroll” animation behavior.

    Thread Starter joy0114

    (@joy0114)

    Hi,

    Thank you for your quick answer.
    Ok, but in details ?
    Does it exist a place where all classes are documented ?

    I’m looking for a way to prevent this behavior for an element:
    *** it is displaying at the page loading
    *** it disappears
    *** it re-appears smoothly, when page scroll arrives at its level.

    I just would like the third step…

    Thanks ever so much if you have a tip for this.
    Best regards

    Plugin Author eleopard

    (@eleopard)

    It might be because the CSS/JS related to Animate it! getting loaded after some time, and during that time the element become visible.
    If it is possible for you to add the code in the header of your theme.

    Please add the below code:

    .edsanimate-sis-hidden, .eds-scroll-hidden {
    	opacity:0;	
    }

    This will make the CSS classes available during page load and it should resolve the issue.

    Thread Starter joy0114

    (@joy0114)

    Hi,

    Thanks for your advice, but, I’m not sure to understand.

    It means that I also have to add these classes to my objects ? In addition of the classes which permits the animation ?

    for examle in my case (not css syntax, just list of classes):
    .eds-on-scroll .eds-scroll-visible .animated .fadeInRight .delay3 .duration2

    will become (not css syntax, just list of classes):
    .edsanimate-sis-hidden .eds-scroll-hidden .eds-on-scroll .eds-scroll-visible .animated .fadeInRight .delay3 .duration2

    Am I right ?
    Thanks a lot.
    Best regards

    • This reply was modified 1 year, 5 months ago by joy0114. Reason: precision about list of classes
    Plugin Author eleopard

    (@eleopard)

    Hi,

    You need to do this:

    1. Go to your WordPress Backend.
    2. Go to Settings > Animate It! > Custom CSS Box.
    3. Paste the following CSS:
    .edsanimate-sis-hidden, .eds-scroll-hidden {
    	opacity: 0 !important;
    }

    4. Save. And that’s it.

    You do not have to do anything else to your animations.

    If this does not work, and the above CSS should be added to the theme’s header file. So that it loads before everything.

    Thread Starter joy0114

    (@joy0114)

    Hi,

    WONDERFUL !

    Thanks a lot: it works like a charm thanks to your help !

    Have a good day !
    Best regards and thanks ever so much another time.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘informations about eds-scroll-visible and so on’ is closed to new replies.