(item)
| 74 | } |
| 75 | } |
| 76 | showContent(item) { |
| 77 | if ( this.isContentOpen ) { |
| 78 | return false; |
| 79 | } |
| 80 | |
| 81 | this.isContentOpen = true; |
| 82 | |
| 83 | // pointer events |
| 84 | this.DOM.el.classList.add('grid--inactive'); |
| 85 | |
| 86 | // stop the rAF on every item |
| 87 | for(const item of this.gridItems) { |
| 88 | item.stopTransformAnimation(); |
| 89 | } |
| 90 | |
| 91 | gsap |
| 92 | .timeline() |
| 93 | .addLabel('start', 0) |
| 94 | .to(this.DOM.items, { |
| 95 | duration: 2, |
| 96 | ease: 'expo.inOut', |
| 97 | opacity: 0, |
| 98 | //z: '+='+getRandomNumber(1000,5000), |
| 99 | rotationX: 0, |
| 100 | rotationY: 0, |
| 101 | y: '-='+getRandomNumber(1000,1600), |
| 102 | stagger: {amount: 0.2, grid: 'auto', from: 'top'} |
| 103 | }, 'start') |
| 104 | .to(titleChars, { |
| 105 | duration: 1.5, |
| 106 | ease: 'expo.inOut', |
| 107 | opacity: 0, |
| 108 | y: '-=100%', |
| 109 | stagger: 0.03 |
| 110 | }, 'start+=0.1') |
| 111 | .add(() => { |
| 112 | item.preview.DOM.el.classList.add('preview__item--open'); |
| 113 | }, 'start+=0.1') |
| 114 | |
| 115 | // Content/preview animation |
| 116 | .to(item.preview.DOM.titleChars, { |
| 117 | duration: 1.5, |
| 118 | ease: 'expo.inOut', |
| 119 | opacity: 1, |
| 120 | y: '0%', |
| 121 | stagger: 0.05 |
| 122 | }, 'start+=0.6') |
| 123 | .to([item.preview.DOM.imgWrap, item.preview.DOM.image], { |
| 124 | duration: 1.5, |
| 125 | ease: 'expo.inOut', |
| 126 | opacity: 1, |
| 127 | y: '0%', |
| 128 | rotationX: 0 |
| 129 | }, 'start+=0.5') |
| 130 | .to(item.preview.DOM.imgWrap, { |
| 131 | duration: 1.5, |
| 132 | ease: 'expo.inOut', |
| 133 | opacity: 1 |
no test coverage detected