informations about eds-scroll-visible and so on

Resolved joy0114
(@joy0114)

2 months, 2 weeks ago

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)

2 months, 1 week ago

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)

2 months, 1 week ago

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)

2 months, 1 week ago
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)

2 months, 1 week ago
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 2 months, 1 week ago by joy0114. Reason: precision about list of classes
Plugin Author eleopard
(@eleopard)

2 months, 1 week ago
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)

2 months, 1 week ago

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)

You must be logged in to reply to this topic.

Views