search

pcl-labs / whynot.earth

Why Not Earth is a marketing agency with a philanthropic streak. Besides providing world-class digital development, tech training, and AI-based marketing campaigns for our clients, we also donate these services in support of social and environmental NGOs around the world. Why Not Earth does the tech that helps you make Earth a better place to live.
https://whynot.earth
GNU Affero General Public License v3.0
8 stars 4 forks source link

Add banner to site #27

Closed paulchrisluke closed 4 years ago

paulchrisluke commented 5 years ago

We want to add banners with an animated egg falling into the site to add interactivity with site visitors image

The egg asset should be animated falling through banner (falling controlled by scroll speed) as you scroll down the page and crack when it hits the bottom.

Reference for placement here: image This banner is the first on in this image

The lower banner will be our universal footer, tasked out in #38 .

Design file here for reference: https://www.figma.com/file/M3U8SfOgvNiPkRHPBooBtcGQ/Why-Not-Earth?node-id=482%3A196

paulchrisluke commented 5 years ago

We may want to do a lottie animation for this or parralax... I wonder what is best? @mort3za ? @atharva3010

mort3za commented 5 years ago

Parallax effect can't be used alone I think, because the egg needs to be cracked and not just move. This medium article has a sample of doing such animations by lottie, TweenMax and scrollMagic: https://uxplanet.org/the-ultimate-workflow-of-creating-scroll-based-animations-7366b670630