(item)
| 148 | }, 'start+=1.5'); |
| 149 | } |
| 150 | hideContent(item) { |
| 151 | if ( !this.isContentOpen ) { |
| 152 | return false; |
| 153 | } |
| 154 | this.isContentOpen = false; |
| 155 | |
| 156 | gsap |
| 157 | .timeline({ |
| 158 | onComplete: () => { |
| 159 | item.preview.DOM.el.classList.remove('preview__item--open'); |
| 160 | // pointer events |
| 161 | this.DOM.el.classList.remove('grid--inactive'); |
| 162 | } |
| 163 | }) |
| 164 | .addLabel('start', 0) |
| 165 | // Content/preview animation |
| 166 | .to(item.preview.DOM.titleChars, { |
| 167 | duration: 1.5, |
| 168 | ease: 'expo.inOut', |
| 169 | opacity: 0, |
| 170 | y: '100%', |
| 171 | stagger: -0.04 |
| 172 | }, 'start') |
| 173 | .to(item.preview.DOM.imgWrap, { |
| 174 | duration: 1.5, |
| 175 | ease: 'expo.inOut', |
| 176 | y: '100%', |
| 177 | rotationX: -20 |
| 178 | }, 'start') |
| 179 | .to(item.preview.DOM.image, { |
| 180 | duration: 1.5, |
| 181 | ease: 'expo.inOut', |
| 182 | y: '-100%' |
| 183 | }, 'start') |
| 184 | .to(item.preview.DOM.backCtrl, { |
| 185 | duration: 1.5, |
| 186 | ease: 'expo.inOut', |
| 187 | x: '20%', |
| 188 | opacity: 0 |
| 189 | }, 'start') |
| 190 | .to(item.preview.DOM.content, { |
| 191 | duration: 1.5, |
| 192 | ease: 'expo.inOut', |
| 193 | y: '50%', |
| 194 | opacity: 0 |
| 195 | }, 'start') |
| 196 | |
| 197 | .to(titleChars, { |
| 198 | duration: 1, |
| 199 | ease: 'expo.inOut', |
| 200 | opacity: 1, |
| 201 | y: '0%', |
| 202 | stagger: -0.03 |
| 203 | }, 'start+=0.4') |
| 204 | .add(() => { |
| 205 | // start the rAF on every item |
| 206 | for(const item of this.gridItems) { |
| 207 | item.translationVals.y = item.rotationVals.y = item.rotationVals.x = 0; |
no test coverage detected