GSAP Website Layout animation from scratch in Reactjs
GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.
GSAP Top to bottom Layout Animation
Here, we set fixed size container (width:100%,height:0,top:0,left:0,bottom:0)
.png "top to bottom layout animation css")
.png "top to bottom layout animation css")
1. Using useRef() accessing Layout container.
2. Create gsap timeline().
3. Now animate our container
set height:100% and duration:1.3
Now again Call gsap timeline to animate our container
set duration 1 and top:100% with 0.3delay
What output here you got
while start your react project container move from top to bottom so initial height 0 to 100% and after 0.3delay again container move from top to bottom with top:100%
.png "GSAP to to bottom layout animate in reactjs")
GSAP bottom to top Layout Animation
.png "bottom to top layout animation css")
.png "animation bottom to top layout")
.png "bottom to top layout animation css")
.png "animation bottom to top layout")
GSAP left to right Layout Animation
.png "left to right layout animation GSAP")
.png "Animation Layout left to right in GSAP")
.png "left to right layout animation GSAP")
.png "Animation Layout left to right in GSAP")
GSAP right to left Layout Animation
.png "right to left layout animation GSAP")
.png "right to left layout animation css")