Тёмный

GSAP tutorial en ESPAÑOL 👈👈 Cómo crear ANIMACIONES para TÚ PAGINA WEB 🎁🚀 

Black Wolf
Подписаться 705
Просмотров 12 тыс.
50% 1

En este tutorial aprenderás a hacer ANIMACIÓNES SUPER FACIL para la web 🤩 usando la librería de GSAP
📚 Recursos del video:
⭐ El CDN para acceder a la librería de GSAP:
👉👉 src="cdnjs.cloudflare.com/ajax/lib..."
⚠️ Solo tienes que agregarlo en una etiquetas 👉 script
🎁 Toda la SINTAXIS que podemos utilizar con GSAP
⚠️ Recuerda que en GSAP podemos utilizar CUALQUIER PROPIEDAD de CSS:
----------------------------------------------
GSAP CSS
-----------------------------------------------
x: 100 transform: translateX(100px)
y: 100 transform: translateY(100px)
rotation: 360 transform: rotate(360deg)
rotationX: 360 transform: rotateX(360deg)
rotationY: 360 transform: rotateY(360deg)
skewX: 45 transform: skewX(45deg)
skewY: 45 transform: skewY(45deg)
scale: 2 transform: scale(2, 2)
scaleX: 2 transform: scaleX(2)
scaleY: 2 transform: scaleY(2)
xPercent: -50 transform: translateX(-50%)
yPercent: -50 transform: translateY(-50%)

Опубликовано:

 

2 май 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 55   
@blackwolf8778
@blackwolf8778 3 года назад
Gracias por ver el video 🤩 SUSCRIETE si te gustó o sirvió la información ✔️ Cualquier duda déjamela en los cometarios 👇 LIKE para darle la personalidad a la animación 👉👉 greensock.com/ease-visualizer El CDN (para copiar y pegar) 👉👉 LIKE de donde sacar el CDN: 👉👉greensock.com/docs/v3/Installation#CDN
@FluxelCode
@FluxelCode Год назад
Buenas me gustaria saber de una animacion en especifico, y segun se hace con esta libreria sera que podrias ayudarme?
@analorenzo3081
@analorenzo3081 2 года назад
Muy buen contenido loco, gracias !!✨✨
@bryanquintero833
@bryanquintero833 2 года назад
muy buen tutorial basico, espero y sigas montando muchos más tutoriales de animaciones como esta ✌
@darksmostt4257
@darksmostt4257 2 года назад
Wou, me encanta como explicas jaja, muy bueno. Gracias.
@paoladarias9863
@paoladarias9863 2 года назад
Excelente video! Tus explicaciones son muy buenas. Seguire viendo más de este tema.
@borislopez4515
@borislopez4515 2 года назад
Me suscribo porque busque mucho esto y ningun tutorial lo explicaban a detalle y tu si y ya me dio el resultado y salio bien muchas gracias
@vladimirlopez6005
@vladimirlopez6005 2 года назад
Muchas gracias !! bien explicado!
@arvidjimenez2252
@arvidjimenez2252 2 года назад
excelente video espero mas videos de estos saludos
@franklinrodriguez1950
@franklinrodriguez1950 Месяц назад
Animo bro gracias por tu aporte me enseñaste mucho
@danielislas5599
@danielislas5599 3 года назад
A seguir trabajando .. Vikingo saludos y bendiciones
@humbertorivero5009
@humbertorivero5009 2 года назад
Genial, muchas gracias
@Estherdigital7
@Estherdigital7 2 года назад
Me encanto! sigue con mass
@wolve7724
@wolve7724 Год назад
broo muchisimas gracias por tu explicacion, se nota que estas nervioso pero la neta te la rifaste.
@jhontobon4918
@jhontobon4918 6 месяцев назад
qué excelente video, qué gran detalle de tu parte compartir este conocimiento 🤙🤙🙌🙌
@doroaros
@doroaros 2 года назад
Excelente video brother! Como te comentan es algo muy de nicho y saber usar esta librería es algo para distinguirse como front-end. Éxitos y sigue así!
@justcode7908
@justcode7908 2 года назад
Casi no hay videos de GSAP. F de Felicitaciones Black Wolf
@douglasortega8377
@douglasortega8377 5 месяцев назад
Muy interesante Bro. Gracias!
@nelsoncalderon1267
@nelsoncalderon1267 3 года назад
muy buenas parcero muy bueno tu video me ayudo mucho, no sabia por donde empezar e entender el uso de Gsap muchas gracias
@Ktalesun
@Ktalesun 2 года назад
Muchas gracias bro! ♥️, le tenía un poco de miedo a esta Liberia pero no pensé que fuese así de simple...
@leenh123
@leenh123 Год назад
Likeado, suscrito y esperando 😎🤩
@kevindiazromero4469
@kevindiazromero4469 2 года назад
Exelente video =-D, animaciones con js y propiedades de css junto ahora todo mucho mas facil, MAQUINA sube mas videos de gsap existe muy poco material en español de esa libreria en youtube, buen video gracias =-D
@user-dv3tu3gs5k
@user-dv3tu3gs5k 2 года назад
Muy buen video!
@hernangodoy8239
@hernangodoy8239 8 месяцев назад
Muy bueno amigo! me gusto la opinión personal al final del video, saludos desde la Tierra.
@arturomonzon6814
@arturomonzon6814 Год назад
Excelenete video y excelente explicación
@juansebastiangonzalezsossa801
Parce muy teso, gracias por la explicación
@mundoinformatico3426
@mundoinformatico3426 11 месяцев назад
2023 y tus videos son los mas explicativos que encontre
@guillermodanielmazzarigiov1768
@guillermodanielmazzarigiov1768 2 года назад
Bro está genial! Te recomiendo seguir con gsap, hay muy pocos Buenos tutoriales de esta librería
@Ariel-dg1bk
@Ariel-dg1bk 2 года назад
Muy buen contenido
@dearalex2056
@dearalex2056 2 года назад
Videazo man, saludos desde Nicaragua!
@yennymelissatorobonilla8236
Gracias!!
@devenm4918
@devenm4918 10 месяцев назад
Buen video
@camilo.s2237
@camilo.s2237 Год назад
Excelente video... ya me suscribí!
@blackwolf8778
@blackwolf8778 Год назад
Gracias bro 🤩
@angeldr5011
@angeldr5011 2 года назад
Excelente video bro. Muy bien explicado.
@blackwolf8778
@blackwolf8778 2 года назад
Que bueno que le entendiste bro, eso es lo importante 😁
@renesandoval3938
@renesandoval3938 2 года назад
Gracias Black Wolf! gracias por compartir el conocimiento
@blackwolf8778
@blackwolf8778 2 года назад
Con gusto Rene Sandoval 😁
@emmanuelareizaperez5332
@emmanuelareizaperez5332 2 года назад
Muchísimas gracias UFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
@mikeyfizovich1671
@mikeyfizovich1671 3 года назад
Quería empezar con Gsap y esta guía queda a pelo y mejor en español sigue así brooo!
@blackwolf8778
@blackwolf8778 3 года назад
Que bueno bro que esta humilde guía te sirvió 🤩👍
@joselugodupont9286
@joselugodupont9286 9 месяцев назад
Una pregunta, es conveniente colocar el script por fuera de body porque siempre lo e evisto dentro de la etiqueta
@zinedinejeanpierreeriqueto3795
@zinedinejeanpierreeriqueto3795 2 года назад
Mi lindo lobito XD, la licencia es por proyecto o por usuario ? Osea si yo pago la sub anual puedo crear muchos proyectos ya que tenga esa licencia O solo la suscripción es para un solo proyecto
@cristianjuarez1086
@cristianjuarez1086 Год назад
me acabo de topar con tu canal y por lo pronto esta bien, pero te sugeriria que cuides los volumenes de los efectos y trates de hacer varias tomas para poder editarlas mejor, se que es mas trabajo pero la verdad lo vale
@isrra243
@isrra243 3 года назад
Hola beto! 🥳🥳🥳
@blackwolf8778
@blackwolf8778 3 года назад
Hola 👋
@rodrigomoreno107
@rodrigomoreno107 2 года назад
La verdad que sin palabras muy groso. Espero mas videos tuyos genio, saludos desde Argentina
@manulatt
@manulatt 2 года назад
Buenas tardes! muy bueno. He logrado disparar las animaciones desde un boton dentro de una function. Pero sólo corren una sola vez. ¿Cómo puedo lograr que casa vez que uso el boton la animación reinicie? Muchas gracias!
@blackwolf8778
@blackwolf8778 2 года назад
Buenas noches Manu Latt, para solucionar eso GSAP nos provee unos métodos que nos ayudan a pausar, iniciar, resumir, resetear etc. EJEMPLO: var miVariable= gsap.to(".cuadro", { duration: 4, x: 750, rotation: 360, ease: "none", paused: true }); miVariable.play(); miVariable.pause(); miVariable.resume(); miVariable.reverse(); miVariable.restart(); En la documentación hay un ejemplo mejor JAJAJA XD greensock.com/get-started/ Esta en la sección: Demostración: Métodos básicos de control
@manulatt
@manulatt 2 года назад
@@blackwolf8778 muchas gracias por responder!!
@gonzalojosepalomo1842
@gonzalojosepalomo1842 Год назад
Un millón por el tutorial. Sin embargo estoy teniendo un error. Me fui a la pagina de geesock use sus cdn y aparte tambien use el que dejaste en el comentario. Pero cuando voy al file .js y coloco el gsap.cualquier metodo. En la consola me arroja que gsap no esta definida. Lo intento por npm y tampoco me funciono. Crees que tengas algúna forma de apoyarme????
@blackwolf8778
@blackwolf8778 Год назад
Hola bro, creo que lo que te esta dando el error es porque el cdn de GSAP esta abajo que el de tu .JS Ejemplo
@gonzalojosepalomo1842
@gonzalojosepalomo1842 Год назад
@@blackwolf8778 Si. Ahí encontré ese detalle. Y si, estuve leyendo y exactamente el error era el cdn. Y por lo que veo es con todos los cdn de gsap. Gracias broth!
@camiloloaiza3680
@camiloloaiza3680 2 года назад
cual recomienda mas gsap o three.js?
@blackwolf8778
@blackwolf8778 2 года назад
La verdad bro no he utilizado la librería three.js, pero gsap nos ofrece la oportunidad de probar su librería contra otras, con una prueba de rendimiento Like de la prueba de rendimiento: greensock.com/js/speed.html?&_rid=90559
Далее
Introducing ScrollTrigger for GSAP
21:43
Просмотров 247 тыс.
Super sport🤯
00:15
Просмотров 11 млн
Выходи искать ЛТС-85
00:55
Просмотров 49 тыс.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Loading Page With SVG Animation Using CSS & GSAP
8:22
Creating Sick Page Transitions with Barba.js & GSAP
20:05
Learn GSAP In 23 Minutes
23:22
Просмотров 193 тыс.