Hi.

https://prnt.sc/DKcMfbORqUzc

It is not entirely clear what you expect from this.

If you are exploring the code via Dev Tools, you will see that CSS code exist only for fadeInDown class. Which does not affect anything in the absence of other control properties.

For all other classes, you must write your own CSS code. But this is only from an academic point of view ...

Real case:

animation-duration: 500ms; animation-delay: 500ms; animation-name: fadeInUp;

To get this animation, delete all classes, add fadeInUp class and write a code for Main Body section.

#sp-main-body {
    animation-duration: 500ms;
    animation-delay: 500ms;
}

Add this code to custom.css file

Hi Marek,

Thanks for contacting us. You can follow Pavel's instruction. It may help you.

-Regards.

hi "It is not entirely clear what you expect from this."

this

https://www.modern-dream.pl/rozwiazania-energooszczedne/fotowoltaika

full page animation

this https://www.modern-dream.pl/rozwiazania-energooszczedne/fotowoltaika

I did not mean the final result, but meant your use in this screenshot.

This would not lead to anything.

I gave you the correct answer above to obtain a final result.

Read "Real case:..." part

ppb-animated" data-sppb-wow-duration="800ms" data-sppb-wow-delay="100ms" style="visibility: visible; animation-duration: 800ms; animation-delay: 100ms; animation-name: fadeInDown;"

https://bezpiecznejutro.com/oferta/ubezpieczenia-turystyczne

Hi Marek.

I'm not sure what you wanted to show on this example.

Obviously, the example uses JS that adds the data attributes to #sp-main-body.

Using the class field, you cannot achieve this. This field simply adds classes to the class attribute.

Of the classes you added (1), two classes work, as they have CSS code (2).

delay800 & duration400 classes do not work, since there is no CSS code for them.

In my example, I showed you how to make it work through CSS.

And you will be surprised, but your animation now works on the basis of those classes for which there is a code that uses these properties:

animation-name: fadeInDown;

animation-duration: 1s;

You just don’t notice its work, since you have a very huge background image. Reduce it to 1920 px width and compress.

So, let's finalize that you can understand everything.

Resize first screen bg image.

Add classes to the helix section's class field.

1. fadeInDown . This class will call animation that exist on board from /components/com_sppagebuilder/assets/css/animate.min.css file.
2. page-animate (for example). Your own class name.

Write CSS for page-animate class

.page-animate {
    animation-duration: 400ms;
    animation-delay: 800ms;
    animation-fill-mode: both;
}

Tip: animation-duration: 400ms; тoo small, animation-delay: 800ms; to big values for the effect that you want to achieve.

I would recommend such values

.page-animate {
    animation-duration: 1200ms;
    animation-delay: 300ms;
    animation-fill-mode: both;
}