Featured

Creative Landing Page Design with Animation Using HTML, CSS, ANIME JS, Text Animation | Lettering js



Published
#landingpage #textanimation #animejs #letteringjs #fadeanimation #cssanimation

Hello friends, In this video I'm creating a creative landing page design with animation using html, css, and anime js animation. lettering js(wrap each word of a element in a span tag), anime js(animation library), fade in image effect, fade in left effect.

► PLEASE SUBSCRIBE TO THIS CHANNEL FOR MORE VIDEOS
https://youtube.com/learndesigntutorial
--------------------------------------------------------------------------------------------------
0:08 - Preview(Profile card ui design)
0:50 - Figma design file
1:25 - visit cdn js and copy link
10:38 - wrap each letter in span(lettering js)
11:48 - create & use timeline(anime js)
--------------------------------------------------------------------------------------------------

► FRONT-END USEFUL VIDEOS
Show hide text on click using HTML, CSS & JQUERY | Expand & Collapse Text | Jquery Toggle Class
https://youtu.be/oNGxAhAfmSw

How to add animation on scroll using html, css and aos js tutorial
https://youtu.be/Va2WYxerwzQ

Awesome text distortion effects using blotter js | Learn Design Tutorial
https://youtu.be/bicuOTTUyUg

Awesome navbar design with hover effect using html and css tutorial
https://youtu.be/kEshtvn1D5E

How to create custom scrollbar style using only css | HTML & CSS Tutorial
https://youtu.be/wOCuGNVYJ_E

How to create javascript carousel slider without dependency | Html, Css, Javascript Tutorial
https://youtu.be/XzVuXrG5fYA

How to make draggable elements in jquery UI | Living room design with light on,off
https://youtu.be/8vs-SF2UWy4

How to create Neomorphism UI Design with calculator app using javascript
https://youtu.be/8clmGiduHRQ

Digital Clock UI Design with Animation Using HTML, CSS, JQUERY
https://youtu.be/v-VIyam_9DE

How to Transform a navigation bar into a search form using jquery
https://youtu.be/ysRNbJkBMnQ

Online music streaming small website using html,css And javascript
https://youtu.be/kWSXcRUmnt4

How to make tab layout design using HTML, CSS & Bootstrap
https://youtu.be/gEzvF2Dtl8Q

Easy fancy border radius animation HTML and CSS Tutorial
https://youtu.be/t5ZIHPCPD-M

Custom animated cursor using GSAP(Greensock) and jquery
https://youtu.be/RMH1rRap3jc

How to open bootstrap popup model after few seconds when website load using jquery
https://youtu.be/LB6siEBkCjg

Banner layout design with hover effect using html, css, jquery
https://youtu.be/zx0GyOPW4Uo

Interactive menu animation using Html,CSS & JQuery Greensock
https://youtu.be/G5cm4oz0XL8

#1 Portfolio home design with darkmode and greensock animation
https://youtu.be/dg6t9fqjiKg

Menu hover effect using jquery mouseover and mouseout
https://youtu.be/Z-IL4lYo8VE

Lettering animation using GSAP(Greensock 3) and lettering js
https://youtu.be/uPMkuqqDYPY

Profile card slider ui design using html, css and jquery slick slider
https://youtu.be/W_Aq2rYXi8k

New card style profile ui design with animation only html and css
https://youtu.be/UIFiklfek3o

How to make loading animation using html and css
https://youtu.be/2RsGa-a8p40

Traveler porfolio website with slider using html,css and jquery
https://youtu.be/ilKWYbfCK2U

Awesome menu hover effect with change background image using jquery mouseover
https://youtu.be/YuQMbwflHrQ

Background clip text hover effect and outline text using html and css3
https://youtu.be/zsOuonS4BDo

Typewriter effects using html, css, jquery typewriter js
https://youtu.be/JX8Om2hThJ4

► ANIMATION VIDEO
How to create custom loader | Website loading animation using html,css and jquery tutorial
https://youtu.be/nmIFfEYT4kg

Pure CSS FadeIn FadeOut Animation - CSS Property #01
https://youtu.be/tbqyCwoH_-k

Pure CSS Bouncing Ball Animation #02
https://youtu.be/eMIrV9fVZ3Y

Square to Circle Rotate Loading Animation with Multiple Colors #03
https://youtu.be/YE70iFa4NA0

Pure CSS Three Dots Loading Animation #04
https://youtu.be/aglMDLGeXnc

Pure CSS Jumping Dots Loading Animation #05
https://youtu.be/qjCcbWZ7dDU

Pure CSS Ripple Loading Animation Effect #06
https://youtu.be/stTCr1v_TJA

Pure CSS Simple Loader Animation Effect #07
https://youtu.be/hLUA76S0ntI

Pure CSS Egg Crash Animation Effect 08
https://youtu.be/M9gcoXknDew

Pure CSS Flip Page Animation Effects 09
https://youtu.be/f9iWadJp9a0

Pure CSS Flip & Rotate Loading Text Animation Effect 10
https://youtu.be/MF0oMODWjz0

► LOADER ANIMATION
3 Cool CSS Loading Animation Effects | Pure CSS Animation Effects | HTML & CSS Animation Tutorial
https://youtu.be/t3XIzixgxnU

--------------------------------------------------------------------------------------------------
Cdnjs : https://www.cdnjs.com
Anime js: https://animejs.com
Lettering js : http://letteringjs.com
Email : [email protected]
For support : https://www.patreon.com/helplearndesign
Buy me a coffee: https://www.buymeacoffee.com/learndesign
Category
Web design
Be the first to comment