muruhuay

Hello, I have a similar problem, I tried a piece of code and when changing the version it destroys the animation: with this the animation worked <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> and not with these <script src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js" ></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" ></script> the code is simple: html <div class="container"> <div class="caja"> <div class="ball"> <div class="btn"> <p>►</p> </div> </div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box box2"></div> </div> </div> script function coolAnimation() { gsap .timeline({ defaults: { duration: 4, delay: 0.5, repeat: -1, stagger: 0.5, ease: 'elastic.inOut(3)' } }) .to('.box', { opacity: 1, rotation: 360, scale: 0.8, borderRadius: '50%', y: 50 }) .from('.box', { duration: 1, opacity: 0, scale: 0.2, y: 100 }); }; let btn = document.querySelector('.btn'); btn.addEventListener('click', () => { coolAnimation() }) btn.addEventListener('click', () => { gsap .timeline({ defaults: { duration: 0.5, ease: 'elastic', repeat: -1, yoyo: true } }) .to('.ball', { scale: 0 }) .to('.ball', { scale: 1 }) }) Could you tell me what is happening?