Having trouble put code pen into my project

Question

I have a bug with my code below. I got the files on this doc code pen: https://codepen.io/faustdp/pen/yXypKM I put it locally, added the scss, the html, the babel js, then I launched, the scss as well as the html is displayed well, but the script does not launch when I click on the div. There is a bug but I don't know where it came from, I've been on it for 3 hours but I can't find anything yet. Thank you

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
  <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script>
  <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>
  <style type="text/css">
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow: hidden;
  background-color: #313636;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  margin-bottom: 80px;
}

.btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.text {
  user-select: none;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
}

.subCircle {
  pointer-events: none;
}

.strokeW {
  animation: strokeW .6s forwards;
  @keyframes strokeW {
    to {
      stroke-width: 1.16;
    }
  }
}
</style>
</head>

<script type="text/javascript">
  let tl, downloading = false, points = [], 
    btn = document.querySelector('.btn'),
    dot = document.querySelector('.dot'),
    text = document.querySelector('.text'),
    mainCirc = document.querySelector('.mainCircle'),
    subCirc = document.querySelector('.subCircle'),
    mainCircFill = document.querySelector('.mainCircleFill'),
    arrow = document.querySelector('.arrow'),
    rect = document.querySelector('.rect');

TweenLite.set(rect, {transformOrigin: '50% 50%', rotation: 45});

btn.addEventListener('click', animation);

function animation() {
  if (downloading) return;
  downloading = !downloading;
  let downloadTime = Math.random() * .5 + .7;
  tl = new TimelineLite({onComplete: restart});
  tl.restart().play()
  .to(arrow, .35, {y: 2.5, ease: CustomEase.create('custom', 'M0,0,C0.042,0.14,0.374,1,0.5,1,0.64,1,0.964,0.11,1,0')}, 'click')
  .to(text, .3, {svgOrigin: '55% 35%', scale: .77, ease: CustomEase.create('custom', 'M0,0,C0.042,0.14,0.374,1,0.5,1,0.64,1,0.964,0.11,1,0')}, 'click+=.05')
  .set(subCirc, {fillOpacity: 1, strokeOpacity: 1}, 'squeeze-=.3')
  .to(subCirc, .35, {fillOpacity: 0, ease: Power1.easeInOut}, 'squeeze-=.3')
  .to(subCirc, .45, {attr:{r: 13}, strokeOpacity: 0, className: '+=strokeW', ease: Power0.easeNone}, 'squeeze-=.3')
  .to(btn, .7, {attr:{d: 'M50,25 h0 a10,10 0 0,1 10,10 a10,10 0 0,1 -10,10 s0,0 0,0  a10,10 0 0,1 -10,-10 a10,10 0 0,1 10,-10 h0'}, ease: Sine.easeOut}, 'squeeze')
  .to([mainCirc, mainCircFill, rect, arrow], .7, {x: 30, ease: Sine.easeOut}, 'squeeze')
  .to(rect, .7, {fill: '#fff', rotation: 270, ease: Sine.easeOut}, 'squeeze')
  .to(text, .3, {autoAlpha: 0, y: 7, onComplete: changeText}, 'squeeze')
  .to(arrow, .7, {attr:{d: 'M20,39 l3.5,-3.5 l-3.5,-3.5 M20,39 l-3.5,-3.5 l3.5,-3.5 M20,39 l0,0'}, transformOrigin: '50% 50%', rotation: 225, ease: Sine.easeOut}, 'squeeze')
  .to(dot, .4, {attr:{r: 1.5}, ease: Back.easeOut.config(7)})
  .set(subCirc, {drawSVG: 0, strokeOpacity: 1,  transformOrigin: '50% 50%', x: 30, rotation: -90, attr:{r: 9.07}})
  .to(subCirc, downloadTime, {drawSVG: '102%', ease: Power2.easeIn}, 'fill+=.02')
  .to(dot, downloadTime, {bezier:{type: 'cubic', values: points}, attr:{r: 2.7} , ease: Power2.easeIn}, 'fill')
  .to('.gradient', downloadTime, {attr:{offset: '0%'}, ease: Power2.easeIn}, 'fill')
  .to(dot, .44, {fill: '#02fc86', y: -22, ease: Power1.easeOut}, 'stretch-=.01')
  .to(dot, .27, {transformOrigin: '50% 50%', scaleX: .5, ease: SlowMo.ease.config(0.1, 2, true)}, 'stretch+=.04')
  .to(dot, .3, {scaleY: .6, ease: SlowMo.ease.config(0.1, 2, true)}, 'stretch+=.31')
  .to(dot, .44, {scaleX: .4, y: 22, ease: Power2.easeIn}, 'stretch+=.45')
  .to([mainCirc, subCirc, arrow, rect, mainCircFill], .33, {opacity: 0, ease: Power2.easeOut}, 'stretch+=.2')
  .to(btn, .4, {attr:{d: 'M50,25 h20 a10,10 0 0,1 10,10 a10,10 0 0,1 -10,10 s-20,0 -40,0 a10,10 0 0,1 -10,-10 a10,10 0 0,1 10,-10 h20'}, ease: Power1.easeOut}, 'stretch+=.2')
  .set(dot, {opacity: 0}, 'stretch+=.875')
  .to(btn, .01, {stroke: '#02fc86', ease: Power2.easeIn}, 'stretch+=.87')
  .to(btn, .3, {attr:{d: 'M50,25 h20 a10,10 0 0,1 10,10 a12,12 0 0,1 -10,10.5 s-20,6 -40,0 a12,12 0 0,1 -10,-10.5 a10,10 0 0,1 10,-10 h20'},
      ease: CustomEase.create('custom', 'M0,0 C0.046,0.062 0.018,1 0.286,1 0.532,1 0.489,-0.206 0.734,-0.206 0.784,-0.206 0.832,-0.174 1,0')}, 'stretch+=.869')
  .to(text, .45, {autoAlpha: 1, y: 0, ease: Back.easeOut.config(2.5)}, 'stretch+=.855');
};

function restart() {
  setTimeout(() => {
    tl.seek(0).pause();
    text.textContent = 'Voir le comparatif';
    TweenLite.set(text, {x: 0});
    downloading = false;
  }, 2000);
};

function changeText() {
  text.textContent = 'Redirection en cours';
  TweenLite.set(text, {x: -5});
};

(function() {
  let data = Snap.path.toCubic('M0,0 a9,9 0 0,1 0,18 a9,9 0 0,1 0,-18'),
      dataLen = data.length;
  for (let i = 0; i < dataLen; i++) {
    let seg = data[i];
    if (seg[0] === 'M') {
      let point = {};
      point.x = seg[1];
      point.y = seg[2];
      points.push(point);
    } else {
      for (let i = 1; i < 6; i+=2) {
        let point = {};
        point.x = seg[i];
        point.y = seg[i+1];
        points.push(point);
      }
    }
  }
})();
</script>
<svg viewBox='0 0 100 50' width='620' height='310' fill='none'>
  <circle cx='20'cy='35' r='8.5' fill='#00cffc' class='mainCircle'></circle>
  <circle cx='20' cy='35' r='8.05' stroke='#00cffc' stroke-width='.9' fill='url(#gradient)' class='mainCircleFill'></circle>
  <rect x='17.5' y='32.5' width='5' height='5' stroke='none' fill='#00cffc' class='rect'></rect>
  <path d='M20,39 l3.5,-3.5 l0,0 M20,39 l-3.5,-3.5 l0,0 M20,39 l0,-7.5' stroke='#fff' stroke-linecap='round' stroke-width='.8' class='arrow'></path>
  <text x='55' y='36.5' fill='#fff' text-anchor='middle' font-size='5.5' font-family='Roboto' letter-spacing='.2' class='text'>Voir le comparatif</text>
  <path d='M50,25 h30 a10,10 0 0,1 10,10 a10,10 0 0,1 -10,10 s-30,0 -60,0 a10,10 0 0,1 -10,-10 a10,10 0 0,1 10,-10 h30' stroke='#00cffc' stroke-width='.7' fill='transparent' class='btn'></path>
  <circle cx='20' cy='35' r='7.9' fill='#fff' fill-opacity='0' stroke='#fff' stroke-width='1.6' stroke-opacity='0' class='subCircle'></circle>
  <circle cx='50' cy='26' r='0' fill='#fff' class='dot'></circle>
  <linearGradient id='gradient' x1='0%' y1='0%' x2='0%' y2='100%'>
    <stop offset='98%' class='gradient' stop-color='transparent'/>
    <stop offset='98%' class='gradient' stop-color='#00afd3'/>
  </linearGradient>
</svg>

Answer 1

You don't want your JavaScript to run until all of your supporting JS libraries are loaded, since you are calling functions in those libraries. CodePen ensures this automatically, but you need to wrap your JavaScript code with a test for window.onload .

<script type="text/javascript">
  window.onload = function(){
    // Your code here
  };
</script>

This will also ensure that your DOM elements are available for your JavaScript to target.

Having trouble put code pen into my project

Question

1 answers

solution1
0 2020-05-10 21:40:24

Having trouble put code pen into my project

Question

1 answers

solution1 0 2020-05-10 21:40:24

solution1
0 2020-05-10 21:40:24