Morphing botón de reproducción de vídeo con GSAP

Vista prévia

Descripción

Hace uso de la biblioteca < a href = "https://greensock.com/tweenmax" target = "_ blank" rel = "noopener" > TweenMax. js de GSAP para transformar un botón de reproducción en un reproductor de vídeo al hacer clic.

Funcionamiento

Inserte un video (e.x. video de YouTube) junto con un botón de reproducción en la página.

<div class="play-backdrop"></div>
<div class="play-button">

<svg class="play-circles" viewBox="0 0 152 152">


<circle class="play-circle-01" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="343" cx="76" cy="76" r="72.7"/>


<circle class="play-circle-02" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="309" cx="76" cy="76" r="65.5"/>

</svg>

<div class="play-perspective">


<button class="play-close"></button>


<div class="play-triangle">



<div class="play-video">




<iframe width="600" height="400" src="https://www.youtube.com/embed/HPohkBemDVM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>



</div>


</div>

</div>
</div>

El CSS necesario para el estilo del botón de reproducción.

.play-button {

width: 152px;

height: 152px;

position: relative;

cursor: pointer;
}

.play-backdrop {

width: 100%;

height: 100%;

position: fixed;

left: 0;

top: 0;

background-color: #000;

opacity: 0;

visibility: hidden;
}

.play-close {

width: 30px;

height: 30px;

position: absolute;

right: 0;

bottom: calc(100% + 15px);

border: none;

outline: none;

background: none;

opacity: 0;

cursor: pointer;
}

.play-close::before,
.play-close::after {

content: "";

display: block;

width: 100%;

height: 1px;

position: absolute;

top: 50%;

left: 0;

-webkit-transform: rotate(45deg);





transform: rotate(45deg);

background-color: #fff;
}

.play-close::after {

-webkit-transform: rotate(-45deg);





transform: rotate(-45deg);
}

.play-circles {

display: block;

width: 100%;

height: 100%;
}

.play-perspective {

width: 600px;

height: 400px;

position: absolute;

left: -230px;

top: -125px;
}

.play-triangle {

width: 600px;

height: 400px;

background-color: #fff;

cursor: pointer;
}

Cargue la versión más reciente de la biblioteca TweenMax. js en la página.

<script src='/path/to/TweenMax.min.js'></script>

El principal JavaScript para transformar el botón de reproducción en un reproductor de YouTube.

TweenMax.set(".play-circle-01", {

rotation: 90,

transformOrigin: "center"
})

TweenMax.set(".play-circle-02", {

rotation: -90,

transformOrigin: "center"
})

TweenMax.set(".play-perspective", {

xPercent: 6.5,

scale: .175,

transformOrigin: "center",

perspective: 1
})

TweenMax.set(".play-video", {

visibility: "hidden",

opacity: 0,
})

TweenMax.set(".play-triangle", {

transformOrigin: "left center",

transformStyle: "preserve-3d",

rotationY: 10,

scaleX: 2
})

const rotateTL = new TimelineMax({ paused: true })

.to(".play-circle-01", .7, {


opacity: .1,


rotation: '+=360',


strokeDasharray: 456,


ease: Power1.easeInOut

}, 0)

.to(".play-circle-02", .7, {


opacity: .1,


rotation: '-=360',


strokeDasharray: 411,


ease: Power1.easeInOut

}, 0)

const openTL = new TimelineMax({ paused: true })

.to(".play-backdrop", 1, {


opacity: .95,


visibility: "visible",


ease: Power2.easeInOut

}, 0)

.to(".play-close", 1, {


opacity: 1,


ease: Power2.easeInOut

}, 0)

.to(".play-perspective", 1, {


xPercent: 0,


scale: 1,


ease: Power2.easeInOut

}, 0)

.to(".play-triangle", 1, {


scaleX: 1,


ease: ExpoScaleEase.config(2, 1, Power2.easeInOut)

}, 0)

.to(".play-triangle", 1, {


rotationY: 0,


ease: ExpoScaleEase.config(10, .01, Power2.easeInOut)

}, 0)

.to(".play-video", 1, {


visibility: "visible",


opacity: 1

}, .5)


const button = document.querySelector(".play-button")
const backdrop = document.querySelector(".play-backdrop")
const close = document.querySelector(".play-close")

button.addEventListener("mouseover", () => rotateTL.play())
button.addEventListener("mouseleave", () => rotateTL.reverse())
button.addEventListener("click", () => openTL.play())
backdrop.addEventListener("click", () => openTL.reverse())
close.addEventListener("click", e => {

e.stopPropagation()

openTL.reverse()
})