GSAP animations for Oultiant website

Loader Menu Blocks 1 Blocks 2 (There are others to implement on scroll)

• Research: See some examples and implementation
• Prepare the assets (svg needs customizing)
• Prepare GSAP animations
• Integration into React project
• Integration into React Outliant project

• Edit the svg adding different paths
• Give styles
• Animate with GSAP
• Integration into React

This site was built using GitHub Pages.

• Animating React Components With GreenSock
• React-gsap docs
• GSAP + React, First Steps & Handy Techniques
• Hook a Lottie animation up to ScrollTrigger
• How to use the GSAP ScrollTrigger plugin in React
• GSAP Cheetsheet

For the loader, to do it perfect I would need special plugins from GSAP. The video animation uses special animations features such as svg Drawing and Morphing, for this, GSAP has what they call The Club Greenshock where you can access these plugins. I think commercial license is 90$ per year (see https://greensock.com/licensing/ )

By now I would do two versions, with/without plugin

• Block1 (index.php) - https://codesandbox.io/s/block1-jxbigs
• Block2 (performance) - https://codesandbox.io/s/block2-g8xcmy
• Loader (without plugin) - https://codesandbox.io/s/loader-noplugin-i5bvrx
• Loader (with plugin) - https://codesandbox.io/s/loader-withplugins-sq8o01

These are the four animations shown yesterday:

• Let´s Collab - https://codesandbox.io/s/scrolltrigger-lets-collab-toggleactions-h80in8
• Our work - desktop - https://codesandbox.io/s/our-work-on-scroll-mb4o00
• Our work - mobile - https://codesandbox.io/s/mobile-onscroll-1e9wxk
• Limitless creation - https://codesandbox.io/s/limitless-creation-onscroll-kb5jsz

For “Our Desktop” animations I resized the media files as follows:

• Desktop 576x1070px
• Tablet 371x831px
• Mobile 340x2103px

I have made several trials with anyconv, optimage.app and tinypng.com I upload a screenshot of images sizes (original, compressed to webp and what we are using now). For “Our work” animation, I did not include the texts (Real Estate - Swift - Beauty Agency), I can add them if needed.

I am masking this images using: clip-path inset You can see at the css files.

For mobile I have to use a .png as it has some transparency

In the demo files I am using scrollTrigger to trigger the animations once the user sees them on scroll view (we don´t want them to play out of viewport). Also if a user scrolls up and goes down again, the animation will begin again. Animations are now looping, timing and sequencing can be easily changed.

• Menu Radial Scroll Bar Interaction
• 404