GSAP full animation layout

The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See “Why GSAP?”.

You need to impress the client with eye-catching animations that perform well on every device, or maybe you’re building a sophisticated UI that calls for buttery-smooth draggable elements that flick and glide naturally to precise locations you define. You’re not looking for a simplistic jQuery plugin that was slapped together in someone’s free time – you need professional-grade, reliable tools.

Thanks to GSAP : https://greensock.com/

I have done the GSAP animation for this single page, the about button on the menu have that trigger point of on-click animation.

• When we click about menu the plant move to the left side of the screen, the STORY was change as HISTORY by adding “hi” text in front of the word. then the underline and sub title have moved to left under the new title.
• Then second set of animation is auto loaded by the delay function the right side number type will fade out and the title & subtitle will be fade out smoothly.
• The screen will be the empty and the about us page contents will be loaded in one by one with the smooth animation using GSAP animation JS.
• The short title and description will be fade in on the empty page then next followed by that section the 2 set of question and answer section will be fade in.
• Then the right corner two images will be load in one by one. This is the first set of animation i have done in this single page animation layout.
• Followed by this animation process the second set of animation is based on that right side two images.
• When i click the first image, then all of the content and images will be fade out. The first image will move to the left corner with using of “x:-500” and enlarge the image size by using of “width:200%”. Followed by that animation the heading and the description will be fade in from the down side using “fromTo” animation.
• Again the animation for the image clicking was reversed by clicking the same image type. This is the animation i used for both the images.
• Finally i have done the reverse animation for the about menu clicking process. This is the process i have done in this page and the file of this animation i have ached below.