1

Hola a todos tengo el siguiente código, básicamente quiero clonar el div (.wavyLinesLeft) que contiene los elementos animados y ponerlos en el div de la derecha, el problema es que me clona los elementos con sus estilos pero no esta clonando la animación, Alguien me puede ayudar, muchas gracias!

// ----- Animación Wavy Lines White ----//
  let xw = []
  for (var i = 0; i <= 120; i++) {
    xw.push(i)
  }
  let t = 0
  function animateW() {
    let points = xw.map(x => {
      let y = 100 + 7 * Math.sin((x + t) / 10)
      return [x, y]
    })
    let path = "M" + points.map(p => {
      return p[0] + "," + p[1]
    }).join(" L")
    document.querySelector("#lineWhithe").setAttribute("d", path)
    t += 0.1
    requestAnimationFrame(animateW)
  }

  $(document).ready(function(){
    $(".wavyLinesLeft").clone().appendTo(".wavyLinesRight");
  });  

// ----- Animación Wavy Lines Pink ----//
  let xp = []
  for (var i = 0; i <= 180; i++) {
    xp.push(i)
  }
  function animateP() {
    let points = xp.map(x => {
      let y = 100 + 7 * Math.sin((x + t) / 10)
      return [x, y]
    })
    let path = "M" + points.map(p => {
      return p[0] + "," + p[1]
    }).join(" L") 
    document.querySelector("#linePink").setAttribute("d", path)
    t += 0.1
    requestAnimationFrame(animateP)
  }
  

// ----- Animación Wavy Lines Blue ----//
  let xb = []
  for (var i = 0; i <= 240; i++) {
    xb.push(i)
  }
  function animateB() {
    let points = xb.map(x => {
      let y = 100 + 7 * Math.sin((x + t) / 10)
      return [x, y]
    })
    let path = "M" + points.map(p => {
      return p[0] + "," + p[1]
    }).join(" L") 
    document.querySelector("#lineBlue").setAttribute("d", path)
    t += 0.1
    requestAnimationFrame(animateB)
  }
  
   animateP()
   animateB()
   animateW()
body{
  background-color:gray;
}

svg {
  width: 100%;
  z-index: 10;
}

path#lineWhithe {
  stroke: #ffffff;
  stroke-width: 10px;
  stroke-linecap: round;
  fill: none;
}

path#linePink {
  stroke: #ff005d;
  stroke-width: 10px;
  stroke-linecap: round;
  fill: none;
}

path#lineBlue {
  stroke: #657DD5;
  stroke-width: 10px;
  stroke-linecap: round;
  fill: none;
}

.wavyLinesLeft{
  border: 1px solid magenta;
  position: absolute;
  width:250px;
  background: transparent;
}

.wavyLinesRight{
  border: 1px solid cyan;
  position: relative;
  width:50%;
  height: 200px;
  background: transparent;
  float: right;
}

.wavyLineTopL{
  position: relative;
  top: 80%;
}
.wavyLineCenterL{
  position: absolute;
  top: 15%;
}
.wavyLineButtomL{
  position: absolute;
  top: 15%;
}
<!DOCTYPE html>
<html lang="es-ES">
<head>
	<meta charset="UTF-8">
	<title>Worth Media | Hola</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" type="image/png" href="favicon.png" />
	<!-- - - - - - - CSS Styles - - - - - -  -->
	<link rel="stylesheet" type="text/css" href="assets/css/main.css">
	<link rel = "stylesheet"  href = "assets/css/magic.css" >
	<!-- - - - - - - JS - - - - - -  -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<!-- FADE UP -->
</head>
<body>
	
	<!-- Wavy Lines -->
	<div class="wavyLinesLeft hide">
		<div class="wavyLineTopL">
			<svg>
			  <path id="lineWhithe" d="M10,50 L50,100 L90,50"></path>
			</svg>
			<div class="wavyLineCenterL">
				<svg>
				  <path id="linePink" d="M10,50 L50,100 L90,50"></path>
				</svg>
				<div class="wavyLineButtomL">
					<svg>
					  <path id="lineBlue" d="M10,50 L50,100 L90,50"></path>
					</svg>
				</div>
			</div>
		</div>
	</div>
	<div class="wavyLinesRight">
	</div>	
	
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

</body>
</html>

1 respuesta 1

1

Tienes dos problemas. Primero, estas utilizando id para identificar los path y el id debe de ser unico en el DOM. Utiliza clases en lugar de ids. Segundo, querySelector solo obtiene el primer elemento en la lista, Utiliza querySelectorAll en su lugar. Quedaria asi:

// ----- Animación Wavy Lines White ----//
  let xw = []
  for (var i = 0; i <= 120; i++) {
    xw.push(i)
  }
  let t = 0
  function animateW() {
    let points = xw.map(x => {
      let y = 100 + 7 * Math.sin((x + t) / 10)
      return [x, y]
    })
    let path = "M" + points.map(p => {
      return p[0] + "," + p[1]
    }).join(" L")
    var list = document.querySelectorAll(".lineWhithe");
    list.forEach(function(line) {
      line.setAttribute("d", path)
    });
    t += 0.1
    requestAnimationFrame(animateW)
  }

  $(document).ready(function(){
    $(".wavyLinesLeft").clone().appendTo(".wavyLinesRight");
    animateP()
    animateB()
    animateW()
  });  

// ----- Animación Wavy Lines Pink ----//
  let xp = []
  for (var i = 0; i <= 180; i++) {
    xp.push(i)
  }
  function animateP() {
    let points = xp.map(x => {
      let y = 100 + 7 * Math.sin((x + t) / 10)
      return [x, y]
    })
    let path = "M" + points.map(p => {
      return p[0] + "," + p[1]
    }).join(" L") 
    var list = document.querySelectorAll(".linePink");
    list.forEach(function(line) {
      line.setAttribute("d", path)
    });
    t += 0.1
    requestAnimationFrame(animateP)
  }
  

// ----- Animación Wavy Lines Blue ----//
  let xb = []
  for (var i = 0; i <= 240; i++) {
    xb.push(i)
  }
  function animateB() {
    let points = xb.map(x => {
      let y = 100 + 7 * Math.sin((x + t) / 10)
      return [x, y]
    })
    let path = "M" + points.map(p => {
      return p[0] + "," + p[1]
    }).join(" L") 
    var list = document.querySelectorAll(".lineBlue");
    list.forEach(function(line) {
      line.setAttribute("d", path)
    });
    t += 0.1
    requestAnimationFrame(animateB)
  }
  
   
body{
  background-color:gray;
}

svg {
  width: 100%;
  z-index: 10;
}

path.lineWhithe {
  stroke: #ffffff;
  stroke-width: 10px;
  stroke-linecap: round;
  fill: none;
}

path.linePink {
  stroke: #ff005d;
  stroke-width: 10px;
  stroke-linecap: round;
  fill: none;
}

path.lineBlue {
  stroke: #657DD5;
  stroke-width: 10px;
  stroke-linecap: round;
  fill: none;
}

.wavyLinesLeft{
  border: 1px solid magenta;
  position: absolute;
  width:250px;
  background: transparent;
}

.wavyLinesRight{
  border: 1px solid cyan;
  position: relative;
  width:50%;
  height: 200px;
  background: transparent;
  float: right;
}

.wavyLineTopL{
  position: relative;
  top: 80%;
}
.wavyLineCenterL{
  position: absolute;
  top: 15%;
}
.wavyLineButtomL{
  position: absolute;
  top: 15%;
}
<!DOCTYPE html>
<html lang="es-ES">
<head>
	<meta charset="UTF-8">
	<title>Worth Media | Hola</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" type="image/png" href="favicon.png" />
	<!-- - - - - - - CSS Styles - - - - - -  -->
	<link rel="stylesheet" type="text/css" href="assets/css/main.css">
	<link rel = "stylesheet"  href = "assets/css/magic.css" >
	<!-- - - - - - - JS - - - - - -  -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<!-- FADE UP -->
</head>
<body>
	
	<!-- Wavy Lines -->
	<div class="wavyLinesLeft ">
		<div class="wavyLineTopL">
			<svg>
			  <path class="lineWhithe" d="M10,50 L50,100 L90,50"></path>
			</svg>
			<div class="wavyLineCenterL">
				<svg>
				  <path class="linePink" d="M10,50 L50,100 L90,50"></path>
				</svg>
				<div class="wavyLineButtomL">
					<svg>
					  <path class="lineBlue" d="M10,50 L50,100 L90,50"></path>
					</svg>
				</div>
			</div>
		</div>
	</div>
	<div class="wavyLinesRight">
	</div>	
	
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

</body>
</html>

1
  • 1
    Hola Alan, Muchas gracias por tu valiosa ayuda! Commented el 11 oct. 2018 a las 19:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.