| 54 | this.navigate('prev'); |
| 55 | } |
| 56 | navigate(direction) { |
| 57 | if ( this.isAnimating ) { |
| 58 | return false; |
| 59 | } |
| 60 | this.isAnimating = true; |
| 61 | |
| 62 | const currentSlide = this.slides[this.current]; |
| 63 | // update current |
| 64 | if ( direction === 'next' ) { |
| 65 | this.current = this.current < this.slidesTotal-1 ? this.current+1 : 0; |
| 66 | } |
| 67 | else { |
| 68 | this.current = this.current > 0 ? this.current-1 : this.slidesTotal-1; |
| 69 | } |
| 70 | const upcomingSlide = this.slides[this.current]; |
| 71 | |
| 72 | gsap |
| 73 | .timeline({ |
| 74 | onStart: () => upcomingSlide.DOM.el.classList.add('slide--current'), |
| 75 | onComplete: () => { |
| 76 | this.isAnimating = false; |
| 77 | currentSlide.DOM.el.classList.remove('slide--current'); |
| 78 | } |
| 79 | }) |
| 80 | .addLabel('start', 0) |
| 81 | .set(upcomingSlide.DOM.imgWrap, { |
| 82 | //x: direction === 'next' ? '100%' : '-100%', |
| 83 | y: direction === 'next' ? '-100%' : '100%', |
| 84 | clipPath: this.config.clipPath.final |
| 85 | }, 'start') |
| 86 | .set(upcomingSlide.DOM.el, {opacity: 1}, 'start') |
| 87 | .set(upcomingSlide.DOM.img, { |
| 88 | //x: direction === 'next' ? '-100%' : '100%', |
| 89 | y: direction === 'next' ? '100%' : '-100%' |
| 90 | }, 'start') |
| 91 | .set(upcomingSlide.DOM.text, {y: direction === 'next' ? '100%' : '-100%'}, 'start') |
| 92 | .set(upcomingSlide.DOM.link, {opacity: 0}, 'start') |
| 93 | // animate the shape from initial to its final state (clip-path) |
| 94 | .to(currentSlide.DOM.imgWrap, { |
| 95 | duration: 1, |
| 96 | ease: 'expo', |
| 97 | clipPath: this.config.clipPath.final, |
| 98 | rotation: 0.001 |
| 99 | }, 'start') |
| 100 | // animate the current slide texts out |
| 101 | .to(currentSlide.DOM.text, { |
| 102 | duration: 1, |
| 103 | ease: 'power3', |
| 104 | y: direction === 'next' ? '-100%' : '100%' |
| 105 | }, 'start') |
| 106 | // animate the current slide link out |
| 107 | .to(currentSlide.DOM.link, { |
| 108 | duration: 0.5, |
| 109 | ease: 'power3', |
| 110 | opacity: 0 |
| 111 | }, 'start') |
| 112 | // move the current slide out (img and imgWrap) |
| 113 | .to(currentSlide.DOM.imgWrap, { |