How can I give animation delay?

3 replies · opened Sep 7, 2022

DdoyooneeSep 7, 2022

<div class="aligns-items-center">

                    &lt;div class="row " style="justify-content: center;"&gt;
                        &lt;div class="col-lg-6 dark" data-animate="bounceInDown"&gt;
                            &lt;div class="heading-block border-bottom-0"&gt;
                                &lt;h5 class="nott text-center mt-5" style="border-radius:5px;"&gt;
                                    &lt;? // some text ?&gt;
                                &lt;/h5&gt;
                                &lt;div class="content-gap"&gt;&lt;/div&gt;
                                &lt;h4 class="nott text-center py-2" style="color: #FFde59;border-radius:5px;"&gt;
                                    &lt;? // some text ?&gt;
                                &lt;/h4&gt;
                            &lt;/div&gt;
                            &lt;!--
                            [Start Free Trial](#)--&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

In the above code, I apply 'data-animate="bounceInDown" ' on a div. How can I give a delay to the Div?

SSemicolon WebSTAFFSep 7, 2022

Hello,

You can simply add the data-delay="2000" Attribute with the value in milliseconds to add a delay to the animating element. More Documentation on this can be found here: https://docs.semicolonweb.com/docs/shortcodes/animations/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

DdoyooneeSep 8, 2022

OK. Thx.. How about the duration? It can be "data-duration = '500' "?

SSemicolon WebSTAFFSep 8, 2022

Hello,

Consider using this:
[ch_pre]Animation[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard