Advertisement
artemsemkin

Rhye Theme: slow down preloader speed

Dec 20th, 2021 (edited)
1,213
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. this.finish = () => {
  2.   return new Promise((resolve, reject) => {
  3.     if (!this.$target.length) {
  4.       window.dispatchEvent(new CustomEvent('arts/preloader/end'));
  5.       resolve(true);
  6.       return;
  7.     }
  8.  
  9.     this.timeline
  10.       .timeScale(0.8) // <--- add this to slow down animation to 80% of the original speed
  11.       // .delay(0.5) // <--- or add this to delay the finishing animation
  12.       .clear()
  13.       .set(this.cursor.follower.outer, {
  14.         attr: {
  15.           transform: ''
  16.         }
  17.       })
  18.       .to(this.cursor.follower.outer, {
  19.         drawSVG: '0% 100%',
  20.         rotate: 0,
  21.         transformOrigin: 'center center',
  22.         ease: 'expo.inOut',
  23.         duration: 2.0
  24.       }, 'start')
  25.       .add([
  26.         gsap.to(this.counter, {
  27.           duration: 2.0,
  28.           val: this.counter.target,
  29.           ease: 'expo.inOut',
  30.           onUpdate: () => {
  31.             const value = parseFloat(this.counter.val).toFixed(0);
  32.             this.$counter.text(this.counter.prefix + value + this.counter.suffix);
  33.           }
  34.         }),
  35.       ], 'start')
  36.       .add([
  37.         this.tweens.followMouse.play(),
  38.         gsap.to(this.cursor.follower.element, {
  39.           width: this.cursor.follower.size.element.width,
  40.           height: this.cursor.follower.size.element.height,
  41.           ease: 'expo.out',
  42.           duration: 1.2
  43.         }),
  44.         gsap.to(this.cursor.follower.inner, {
  45.           attr: this.cursor.follower.size.inner,
  46.           ease: 'expo.out',
  47.           duration: 1.2,
  48.         }),
  49.         gsap.to(this.cursor.follower.outer, {
  50.           attr: this.cursor.follower.size.outer,
  51.           ease: 'expo.out',
  52.           autoAlpha: 0,
  53.           duration: 1.2,
  54.         }),
  55.       ])
  56.       .add([
  57.         gsap.effects.moveCurtain(this.curtain.element, {
  58.           duration: 1.2
  59.         }),
  60.         gsap.to(this.$content, {
  61.           y: -30,
  62.           delay: 0.1,
  63.           duration: 0.8,
  64.           ease: 'power3.inOut',
  65.         }),
  66.         gsap.to(this.$target, {
  67.           delay: 0.2,
  68.           display: 'none',
  69.           duration: 0.8,
  70.           ease: 'power3.inOut',
  71.         })
  72.       ], '-=1.2')
  73.       .set(window.$pageContent, {
  74.         autoAlpha: 1
  75.       })
  76.       .to(this.curtain.element, {
  77.         autoAlpha: 0,
  78.         delay: 0.4,
  79.         duration: 0.3
  80.       })
  81.       .set([this.$target, this.curtain.element], {
  82.         y: '-100%',
  83.         display: 'none',
  84.       })
  85.       .set(this.cursor.element, {
  86.         clearProps: 'top,left',
  87.         x: '-50%',
  88.         y: '-50%'
  89.       })
  90.       .add(() => {
  91.         window.dispatchEvent(new CustomEvent('arts/preloader/end'));
  92.         window.$body.removeClass('cursor-progress');
  93.         this.tweens.followMouse.kill();
  94.         resolve(true);
  95.       }, '-=0.6')
  96.  
  97.   });
  98. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement