Yo! Halloween 🎃 is the Yo! Season 1 finale where I cover gruesome design news, dev tricks, freebies, laughs and more: Watch Yo!
(Naughty) illustration filled One Pager for the Goa Kite Flying Festival that happens to be today. The site is a touch buggy but the fun animations are impressive as your scroll down and definitely unique. Cheers for the detailed build notes…
While building Kaipoche.co we wanted to create a festive, moving experience that captured the spirit of kite flying. Here is a summary of the technologies used, problems encountered and overcome:
Parallax scrolling animations and transitions were achieved using Superscrollorama.
The speed and easing of the animations were controlled using Greensock's TweenMax with the overall timeline controlled by TimeLineLite.
The kites and the people flying them were animated using SVG SMIL animation.
Difficulties were in getting the animations in the windows to place right in different screen sizes. For the hover effects to work on them, they had to be in divs different to that containing the illustration of the front row of houses. And since the positioning and sizes of all the elements are done in percentages, getting them in the right positions was tricky.
Due to compatibility issues in different browsers, different code was written for different browsers, with changes in CSS properties and the timeline sequencing.