I have this code that does a spiral animation as it scrolls down the scrollbar
$(document).ready(function(){
var mPrimeiro = false;
var count;
$('#servicos ul li.bloco').each(function( index ) {
count = index;
});
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var item = $('#servicos ul').offset().top;
if( (scroll+400) > item ){
animSvg( $('.svg') );
}
$('#servicos ul li.bloco').each(function( index ) {
if( index < (count+1) ){
var item = $(this).offset().top;
var anim = $(this).find('.svg-lista');
!mPrimeiro ? (mValor = item-1, mPrimeiro = true) : mValor = 200;
if( scroll+mValor > item ){
var ativo = $('.label_serv a').children('li').eq(index);
$('.label_serv a li').removeClass('active');
ativo.addClass('active');
animSvg( anim );
}
}
});
});
});#servicos {
background-color: #f2f2f2;
float: left;
width: 100%;
padding-top: 71px;
background-image: url(http://3mind.com.br/wp-content/uploads/2017/12/fundo-espiral2-2.jpg);
background-position: bottom;
background-repeat: no-repeat;
padding-bottom: 3px;
}#servicos ul{}
#servicos ul li{
display: initial;
height: auto;
text-align: center;
}
#servicos ul li h3,
#diretoria ul li h3{
color: #515151;
display: inline-block;
font-family: "Montserrat";
font-size: 29px;
width: 650px;
margin-left: -40px;
height: auto;
margin-top: 170px;
text-decoration: none !important;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
font-weight: bold;
line-height: 35px;
}
#servicos ul li h3 span {
height: 3px;
position: absolute;
top: -3px;
left: 11px;
font-weight: lighter;
text-align: center;
}
#servicos ul li p {
color: #515151;
font-size: 18px;
text-align: left;
margin-top: -7px;
line-height: 30px;
height: 156px;
width: 587px;
}
#servicos ul li .box img{
width: 70%;
margin: 15% 15%;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#servicos ul .box {
text-align: center;
border: none;
width: 120px;
height: 120px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
font-family: "FuturaLTBold";
left: 0;
right: 0;
margin: 30px auto;
/* display: none; */
}
svg {
position: absolute;
margin: auto;
top: 76px;
left: -371px;
/* right: 0; */
/* bottom: 0; */
width: 100%;
height: 390px;
}
rect {
fill: transparent;
stroke: #f05a29;
stroke-width: 3px;
opacity: 1;
x: 50%;
y: 1%;
position: absolute;
rx: 30%;
ry: 49%;
width: 98%;
height: 98%;
}
svg.inverso {
position: absolute;
margin: auto;
top: 76px;
left: 370px;
width: 100%;
height: 390px;
}
svg.inverso rect {
x: -50%;
}
svg.primeiro{
top: -305px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionid="servicos" class="home_servicos" style=" ">
<div class="container">
<ul class="col-xs-12 no-padding">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
<svg class="primeiro" width="100%" height="100%">
<rect class="svg" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="440">
<!-- <animate attributeName="stroke-dasharray" attributeType="XML"
from="630" to="440"
begin="1s" dur="1s"
fill="freeze" ></animate> -->
</rect>
</svg>
</div>
<li id="1" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
<svg class="inverso" width="100%" height="100%">
<rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1940" style="stroke-dasharray: 1940px;">
<!-- <animate attributeName="stroke-dasharray" attributeType="XML"
from="1160" to="1940"
begin="2s" dur="3s"
fill="freeze" ></animate> -->
</rect> </svg>
<div class="box">
<img src="http://3mind.com.br/svg/svg_1.svg"alt="Imersão">
</div>
<h3 style="text-transform:uppercase;">PLANEJAMENTO ESTRATÉGICO <span></span></h3>
<span class="col-sm-10 col-sm-offset-1"><p class="p1">Utilizamos métodos e ferramentas que nos permitem analisar as estratégias de <strong>players</strong> que se <strong>destacam</strong> no seu segmento, afinal, conhecer bem o posicionamento dos <strong>concorrentes</strong> é fundamental para o planejamento.</p></span>
</li>
<li id="2" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
<svg class="esq" width="100%" height="100%">
<rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1740" style="stroke-dasharray: 1740px;">
<!-- <animate attributeName="stroke-dasharray" attributeType="XML"
from="960" to="1740"
begin="2s" dur="3s"
fill="freeze" ></animate> -->
</rect>
</svg>
<div class="box">
<img src="http://3mind.com.br/svg/svg_2.svg"alt="FATOR_X_DIFERENCIAL">
</div>
<h3 style="text-transform:uppercase;">FATOR X – DIFERENCIAL <span></span></h3>
<span class="col-sm-10 col-sm-offset-1"><p>Depois de entender o segmento, é hora
de encontrar o seu diferencial. Como nos destacaremos no mercado, <strong>Preço</strong>? <strong>Tecnologia</strong>? <strong>Atendimento</strong>? Nossos Consultores apresentarão inúmeras ideias para análise.</p></span>
</li>
<li id="3" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
<svg class="inverso" width="100%" height="100%">
<rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1940" style="stroke-dasharray: 1940px;">
<!-- <animate attributeName="stroke-dasharray" attributeType="XML"
from="1160" to="1940"
begin="2s" dur="3s"
fill="freeze" ></animate> -->
</rect>
</svg>
<div class="box">
<img src="http://3mind.com.br/svg/svg_3.svg"alt="VALIDAÇÃO">
</div>
<h3 style="text-transform:uppercase; text-align:center">VALIDAÇÃO</h3>
<span class="col-sm-10 col-sm-offset-1"><p style="margin-top: -4px;" class="p1"><span class="s1">Depois de debater e escolher as melhores ideias, é hora de colocar em prática para validar junto ao mercado <strong>quais ações</strong> geram mais <strong>resultado</strong>, agindo de forma rápida para agilizar a resposta do consumidor.</span></p></span>
</li>
<li id="4" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
<svg class="esq" width="100%" height="100%">
<rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1740" style="stroke-dasharray: 1740px;">
<!-- <animate attributeName="stroke-dasharray" attributeType="XML"
from="960" to="1740"
begin="2s" dur="3s"
fill="freeze" ></animate> -->
</rect>
</svg>
<div class="box">
<img src="http://3mind.com.br/svg/svg_4.svg"alt="ADEQUAÇÃO">
</div>
<h3 style="text-transform:uppercase;">ADEQUAÇÃO <span></span></h3>
<span class="col-sm-10 col-sm-offset-1"><p class="p1"><span class="s1">Com as análises obtidas, é hora de fazer os ajustes necessários para apresentar oficialmente ao mercado, <strong>integrando</strong> todos os setores da empresa para <strong>otimizar</strong> os processos e <strong>resultados</strong>. </span></p></span>
</li>
<li id="5" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
<svg class="inverso" width="100%" height="100%">
<rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1940" style="stroke-dasharray: 1940px;">
<!-- <animate attributeName="stroke-dasharray" attributeType="XML"
from="1160" to="1940"
begin="2s" dur="3s"
fill="freeze" ></animate> -->
</rect>
</svg>
<div class="box">
<img src="http://3mind.com.br/svg/svg_5.svg"alt="EXECUÇÃO">
</div>
<h3 style="text-transform:uppercase;">EXECUÇÃO <span></span></h3>
<span class="col-sm-10 col-sm-offset-1"><p class="p1"><span class="s1">Na etapa de execução, além do <strong>treinamento</strong> da equipe, criamos o <strong>Plano de Ação</strong> utilizando as melhores estratégias de <strong>Inbound</strong> e <strong>Outbound</strong> Marketing.
</span></p></span>
</li>
<li id="6" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
<svg class="esq" width="100%" height="100%">
<rect class="svg-lista" x="50" y="20" rx="20" ry="20" width="150" height="150" data-to="1740">
<!-- <animate attributeName="stroke-dasharray" attributeType="XML"
from="960" to="1740"
begin="2s" dur="3s"
fill="freeze" ></animate> -->
</rect>
</svg>
<div class="box">
<img src="http://3mind.com.br/svg/svg_4.svg"alt="MONITORAMENTO">
</div>
<h3 style="text-transform:uppercase;">MONITORAMENTO <span></span></h3>
<span class="col-sm-10 col-sm-offset-1"><p class="p1"><span class="s1">Monitorar os resultados e fazer ajustes durante a execução é fundamental para manter-se no <strong>caminho certo</strong>. A 3Mind acompanha sua equipe até o momento de amadurecimento ideal do projeto.</span></p></span>
</li>
<li style=" MARGIN-TOP: 20PX;" id="resultados" class="bloco col-xs-12 col-sm-6 col-sm-offset-3 no-padding">
<div class="botao_home btn-default botao_lista_2">
<a href="cases-e-experiencias/" onclick="pipz.track('VER EXEMPLOS - Planejamento Estratégico - Home', {button: 'VER EXEMPLOS'});">VER EXEMPLOS</a></div>
</li>
</ul>
</div>
</section>The problem is that it only works in google chrome, in other browsers it does not work, so can you do the animation in other browsers?
