()
| 23 | // let's set the initial styles |
| 24 | // all elements inside the preview will be hidden so we can animate them in after clicking on a grid item |
| 25 | init() { |
| 26 | // hide title chars |
| 27 | gsap.set(this.DOM.titleChars, {opacity: 0, y: '100%'}); |
| 28 | |
| 29 | // hide image element |
| 30 | gsap.set(this.DOM.imgWrap, {y: '100%', rotationX: -20}); |
| 31 | gsap.set(this.DOM.image, {y: '-100%'}); |
| 32 | |
| 33 | // hide back ctrl |
| 34 | gsap.set(this.DOM.backCtrl, {opacity: 0}); |
| 35 | |
| 36 | // hide content |
| 37 | gsap.set(this.DOM.content, {opacity: 0}); |
| 38 | } |
| 39 | } |