src/js/grid.js
/**
     * Scale up the image and reveal its content.
     * @param {ImageCell} imageCell - the imageCell element.
     */
Scale up the image and reveal its content.
@param {ImageCell} imageCell - the imageCell element.
Scale up the image and reveal its content . @param { ImageCell } imageCell - the imageCell element .
showContent(imageCell) {
        const imageTransform = this.calcTransformImage();
        this.otherImageCells = this.DOM.imageCells.filter(el => el != imageCell.DOM.el);
        gsap.killTweensOf([imageCell.DOM.el, imageCell.DOM.inner, this.otherImageCells]);
        gsap.timeline({
            defaults: {
                duration: 1.2, 
                ease: 'expo.inOut'
            },
            onStart: () => bodyEl.classList.add('oh'),
            onComplete: () => {
                this.isAnimating = false;
            }
        })
        .addLabel('start', 0)
        .add(() => {
            this.textReveal.out();
        }, 'start')
        .set(this.DOM.el, {
            pointerEvents: 'none'
        }, 'start')
        .set(imageCell.DOM.el, {
            zIndex: 100
        }, 'start')
        .set([imageCell.DOM.el, imageCell.DOM.inner, this.otherImageCells], {
            willChange: 'transform, opacity'
        }, 'start')
        .to(imageCell.DOM.el, {
            scale: imageTransform.scale,
            x: imageTransform.x,
            y: imageTransform.y,
            onComplete: () => gsap.set(imageCell.DOM.el, {willChange: ''})
        }, 'start')
        .to(imageCell.DOM.inner, {
            scale: 1,
            onComplete: () => gsap.set(imageCell.DOM.inner, {willChange: ''})
        }, 'start')
        .to([imageCell.contentItem.DOM.nav.prev, imageCell.contentItem.DOM.nav.next], {
            y: 0
        }, 'start')
        .to(this.otherImageCells, {
            opacity: 0,
            scale: 0.8,
            onComplete: () => gsap.set(this.otherImageCells, {willChange: ''}),
            stagger: {
                grid: 'auto',
                amount: 0.17,
                from: this.currentCell
            }
        }, 'start')
        .addLabel('showContent', 'start+=0.45')
        .to(this.DOM.backCtrl, {
            ease: 'expo',
            startAt: {x: '50%'},
            x: '0%',
            opacity: 1
        }, 'showContent')
        .set(this.DOM.miniGrid.el, {
            opacity: 1
        }, 'showContent')
        .set(this.DOM.miniGrid.cells, {
            opacity: 0
        }, 'showContent')
        .to(this.DOM.miniGrid.cells, {
            duration: 1, 
            ease: 'expo',
            opacity: 1,
            startAt: {scale: 0.8},
            scale: 1,
            stagger: {
                grid: 'auto',
                amount: 0.3,
                from: this.currentCell
            }
        }, 'showContent+=0.2')
        .add(() => {
            imageCell.contentItem.textReveal.in();
            imageCell.contentItem.textLinesReveal.in();
            this.DOM.content.classList.add('content--open');
        }, 'showContent')
        .add(() => imageCell.contentItem.DOM.el.classList.add('content__item--current'), 'showContent+=0.02');
    }
showContent ( imageCell ) { const imageTransform = this . calcTransformImage ( ) ; this . otherImageCells = this . DOM . imageCells . filter ( el => el != imageCell . DOM . el ) ; gsap . killTweensOf ( [ imageCell . DOM . el , imageCell . DOM . inner , this . otherImageCells ] ) ; gsap . timeline ( { defaults : { duration : 1.2 , ease : 'expo.inOut' } , onStart : ( ) => bodyEl . classList . add ( 'oh' ) , onComplete : ( ) => { this . isAnimating = false ; } } ) . addLabel ( 'start' , 0 ) . add ( ( ) => { this . textReveal . out ( ) ; } , 'start' ) . set ( this . DOM . el , { pointerEvents : 'none' } , 'start' ) . set ( imageCell . DOM . el , { zIndex : 100 } , 'start' ) . set ( [ imageCell . DOM . el , imageCell . DOM . inner , this . otherImageCells ] , { willChange : 'transform, opacity' } , 'start' ) . to ( imageCell . DOM . el , { scale : imageTransform . scale , x : imageTransform . x , y : imageTransform . y , onComplete : ( ) => gsap . set ( imageCell . DOM . el , { willChange : '' } ) } , 'start' ) . to ( imageCell . DOM . inner , { scale : 1 , onComplete : ( ) => gsap . set ( imageCell . DOM . inner , { willChange : '' } ) } , 'start' ) . to ( [ imageCell . contentItem . DOM . nav . prev , imageCell . contentItem . DOM . nav . next ] , { y : 0 } , 'start' ) . to ( this . otherImageCells , { opacity : 0 , scale : 0.8 , onComplete : ( ) => gsap . set ( this . otherImageCells , { willChange : '' } ) , stagger : { grid : 'auto' , amount : 0.17 , from : this . currentCell } } , 'start' ) . addLabel ( 'showContent' , 'start+=0.45' ) . to ( this . DOM . backCtrl , { ease : 'expo' , startAt : { x : '50%' } , x : '0%' , opacity : 1 } , 'showContent' ) . set ( this . DOM . miniGrid . el , { opacity : 1 } , 'showContent' ) . set ( this . DOM . miniGrid . cells , { opacity : 0 } , 'showContent' ) . to ( this . DOM . miniGrid . cells , { duration : 1 , ease : 'expo' , opacity : 1 , startAt : { scale : 0.8 } , scale : 1 , stagger : { grid : 'auto' , amount : 0.3 , from : this . currentCell } } , 'showContent+=0.2' ) . add ( ( ) => { imageCell . contentItem . textReveal . in ( ) ; imageCell . contentItem . textLinesReveal . in ( ) ; this . DOM . content . classList . add ( 'content--open' ) ; } , 'showContent' ) . add ( ( ) => imageCell . contentItem . DOM . el . classList . add ( 'content__item--current' ) , 'showContent+=0.02' ) ; }
Scale up the image and reveal its content.
Scale up the image and reveal its content .
// Calculate the transform to apply to the image cell // All the others (that are inside the viewport) //this.otherImageCells = this.DOM.imageCells.filter(el => el != imageCell.DOM.el && el.classList.contains('in-view')); // overflow hidden // Hide grid texts