gsap#gsap JavaScript Examples

// show the image element
    showImage() {
        // kill any current tweens
        gsap.killTweensOf(this.DOM.revealInner);
        gsap.killTweensOf(this.DOM.revealImage);
        
        this.tl = gsap.timeline({
            onStart: () => {
                // show both image and its parent element
                this.DOM.reveal.style.opacity = this.DOM.revealInner.style.opacity = 1;
                // set a high z-index value so image appears on top of other elements
                gsap.set(this.DOM.el, {zIndex: images.length});
            }
        })
        // animate the image wrap
        .to(this.DOM.revealInner, 1.2, {
            ease: 'Expo.easeOut',
            startAt: {scale: 0.3},
            scale: 1
        })
        // animate the image element
        .to(this.DOM.revealImage, 1.2, {
            ease: 'Expo.easeOut',
            startAt: {scale: 1.7},
            scale: 1
        }, 0);
    }

leave() {
        this.emit('leave');
        this.state.hover = false;

        this.DOM.el.classList.remove('button--hover');
        document.body.classList.remove('active');
        
        gsap.killTweensOf(document.body);
        gsap.killTweensOf(this.DOM.textinner);

        gsap
        .timeline()
        .to(document.body, 0.2, {backgroundColor: bodyColor})
        .to(this.DOM.textinner, 0.1, {
            ease: 'Power3.easeOut',
            opacity: 0, 
            y: '10%'
        }, 0)
        .to(this.DOM.textinner, 0.2, {
            ease: 'Expo.easeOut',
            opacity: 1, 
            startAt: {y: '-20%'}, 
            y: '0%'
        });
    }

constructor(el) {
        this.DOM = {el: el};
        this.DOM.el.style.opacity = 0;
        
        this.bounds = this.DOM.el.getBoundingClientRect();
        
        this.renderedStyles = {
            tx: {previous: 0, current: 0, amt: 0.2},
            ty: {previous: 0, current: 0, amt: 0.2},
            scale: {previous: 1, current: 1, amt: 0.15},
            //opacity: {previous: 1, current: 1, amt: 0.1}
        };

        this.onMouseMoveEv = () => {
            this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2;
            this.renderedStyles.ty.previous = this.renderedStyles.ty.previous = mouse.y - this.bounds.height/2;
            gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1});
            requestAnimationFrame(() => this.render());
            window.removeEventListener('mousemove', this.onMouseMoveEv);
        };
        window.addEventListener('mousemove', this.onMouseMoveEv);
    }

Vue.directive('gsap', (el, binding) => {
  const options = { ...binding.value }
  const modifiers = binding.modifiers

  if (modifiers.set) {
    gsap.set(el, options)
  }

  if (modifiers.to) {
    gsap.to(el, options)
  }

  if (modifiers.from) {
    gsap.from(el, options)
  }

  if (modifiers.fromTo) {
    gsap.fromTo(el, { ...binding.value[0] }, { ...binding.value[1] })
  }
})

<%

constructor(el) {
        this.DOM = {el: el};
        this.DOM.el.style.opacity = 0;
        
        this.bounds = this.DOM.el.getBoundingClientRect();
        
        this.renderedStyles = {
            tx: {previous: 0, current: 0, amt: 0.18},
            ty: {previous: 0, current: 0, amt: 0.18}
        };

        this.onMouseMoveEv = () => {
            this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2;
            this.renderedStyles.ty.previous = this.renderedStyles.ty.previous = mouse.y - this.bounds.height/2;
            gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1});
            requestAnimationFrame(() => this.render());
            window.removeEventListener('mousemove', this.onMouseMoveEv);
        };
        window.addEventListener('mousemove', this.onMouseMoveEv);
    }

highlight() {
        this.toggleCurrent();

        gsap.set([this.DOM.deco, this.DOM.cta], {opacity: 1});
        gsap.to(this.DOM.galleryItems, {
            duration: 1, 
            ease: 'expo',
            startAt: {scale: 0.01, rotation: gsap.utils.random(-20,20)},
            scale: 1,
            opacity: +this.isCurrent,
            rotation: 0,
            stagger: 0.05
        });
    }

// initial animation for revealing the menu items
    showMenuItems() {
        gsap.to(this.menuItems.map(item => item.DOM.textInner), {
            duration: 1.2,
            ease: 'Expo.easeOut',
            startAt: {y: '100%'},
            y: 0,
            delay: pos => pos*0.06
        });
    }

// On mouseleave reset/animate the scale of the intro image wrapper
    onMouseleaveIntro() {
        if ( !this.config.isThumbView ) return false;
        this.emit('leave');

        gsap
        .to(this.DOM.introImgWrap, {
            duration: 1,
            ease: 'expo',
            scale: 1
        });
    }

// initial animation for revealing the menu items
    showMenuItems() {
        gsap.to(this.menuItems.map(item => item.DOM.textInner), {
            duration: 1.2,
            ease: 'Expo.easeOut',
            startAt: {y: '100%'},
            y: 0,
            delay: pos => pos*0.06
        });
    }

// On mouseenter animate the scale of the intro image wrapper
    // This wrapper is necessary so we don't have to play with the image itself (which has already a transform applied)
    onMouseenterIntro() {
        if ( !this.config.isThumbView ) return false;
        this.emit('enter');
        
        gsap
        .to(this.DOM.introImgWrap, {
            duration: 1,
            ease: 'expo',
            scale: 1.2
        });
    }

// initial animation for revealing the menu items
    showMenuItems() {
        gsap.to(this.menuItems.map(item => item.DOM.textInner), {
            duration: 1.2,
            ease: 'Expo.easeOut',
            startAt: {y: '100%'},
            y: 0,
            delay: pos => pos*0.06
        });
    }

enter() {
        this.emit('enter');
        this.state.hover = true;
        this.DOM.el.classList.add('button--hover');
        document.body.classList.add('active');

        gsap.killTweensOf(this.DOM.textinner);
        gsap.killTweensOf(this.DOM.deco);

        gsap
        .timeline()
        .to(this.DOM.deco, 0.5, {
            ease: 'Power3.easeOut',
            startAt: {y: '75%'},
            y: '0%'
        })
        .to(this.DOM.textinner, 0.1, {
            ease: 'Power3.easeOut',
            opacity: 0, 
            y: '-10%'
        }, 0)
        .to(this.DOM.textinner, 0.2, {
            ease: 'Expo.easeOut',
            opacity: 1, 
            startAt: {y: '20%'}, 
            y: '0%'
        }, 0.1);
    }

// hide the image element
    hideImage() {
        // kill any current tweens
        gsap.killTweensOf(this.DOM.revealInner);
        gsap.killTweensOf(this.DOM.revealImage);

        this.tl = gsap.timeline({
            onStart: () => {
                gsap.set(this.DOM.el, {zIndex: 1});
            },
            onComplete: () => {
                gsap.set(this.DOM.reveal, {opacity: 0});
            }
        })
        .to(this.DOM.revealInner, 1.8, {
            ease: 'Power3.easeOut',
            scale: 0.3,
            opacity: 0
        })
        .to(this.DOM.revealImage, 1.8, {
            ease: 'Power3.easeOut',
            scale: 1.7
        }, 0);
    }

createTimeline() {
        // init timeline
        this.tl = gsap.timeline({
            paused: true,
            onStart: () => {
                this.DOM.circleInner.style.filter = `url(${this.filterId}`;
            },
            onUpdate: () => {
                this.DOM.feTurbulence.setAttribute('baseFrequency', this.primitiveValues.turbulence);
            },
            onComplete: () => {
                this.DOM.circleInner.style.filter = 'none';
            }
        })
        .to(this.primitiveValues, { 
            duration: 0.4,
            startAt: {turbulence: 0.09},
            turbulence: 0
        });
    }

constructor(el) {
        this.DOM = {el: el};
        this.DOM.el.style.opacity = 0;
        
        this.bounds = this.DOM.el.getBoundingClientRect();
        
        this.renderedStyles = {
            tx: {previous: 0, current: 0, amt: 0.2},
            ty: {previous: 0, current: 0, amt: 0.2},
            scale: {previous: 1, current: 1, amt: 0.15},
            //opacity: {previous: 1, current: 1, amt: 0.1}
        };

        this.onMouseMoveEv = () => {
            this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2;
            this.renderedStyles.ty.previous = this.renderedStyles.ty.previous = mouse.y - this.bounds.height/2;
            gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1});
            requestAnimationFrame(() => this.render());
            window.removeEventListener('mousemove', this.onMouseMoveEv);
        };
        window.addEventListener('mousemove', this.onMouseMoveEv);
    }

leave() {
        this.emit('leave');
        this.state.hover = false;
        this.DOM.el.classList.remove('button--hover');
        document.body.classList.remove('active');

        gsap.killTweensOf(this.DOM.filler);
        gsap.killTweensOf(this.DOM.textinner);
        
        gsap
        .timeline()
        .to(this.DOM.filler, 0.4, {
            ease: 'Power3.easeOut',
            y: '-75%'
        })
        .to(this.DOM.textinner, 0.1, {
            ease: 'Power3.easeOut',
            opacity: 0, 
            y: '10%'
        }, 0)
        .to(this.DOM.textinner, 0.25, {
            ease: 'Power3.easeOut',
            opacity: 1, 
            startAt: {y: '-30%', opacity: 1}, 
            y: '0%'
        }, 0.1);
    }

createTimeline() {
        // init timeline
        this.tl = gsap.timeline({
            paused: true,
            onStart: () => {
                this.DOM.circleInner.style.filter = `url(${this.filterId}`;
            },
            onUpdate: () => {
                this.DOM.feTurbulence.setAttribute('baseFrequency', this.primitiveValues.turbulence);
            },
            onComplete: () => {
                this.DOM.circleInner.style.filter = 'none';
            }
        })
        .to(this.primitiveValues, { 
            duration: 0.4,
            startAt: {turbulence: 0.09},
            turbulence: 0
        });
    }

createTimeline() {
        // init timeline
        this.tl = gsap.timeline({
            paused: true,
            onStart: () => {
                if ( this.options.animation.line ) {
                    this.DOM.line.style.filter = `url(${this.filterId}`; 
                }
                if ( this.options.animation.text ) {
                    this.DOM.text.style.filter = `url(${this.filterId}`;
                }
            },
            onComplete: () => {
                if ( this.options.animation.line ) {
                    this.DOM.line.style.filter = 'none';
                }
                if ( this.options.animation.text ) {
                    this.DOM.text.style.filter = 'none'
                }
            }
        });
    }

slide() {
        gsap
        .timeline()
        .set(this.DOM.el, {transformOrigin: '50% 0%'})
        .to(this.DOM.el, {
            duration: 0.2,
            scaleY: 0
        })
        .set(this.DOM.el, {transformOrigin: '50% 100%'})
        .add(() => this.DOM.el.classList[this.isCurrent ? 'add' : 'remove']('frame__nav-item--current'))
        .to(this.DOM.el, {
            duration: 0.5,
            ease: 'Expo.easeOut',
            scaleY: 1
        }, '+=0.2');
    }

constructor(el) {
        this.DOM = {el: el};
        this.DOM.el.style.opacity = 0;
        
        this.bounds = this.DOM.el.getBoundingClientRect();
        
        this.renderedStyles = {
            tx: {previous: 0, current: 0, amt: 0.2},
            ty: {previous: 0, current: 0, amt: 0.2}
        };

        this.onMouseMoveEv = () => {
            this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2;
            this.renderedStyles.ty.previous = this.renderedStyles.ty.previous = mouse.y - this.bounds.height/2;
            gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1});
            requestAnimationFrame(() => this.render());
            window.removeEventListener('mousemove', this.onMouseMoveEv);
        };
        window.addEventListener('mousemove', this.onMouseMoveEv);
    }

enter() {
        this.emit('enter');
        this.state.hover = true;

        this.DOM.el.classList.add('button--hover');
        document.body.classList.add('active');
        
        gsap.killTweensOf(document.body);
        gsap.killTweensOf(this.DOM.textinner);

        gsap
        .timeline()
        .to(document.body, 0.2, {backgroundColor: '#000'})
        .to(this.DOM.textinner, 0.1, {
            ease: 'Power3.easeOut',
            opacity: 0, 
            y: '-10%'
        }, 0)
        .to(this.DOM.textinner, 0.2, {
            ease: 'Expo.easeOut',
            opacity: 1, 
            startAt: {y: '20%'}, 
            y: '0%'
        });
    }

// Initial animation to scale up and fade in the items
    showItems() {
        gsap
        .timeline()
        .set(this.items, {scale: pos => this.gridItems[pos].invertMovement ? 0.2 : 0.6, opacity: 0}, 0)
        .to(this.items, {
            duration: 2,
            ease: 'Expo.easeOut',
            scale: pos => this.gridItems[pos].invertMovement ? 0.5 : 1,
            stagger: {amount: 0.6, grid: 'auto', from: 'center'}
        }, 0)
        .to(this.items, {
            duration: 2,
            ease: 'Power1.easeOut',
            opacity: pos => this.gridItems[pos].invertMovement ? 0.3 : 0.9,
            stagger: {amount: 0.6, grid: 'auto', from: 'center'}
        }, 0);
    }

layout() {
        // Hide main title and subtitle
        gsap.set(this.DOM.titleBlock, {y: '100%'});
        gsap.set(this.DOM.subtitleBlock, {y: '100%'});

        const bodyComputedStyle = getComputedStyle(document.body);

        // Get the image settings from the variables set in the stylesheet
        let imageSettings = {
            imageWidthStart: winsize.width,
            imageHeightStart: parseFloat(bodyComputedStyle.getPropertyValue('--image-height-start')),
            imageWidthEnd: parseFloat(bodyComputedStyle.getPropertyValue('--image-width-end')),
            imageHeightEnd: parseFloat(bodyComputedStyle.getPropertyValue('--image-height-end')),
            metaOffset: parseFloat(bodyComputedStyle.getPropertyValue('--meta-offset'))
        };

        // Set the scale value from the initial and the target dimensions
        // and move the intro image wrap to the center of the screen.
        // We want to set the full width image to be the size of a thumbnail.
        // For that we scale down the outer wrapper and set a counter scale to
        // the inner image, followed by another scale so that the inner image
        // becomes the size of the thumbnail, too.
        let introRect = this.DOM.intro.getBoundingClientRect();
        let introTransform = {
            scaleX: imageSettings.imageWidthEnd / imageSettings.imageWidthStart,
            scaleY: imageSettings.imageHeightEnd / imageSettings.imageHeightStart,
            y: (winsize.height/2 - introRect.top) - introRect.height/2
        };
        gsap.set(this.DOM.intro, {
            y: introTransform.y,
            scaleX: introTransform.scaleX,
            scaleY: introTransform.scaleY
        });

        // Apply the counter scale and again the target dimension scale to the inner image
        gsap.set(this.DOM.introImg, {
            scaleX: 1/introTransform.scaleX * imageSettings.imageWidthEnd / this.DOM.introImg.clientWidth,
            scaleY: 1/introTransform.scaleY * imageSettings.imageHeightEnd / this.DOM.introImg.clientHeight
        });

        // Calculate new sizes/positions (after transform)
        introRect = this.DOM.intro.getBoundingClientRect();
        // content__meta size/position
        const metaRect = this.DOM.meta.getBoundingClientRect();
        let metaTransform = {
            x: introRect.left - metaRect.left,
            y: introRect.top - metaRect.top
        };
        gsap.set(this.DOM.meta, {
            x: metaTransform.x,
            y: metaTransform.y - imageSettings.metaOffset
        });

        // Show the meta title element
        gsap.set(this.DOM.metaTitle, {opacity: 1});
    }

timeline = gsap.timeline({paused: true})
    .addLabel('start')
    // Stagger the animation of the home section chars
    .staggerTo( DOM.content.home.chars, timelineSettings.charsDuration, {
        ease: 'Power3.easeIn',
        y: '-100%',
        opacity: 0
    }, timelineSettings.staggerValue, 'start')
    // Here we do the switch
    // We need to toggle the current class for the content sections
    .addLabel('switchtime')
    .add( () => {
        DOM.content.home.section.classList.toggle('content__item--current');
        DOM.content.about.section.classList.toggle('content__item--current');
    })
    // Change the body's background color
    .to(document.body, {
        duration: 0.8,
        ease: 'Power1.easeInOut',
        backgroundColor: '#c3b996'
    }, 'switchtime-=timelineSettings.charsDuration/4')
    // Start values for the about section elements that will animate in
    .set(DOM.content.about.chars, {
        y: '100%'
    }, 'switchtime')
    .set(DOM.content.about.picture, {
        y: '40%',
        rotation: -4,
        opacity: 0
    }, 'switchtime')
    // Stagger the animation of the about section chars
    .staggerTo( DOM.content.about.chars, timelineSettings.charsDuration, {
        ease: 'Power3.easeOut',
        y: '0%'
    }, timelineSettings.staggerValue, 'switchtime')
    // Finally, animate the picture in
    .to( DOM.content.about.picture, 0.8, {
        ease: 'Power3.easeOut',
        y: '0%',
        opacity: 1,
        rotation: 0
    }, 'switchtime+=0.6')

onClickIntro() {
        // For demo purposes, remove the click event once clicked
        // We are just showcasing the effect
        // In a real case scenario there would be a back to slideshow button and the click event wouldn't need to be removed
        this.DOM.intro.removeEventListener('click', this.onClickIntroFn);
        this.config.isThumbView = false;
        
        // Animate all the elements (image, title, subtitle, meta)
        gsap
        .timeline({
            onStart: () => this.emit('start'),
            onComplete: () => this.emit('end')
        })
        .to(this.DOM.intro, {
            duration: 1,
            ease: 'expo.inOut',
            y: 0,
            scaleX: 1,
            scaleY: 1,
            onComplete: () => {
                this.DOM.contentEl.classList.add('content--scroll');
                this.emit('scrollready');
            }
        })
        .to(this.DOM.introImg, {
            duration: 1,
            ease: 'expo.inOut',
            scaleX: 1,
            scaleY: 1
        }, 0)
        .to(this.DOM.introImgWrap, {
            duration: 1,
            ease: 'expo.inOut',
            scale: 1
        }, 0)
        .to(this.DOM.metaTitle, {
            duration: 0.6,
            ease: 'expo.inOut',
            opacity: 0
        }, 0)
        .to(this.DOM.meta, {
            duration: 1,
            ease: 'expo.inOut',
            x: 0,
            y: 0
        }, 0)
        .to([this.DOM.titleBlock, this.DOM.subtitleBlock], {
            duration: 0.8,
            ease: 'expo',
            startAt: {rotation: 3},
            y: '0%',
            rotation: 0,
            stagger: 0.3
        }, 0.7);
    }

gsap.registerPlugin(ScrollTrigger);

init() {
    gsap.registerPlugin(Draggable);
    this.renderOptionsForm();
  }

gsap.registerPlugin(ScrollTrigger);

// translate the item as the mouse moves
    render() {
        this.requestId = undefined;

        if ( this.firstRAFCycle ) {
            // calculate position/sizes the first time
            this.calcBounds();
        }
        // calculate the mouse distance (current vs previous cycle)
        const mouseDistanceX = clamp(Math.abs(mousePosCache.x - mousepos.x), 0, 100);
        // direction where the mouse is moving
        direction = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y};
        // updated cache values
        mousePosCache = {x: mousepos.x, y: mousepos.y};

        // new translation values
        this.animatableProperties.tx.current = Math.abs(mousepos.x - this.bounds.el.left) - this.bounds.reveal.width/2;
        this.animatableProperties.ty.current = Math.abs(mousepos.y - this.bounds.el.top) - this.bounds.reveal.height/2;
        // new skew value
        this.animatableProperties.skew.current = this.firstRAFCycle ? 0 : map(mouseDistanceX,0,80,0,direction.x < 0 ? 60 : -60);
        // new filter value
        this.animatableProperties.contrast.current = this.firstRAFCycle ? 1 : map(mouseDistanceX,0,100,1,10);

        // set up the interpolated values
        // for the first cycle, both the interpolated values need to be the same so there's no "lerped" animation between the previous and current state
        this.animatableProperties.tx.previous = this.firstRAFCycle ? this.animatableProperties.tx.current : lerp(this.animatableProperties.tx.previous, this.animatableProperties.tx.current, this.animatableProperties.tx.amt);
        this.animatableProperties.ty.previous = this.firstRAFCycle ? this.animatableProperties.ty.current : lerp(this.animatableProperties.ty.previous, this.animatableProperties.ty.current, this.animatableProperties.ty.amt);
        this.animatableProperties.skew.previous = this.firstRAFCycle ? this.animatableProperties.skew.current : lerp(this.animatableProperties.skew.previous, this.animatableProperties.skew.current, this.animatableProperties.skew.amt);
        this.animatableProperties.contrast.previous = this.firstRAFCycle ? this.animatableProperties.contrast.current : lerp(this.animatableProperties.contrast.previous, this.animatableProperties.contrast.current, this.animatableProperties.contrast.amt);
        
        // set styles
        gsap.set(this.DOM.reveal, {
            x: this.animatableProperties.tx.previous,
            y: this.animatableProperties.ty.previous,
            skewX: this.animatableProperties.skew.previous,
            skewY: this.animatableProperties.skew.previous/10,
            filter: `contrast(${this.animatableProperties.contrast.previous})`
        });

        // loop
        this.firstRAFCycle = false;
        this.loopRender();
    }