Burbujas de hojas de sprites de lienzo

2,273 Andev.web

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

20 August 2024

Tarjeta de bicicleta Pure CSS

14 May 2024

Título de la animación

23 May 2025

inicio de sesión 3d

HTML

CSS

console.clear()

const c = document.querySelector('canvas')
const ctx = c.getContext('2d')
let cw = c.width = innerWidth
let ch = c.height = innerHeight
const bubbles = []
const debounce = gsap.to(window, {duration:0.07})
const img = new Image()
const m = {x:0, y:0}

img.src = 'https://assets.codepen.io/721952/bubbles_1.webp'

img.onload = ()=>{
  for (i=0; i<20; i++) {
    m.x = gsap.utils.random(150, cw-150, 1)
    m.y = gsap.utils.random(150, ch-150, 1)
    makeBubble(true)
  }
}

window.onpointerdown = window.onpointermove = e =>{ 
  m.x = e.x
  m.y = e.y
  makeBubble()
} 
  
function makeBubble(auto){
  if (debounce.progress()==1 || auto) {
    debounce.play(0)
    
    const dist = gsap.utils.random(100, 200)
    const scale = gsap.utils.random(0.4, 0.8)
    const b = {
      dur:gsap.utils.random(3, 7),
      spriteDur:gsap.utils.random(0.12, 0.5),
      rotate:gsap.utils.random(-9, 9),
      scaleX:scale,
      scaleY:scale,
      step:0,
      x:0,
      y:0,
      n:bubbles.length
    }
    
    bubbles.push(b)
    
    gsap.timeline({defaults:{ease:'none'}})
    
    .fromTo(b, { 
      x:m.x-75*scale,
      y:m.y-75*scale,
    },{
      duration:b.dur,
      rotate:'+='+gsap.utils.random(-5, 5, 1),
      motionPath:()=>'M'+b.x+','+b.y+
                     'c'+gsap.utils.random(-dist,dist,1)+','+gsap.utils.random(-dist,dist,1)+' '+
                      gsap.utils.random(-dist,dist,1)+','+gsap.utils.random(-dist,dist,1)+' '+
                      gsap.utils.random(-dist,dist,1)+','+gsap.utils.random(-dist,dist,1)
    }, 0)
    
    .to(b, { 
      duration:b.dur/5,
      ease:'sine.inOut',
      yoyo:true,
      repeat:3,
      repeatRefresh:true,
      scaleX:()=>scale+gsap.utils.random(-0.1,0.1),
      scaleY:()=>scale+gsap.utils.random(-0.1,0.1),
    }, b.dur/5)
    
    .to(b, {
      duration:b.spriteDur,
      step:8, 
      snap:'step'
    }, b.dur-b.spriteDur*2)
    
  }
}

gsap.ticker.add(()=>{
  ctx.clearRect(0,0,cw,ch)
  bubbles.forEach(b=> {
    ctx.translate(b.x+b.scaleX*75, b.y+b.scaleY*75)
    ctx.rotate(b.rotate)
    ctx.drawImage(img, 0, b.step*150, 150, 150, -b.scaleX*75, -b.scaleY*75, b.scaleX*150, b.scaleY*150)
    ctx.rotate(-b.rotate)
    ctx.translate(-b.x-b.scaleX*75, -b.y-b.scaleY*75)
  })
})

window.onresize = ()=>{
  cw = c.width = innerWidth
  ch = c.height = innerHeight
}