shape divider delay

brano099Aug 2, 2023

Hello,

I have a shape divider in the page title and when the page loads the shape divider has a delay .. is it possible to remove the delay?

I would also like the shape divider to adjust its height to the media size and I don't have to load separately

here is live in my test page https://www.webgrafik.sk/olajos/poradenstvo.html

Thank you

<section class="page-title dark include-header page-title-center">
<div class="container">
<div class="page-title-row">
<div class="page-title-content">
<h1 data-animate="fadeInUp" data-delay="-5000" class="font-secondary">Poradenstvo a školenia - Olajos</h1>
</div>
</div>
</div>
<div class="shape-divider d-block d-sm-none" data-shape="wave-4" data-position="bottom" data-height="50"></div>
<div class="shape-divider d-none d-sm-block w-100" data-shape="wave-4" data-position="bottom" data-height="100"></div>
</section>

SemiColonWebSTAFFAug 3, 2023

Hello,

Since Shape Divider is loaded using JS, there will always be a minor delay. You can consider finding the following code in the js/module.shapedivider.js File:

setTimeout( function() {
	element.querySelector('svg').classList.add( 'op-1' );
}, 500);

and change 500 to 0. Additionally, you can also consider using this code directly:

<style>
.shape-divider.shape-divider-1 svg,
.shape-divider.shape-divider-2 svg {
	width: calc( 100% + 1.5px );
	height: 50px;
}

.shape-divider.shape-divider-2 svg {
	height: 100px;
}

.shape-divider.shape-divider-1 .shape-divider-fill,
.shape-divider.shape-divider-2 .shape-divider-fill {
	fill: null;
}
</style>

<div class="shape-divider shape-divider-1 d-block d-sm-none shape-divider-complete" data-shape="wave-4" data-position="bottom" data-height="50"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 140" preserveAspectRatio="none" class="op-ts op-1"><path class="shape-divider-fill" d="M0 51.76c36.21-2.25 77.57-3.58 126.42-3.58 320 0 320 57 640 57 271.15 0 312.58-40.91 513.58-53.4V0H0z" opacity="0.3"></path><path class="shape-divider-fill" d="M0 24.31c43.46-5.69 94.56-9.25 158.42-9.25 320 0 320 89.24 640 89.24 256.13 0 307.28-57.16 481.58-80V0H0z" opacity="0.5"></path><path class="shape-divider-fill" d="M0 0v3.4C28.2 1.6 59.4.59 94.42.59c320 0 320 84.3 640 84.3 285 0 316.17-66.85 545.58-81.49V0z"></path></svg></div>

<div class="shape-divider shape-divider-2 d-none d-sm-block w-100 shape-divider-complete" data-shape="wave-4" data-position="bottom" data-height="100"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 140" preserveAspectRatio="none" class="op-ts op-1"><path class="shape-divider-fill" d="M0 51.76c36.21-2.25 77.57-3.58 126.42-3.58 320 0 320 57 640 57 271.15 0 312.58-40.91 513.58-53.4V0H0z" opacity="0.3"></path><path class="shape-divider-fill" d="M0 24.31c43.46-5.69 94.56-9.25 158.42-9.25 320 0 320 89.24 640 89.24 256.13 0 307.28-57.16 481.58-80V0H0z" opacity="0.5"></path><path class="shape-divider-fill" d="M0 0v3.4C28.2 1.6 59.4.59 94.42.59c320 0 320 84.3 640 84.3 285 0 316.17-66.85 545.58-81.49V0z"></path></svg></div>

This will eliminate the delay. Then you can use height: 100%; in the CSS Codes above according to your needs.

Hope this Helps!

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

brano099Aug 4, 2023

perfeect ... THANK YOU