Flutter UX Challenge: Animated Social Proof Panel For Website Folio
For a designer website, the social proof needs to be in the home screen via animated information panels. One of the ideal ways is to implement an alignment animation that is triggered via website user scrolling.
Let me show you a very quick and easy way to implement this UX pattern in Flutter.
The Example UX
The GSkinner Folio site has info panels in the home screen that animate the left text header from top left to bottom left upon user scrolling:
Things that are involved in implementing this are:
-registering scroll controller with a listener in the shared scaffold
-using stack to stack a header above and background image
-using methods of Scroll Controller to detect when viewport has pixels
with the information panel to trigger the animation
-animated alignment widget to change alignment of text header
