This 3D Text Animation is SICK

Подписаться 1,1 млн

Просмотров 32 тыс.

50% 1

bit.ly/3KgWRtA 👈 Learn UI/UX & CSS Today. Use "UI2023" for 23% Off!
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, in this new series I'm calling "Recreate THIS", I'm going to show you how to create a really cool title animation sequence I discovered on this site: www.shabaniddrisu.com/ -- It involves HTML, CSS, JavaScript (GSAP and Split-text-js).
Let's get started!
#javascript #gsap #css
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Хобби

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

20 фев 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 61

@DesignCourse Год назад

Having fun with different formats for presenting tutorials.

@susmitadey6735 Год назад

I tried to do the same in VS code by using separate files and linking them but it's not working.

@opa8012 7 месяцев назад

how do i make that but on on hover?

@stefanallchorne8667 Год назад

This is incredible. Easily the best format for short videos like this. Made it soo easy to follow along. Great work!

@beratsulimani9823 Год назад

This format of presentation is on another level, thanks

@JediHan Год назад

I love this new video format! Short and simple with a couple of image animation for the preview purpose.

@Like_a_lion_744 Год назад

So cool. Useful, short videos which can be applied - i'm loving it!

@crust5532 Год назад

Loved this format so much 🔥🔥. Hope to see more of this.❤️

@peternicholson26 Год назад

really enjoying this format mate. I think as a learning tool, this is a very effective method. Really takes people through it stage by stage and feels engaging too

@77dp22 Год назад

I love this short format!!!❤

@kyleadamsdrums Год назад

Oh man this is a great tutorial approach. Keep them coming like this.

@The_clipp Год назад

I love your videos man💚💚

@rahulkumargautam3358 Год назад

It looks great 🔥🔥

@theMadZakuPilot Год назад

great video. I like the new format

@sweethomes674 2 месяца назад

Excellent explanations and techniques 😊

@MishraXE Год назад

This was amazing 😍😍

@eliasenglen3882 Год назад

Very nice video!!! thank you very much

@kushagradarji925 5 месяцев назад

Can someone please share the full code that is running properly pleaseee

@zaydessaidi4768 3 месяца назад

hayek gekke video wollah soldaat

@sayeghjoe Год назад

Looks awesome! Thanks Gary. Did you make a codepen for this too?

@HuynhLuong227 Год назад

big thanks, look awesome

@pickitupgolf276 Год назад

Any way to do this with React? I've tried, but can't seem to get the SplitText part to work

@InverserPro Год назад

Thank u, nice effect. But how much size gsap lib?..

@kareem2928 Год назад

Awesome

@souravjob1 Год назад

getting complication error in new SplitTextJS(abc). is there any thing to import ??

@nutnut4868 5 месяцев назад

What's the font used here plz?

@user-vj7gs1je9s 3 месяца назад

When trying to make an endless loop with const tl = gsap.timeline({ repeat: -1 }); we have a problem with the latest animation that ends in empty/pause before restarting, any solutions for this ? ;)

@teuccio73 Год назад

wow!

@bestapps4709 Год назад

I am using cellphone to programming so I need a zip file to reference the files ZSAP or Spli text if possible, do you have any idea how to use it without install nothing ?

@prayashparida2465 Год назад

Can someone tell me how to use gsap in react?

@amindusaputhanthri Год назад

Hyperlaxed style ❤️

@dirtygeisha3120 Год назад

First thing I thought about

@guidsz Месяц назад

my code isnt working can someone help me? i think i lost my self in chapter 6

@MrDocomox Год назад

Cool

@dgy_are Год назад

Hi Mr. awesome , would u explain how to let them repeat the animation for unlimited time , ur fun from morocco . Best Love .

@sayeghjoe Год назад

const tl = gsap.timeline({ repeat: -1 });

@sayeghjoe Год назад

I got this working. Does anyone want me to make a codepen for this?

@pickitupgolf276 Год назад

Yes, because I can seem to import GSAP fine, but can't get SplitText to work, I'm trying to use it in a React project.

@goodnessdavid6583 Год назад

Where is the codepen for it?

@user-vr9ob2rq8v 3 месяца назад

split text js is not work, gsap didnt get values, show more detail whats goind on, its annoying

@saikatJanaYT Год назад

You don't need gsap or split-text for this 5 line js code effect.

@DesignCourse Год назад

Duh. But since when is a project just an intro animation? If you have this animation worked in on a real project, you're obviously going to be utilizing it elsewhere to the point at which it would not make sense to do everything the vanilla route.

@dynamohack Год назад

hyperflexed video style copied

@djoo110 Год назад

split-text-js is not free :) :) :) :)

@8arva Год назад

broo it is

@blender1188 Месяц назад

It’s not the gsap version. This one is free.

@antonyromeo6523 Год назад

What is best way to make profits from crypto trading

@avneet12284 Год назад

Didn't like this format. GSAP animation didn't make sense to me.

@DesignCourse Год назад

I have a free GSAP 3 course, do a channel search.

@avneet12284 Год назад

@@DesignCourse I know gsap basics - no pro though. How's it even visible though? It's going from 0 opacity to 0 opacity. Am I missing something?

@DesignCourse Год назад

@@avneet12284 because the methods used after .from and .to

@avneet12284 Год назад

@@DesignCourse There were no methods after .from and .to. That's where the video ends unless you mean the loop's nth iteration. 🤔

@brent. 5 месяцев назад

This tutorial sucks so bad I raged too hard when he just wouldn't explain wtf the gsap and stuff was and also where to literally type the JS. Cool animations and all but worthless tutorial.

@shivamsharma-jm7xb 8 месяцев назад

Sir, i m trying to add to it infinite repetition of this effect but after the final , the loop comes back abruptly to the first child.Here is the code import React, { useEffect } from "react"; import "./Hero.css"; import gsap from "gsap"; import SplitTextJS from "split-text-js"; export default function Hero() { useEffect(() => { const titles = gsap.utils.toArray(".text-wrapper p"); const tlx = gsap.timeline({ repeat: -1, repeatDelay: 0.1 }); titles.forEach((title) => { const splitTitle = new SplitTextJS(title); tlx.from( splitTitle.chars, { opacity: 0, y: 80, rotateX: -90, stagger: 0.02, }, "

@0kJaymie 7 месяцев назад

Did you ever figure it out?

@pushpakjangela1524 Год назад

want more video in gsap 🥹🥹

@xcrap Год назад

When trying to make an endless loop with const tl = gsap.timeline({ repeat: -1 }); we have a problem with the latest animation that ends in empty/pause before restarting, any solutions for this ? ;)