Footer animation

Design help Animations & Interactions
1

How to create footer animations like this? Loom | Free Screen & Video Recording Software | Loom

Here is my public share link: LINK
(how to access public share link)

2

Hi @Chathus_Abisheka ,
This is a good question.

The animations on this page vary and are probably consisting of different methods. Let’s try to break these down:

  1. “Keep exploring” arrow - Fade in animation on Page load trigger. The animation is applied to the element itself, so it is the trigger and the animated element.
  2. Black circle growth - Scale up animation on a Scroll into view trigger.
  3. Black circle shrink - Scale down animation on a Scroll out of view trigger.
  • For both 2&3 you can create a big shape, in the background of the footer element. Put this shape in a DIV with overflow:hidden and width + height of the entire screen. Once the footer is scrolled into view, scale this shape so it covers all the screen.
  1. ‘MENU’ & ‘NEXT’ Letters - Wrap each word in a span. Now you can add the letters fade in and movement to the same animation timeline of the circle animation, only with a bit of delay.

Generally, animations and interactions are complex. The best way to get better is to try and try and try new things. Don’t be afraid to explore and break things.

1 Like
3

Thanks for your help. Now it works!!!