Animations

Customization	Reference
Edit options in	📄 HTML/js/app.js
Options object	🔧 app.options.animations

Default Options

window.app = {
  options: {
    // other options
    animations: {
      triggerHook: 0.15,
      speed: { // slow down or speed up the animations
        preloader: 1.0,
        onScrollReveal: 1.0,
        overlayMenuOpen: 1.0,
        overlayMenuClose: 1.25,
      },
      curvedMasks: true,
      curvedMasksForceRepaint: true // fix Safari flickering
    },
    // other options
  }
}

Customization

1. Adjusting Animation Speed

Adjust the float number values for the corresponding keys under speed. These are speed multipliers.

window.app = {
  options: {
    // other options
    animations: {
      triggerHook: 0.15,
      speed: { // slow down or speed up the animations
        preloader: 1.0,
        onScrollReveal: 1.0,
        overlayMenuOpen: 1.0,
        overlayMenuClose: 1.25,
      },
      curvedMasks: false,
      curvedMasksForceRepaint: true // fix Safari flickering
    },
    // other options
  }
}

Examples:

• 1.0 is the default animation speed.
• 0.5 will slow down the animation speed, making it run 2 times longer.
• 2.0 will speed up the animation speed, making it run 2 times shorter.

2. Making Animation Curtains Straight Instead of Curved

Set the curvedMasks key to false.

window.app = {
  options: {
    // other options
    animations: {
      triggerHook: 0.15,
      speed: { // slow down or speed up the animations
        preloader: 1.0,
        onScrollReveal: 1.0,
        overlayMenuOpen: 1.0,
        overlayMenuClose: 1.25,
      },
      curvedMasks: false,
      curvedMasksForceRepaint: true // fix Safari flickering
    },
    // other options
  }
}