• SolutionsWeb, Mobile, Windows, iOS
  • Technologies

    CSS3, Drupal, HTML5, JavaScript, UI/UX


Stemkfas is an Arabic e-learning catalog storing free educational games categorized according to grade and course. A user plays + studies online in fields of maths, physics, chemistry, etc. Experts state that such a mix is the most potent way to deliver knowledge to our children.

Stemkfas catalog called for a website, which corresponds with an amusing atmosphere of gamification in education. We were ready to develop ? lovely design with engaging navigation, including SVG, CSS, and JS animations. Keeping in mind Drupal 8 for the backend and HTML 5, CSS, JavaScript for the frontend, we started the project.

Since the client requested lavish interaction and entertainment, we got to launch gifted custom animations, fast navigation, and responsive design as an organic whole. To arrange animated work seamlessly – that was the challenge.

Project Duration

6 months

Team Composition

PM -1

Developers – 2

Testing & QA – 2


Painting ingenious images were just a half (and a really important half) of the deal. Our illustrators coped with it smartly. The other part of the workflow, tech background and basis, made our developers seize each other by the hands.

Using Drupal 8 for backend and HTML 5, CSS, Javascript for Frontend, we applied SVG, CSS, and JS animations.

At the top of the home page 12 islands, one for each grade, are parallaxing in the web space. We took the best from Parallax.js and Velocity.js libraries, knitting heavily animated elements together, so web page elements rigorously react to the lesser mouse moves.

You scroll down and see pleasing relevant images for each course. They contain few tricks to amuse school-age users. Following a sudden insight, we added, for instance, a the Newton’s swing for physics and the magnifying glass for biology. Can there be more fun for children than to craft art freely by themselves?

On the left hand, there’s the navigation circle. Looks cool and allows well-coordinated switching between categories. However, if we look behind the scenes, we can detect a comprehensive logic implemented into circling.

The client requested a circular navigation and our team decided to repose on the expert’s article. Fulfilling this feature on the original website, our JavaScript developer did the hard math to calculate proper algorithms. Our specialist accomplished the task as a tough pro: the round rolls right away with no flaws and holds.

The theme is completely responsive.

Once you shoot a glance at the front page on your phone or tablet, the animations are still performing sweetly – just compressed in a line.

Barba.js helped us a lot to build a fast system, binding front page with each category of the game storage. We completed our goal for top possible fastness fitting flawlessly both desktop and mobile screens.

The website may appear in two fully applicable versions: English and Arabic, depending on user’s preferences.


Our Development

We are experts in many other advanced technologies, languages, and web development tools that can push your PHP-powered solution even further. Tell us what you’re aiming for, and we will help choose the best technology and talent for your goals.


Implemented features

  • Icon CheckedCircular navigation
  • Icon CheckedInteractive images
  • Icon Checked Built-in apps
  • Cta-block-image

    Ready to start on your development or testing project? We are!

    Get in Touch


    We applied robust animations, making maximum use of cutting-edge Drupal features.

    Our master-level at multiple JavaScript libraries was the main reason to choose and build up the right support for our coding. Despite the actual tech difficulty, we launched a heavily animated website as a fast and firmly tied unit. Interactive images and built-in apps (i.e. painting board) involve schoolchildren into action, offering swift access to a handy catalog of educational games.

    Cute visual appeal combined with rapidness ends in a decent e-learning website, and it’s a key factor of success for the project.


    Satisfaction rate


    Conversion of mobile app


    Bounce rate decrease

    Planning the budget for your project? Spend 5 minutes to get an estimate!

    Choose a project-based estimate or quickly calculate how much it would cost to hire a dedicated team.

    Start Here