.gsap-ohgiri#js-ohgiri
  .window
    - for (i = 0; i < 300; i++)
      .snow(ref="snow" + i)
View Compiled
body {
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

.snow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 100%;
}

.window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(#fff, 1));
}
View Compiled
console.clear()

new Vue({
  el: '#js-ohgiri',
  
  mounted () {
    for (let i = 0; i < 300; i++) {
      // element
      const snow = this.$refs['snow' + i]

      // 基準のx値
      const baseX = gsap.utils.random(-10, 110)
      
      // 初期配置
      gsap.set(snow, {
        x: baseX + 'vw',
        y: -10,
        opacity: gsap.utils.random(0, 1),
        scale: gsap.utils.random(0, 1)
      })
      
      // 縦方向
      gsap.to(snow, {
        duration: gsap.utils.random(10, 30),
        y: '100vh',
        delay: gsap.utils.random(0, -30),
        repeat: -1,
        ease: 'none'
      })
      
      // 横方向
      gsap.to(snow, {
        duration: gsap.utils.random(5, 15),
        x: baseX + gsap.utils.random(-12, 12) + 'vw',
        yoyo: true,
        repeat: -1,
        delay: gsap.utils.random(-20, -10),
        ease: 'power1.inOut'
      })
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js
  2. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/CSSRulePlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js
  7. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/Draggable.min.js
  8. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/EaselPlugin.min.js
  9. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/EasePack.min.js
  10. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js
  11. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js
  12. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
  13. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js
  14. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/MotionPathPlugin.min.js
  15. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js
  16. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PhysicsPropsPlugin3.min.js
  17. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/PixiPlugin.min.js
  18. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js
  19. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/ScrollToPlugin.min.js
  20. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js
  21. https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/TextPlugin.min.js
  22. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js