Vue.js 2 Web Development Projects

The animation

Now, let's move on to the animation itself. Like we did for the castle banners, we will use the TWEEN.js library:

1. First, create a new startAnimation method that calculates a random animation duration and accepts a delay parameter:

      methods: {        // ...        startAnimation (delay = 0) {          const vm = this                // Element width          const width = this.$el.clientWidth          // Random animation duration          const { min, max } = cloudAnimationDurations          const animationDuration = Math.random() * (max - min) + min          // Bing faster clouds forward          this.style.zIndex = Math.round(max - animationDuration)                // Animation will be there        },      }

The faster a cloud is, the lower its animation duration will be. Faster clouds will be displayed before slower clouds, thanks to the ...