problem animation

[vitor1410]

In the animation of this component I’m showing in the video.

Link: Video

Sometimes she gets very fast.

After updating the page goes back to normal and then gets faster again.

Code: `<div class=”row text-center pt-3″>
<div class=”col-md-10 mx-md-auto”>
<h1 class=”word-rotator slide font-weight-bold text-8 mb-3 appear-animation” data-appear-animation=”fadeInUpShorter”>
<span>Oferecemos uma ampla gama de </span>
<span class=”word-rotator-words bg-dark”>
<b class=”is-visible”>impressoras</b>
<b>multifuncionais</b>
<b>scanners</b>
</span>

</h1>
<p class=”lead appear-animation” data-appear-animation=”fadeInUpShorter” data-appear-animation-delay=”300″>
com incrível qualidade, recursos fáceis de usar e opcionais de conectividade convenientes para escritório de qualquer porte.
</p>
</div>
</div>`

Is it possible to solve?

---

[Support2]

Hello Vitor,

First sorry for this issue and sorry the delay on response this ticket. Our team was trying a temporary solution for you but no success, since this it’s more complicated to fix and will require some more time (will be needed refactor the JS plugin of Word Rotator).

Our team are working now in a fix for this and as soon possible will return for you a solution.

Thanks for your patience.

Kind Regards,

Rodrigo.

---

[vitor1410]

thanks

---

[vitor1410]

Any news regarding this case?

---

[Support2]

Hello Vitor,

Unfortunately not yet.

As soon we have this fixed we will notify you.

Thanks for your patience.

Kind Regards,

Rodrigo.

---

[vitor1410]

Hi,

I noticed that a new version 7.6 has been released. Does it correct this problem?

---

[Support2]

Hello Vitor,

Not yet.

This is being more complicated due to Google Chrome setTimeout() issues.

We are working hard to provide a 100% working fix on this issue.

Thanks for your patience.

Kind Regards,

Rodrigo.

---

[vitor1410]

Hello,

Any news on the topic?

I opened this link of the last version does not seem to occur.
https://preview.themeforest.net/item/porto-responsive-html5-template/full_screen_preview/4106987?_ga=2.77686300.982670022.1579539479-524801787.1572356759
How can I fix it?

---

• This reply was modified 4 years, 3 months ago by vitor1410.

[Support2]

Hello Vitor,

Unfortunately this issue is not solved yet.

We tried various solutions but no success for a good and automatic code when using multiple word rotators in same page.

I’ve created this custom code for you that should temporary solve the issue for you. Please follow the steps below:

1) HTML:

<h2 class="word-rotator word-rotator-custom slide mb-2">
	<span>Porto is </span>
	<span class="word-rotator-words bg-primary">
		<b class="is-visible">incredibly</b>
		<b>especially</b>
		<b>extremely</b>
	</span>
	<span> beautiful.</span>
</h2>

<h2 class="word-rotator word-rotator-custom-2 slide mb-2">
	<span>Porto is </span>
	<span class="word-rotator-words bg-dark">
		<b class="is-visible">incredibly</b>
		<b>especially</b>
		<b>extremely</b>
	</span>
	<span> beautiful.</span>
</h2>

* Note the classes word-rotator-custom and word-rotator-custom-2.
* If wants only one word rotator on the page, just ignore the code of second word rotator.

2) Add in (js/custom.js):
https://pastebin.com/raw/nu4Rz0M5

* On this example i’m creating two custom word rotators. If you wants only one word rotator on the page, just ignore the code for second word rotator.
* Please note that this is not the definitive solution since on this way is required too much manual code. We wants something more simple and automatic.
* We will continue working in a definite fix for this in a future version of Porto.

Thanks for your patience and we hope this solve your issue at this moment.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[vitor1410]

Thanks for the help Rodrigo, it helps me a lot.
Worked perfectly.

---

[Author]

Posts