In late 2023, I returned to higher education as a part-time Visual Design & Animation instructor at Istituto Marangoni Dubai. This role marks my return to teaching, which began at the Faculty of Fine Arts at Damascus University.
Teaching has always been my most rewarding professional experience. I do take pride in my approach to student engagement, which often involves gamifying the learning process to make complex subjects just another challenge to be cracked.
Ingredients of a 3D Render
I had a reputation for creating fully animated presentations that seems to sync seamlessly with my lectures. My curriculum covers everything from an Introduction to 3D, the basics of modern workflows, to visualizing core concepts used across multiple software and pipelines, such as alpha channels, luma channels, and the science of how digital images are rendered.
What is an Alpha channel
What are color channels
When teaching animation, especially to foundation students with no prior knowledge of creative tools, educators often face a dilemma.
The traditional route involves hand-crafted, frame-by-frame drawings on paper. While fundamental, this process is slow and lacks the "instant replay" gratification that modern students are used to, making it intimidating for beginners.
The digital alternative like Adobe Photoshop or Adobe Animate can be also overwhelming. I noticed students getting stuck on 'learning the tool' rather than 'learning the movement'.
I needed a way to remove the friction, the only good option was an iPad app like Procreate, its fantastic for early experiments. However, it creates a hardware barrier, I cannot expect every student to own an iPad and purchase paid software just to learn the basics.
I needed a solution that allowed students to bypass the steep learning curve of software and jump straight into the concepts of Timing and Spacing.
My goal was to create a bespoke web experience that was completely device-agnostic, capable of running smoothly on a laptop, a tablet, or a smartphone directly in the browser.
The design philosophy was "straight to animation" I decided to remove the burden of drawing entirely. By providing a pre-drawn character inside a canvas, I could force the students to focus purely on the movement.
Essentially, I wanted to rebuild the intuitive workflow of Procreate’s "Animation Assist," but stripped of all complex drawing tools.
To bring this vision to life, I turned to Rive. I needed a character that was expressive yet lightweight enough to load instantly on the web.
By building a custom interactive rig in Rive, I was able to define specific State Machines for the character's movement. Unlike a static video or a heavy 3D render, Rive allowed the character to remain manipulatable in real-time.
I then integrated this rig into a custom web interface that handles the logic of a timeline.
Note on interaction: I initially explored adding a layer of interactivity where the monster would track the user's mouse cursor. While technically interesting, I realized this feature would be lost on touch devices, so I pivoted to focus on touch-friendly gesture controls instead, but kept it here in my website as fun easter egg of sorts.
The final tool is a responsive web application with fully rigged "Eye Monster" for the student's to play with. It features an intuitive timeline that mimics professional software, allowing users to add, delete, and duplicate frames with ease.
To ensure it served as a genuine learning tool, I implemented essental animation features:
Onion Skinning: The most critical feature for learning "Spacing." By overlaying a semi-transparent version of the previous frame, students can visually track the arc of their movement and adjust the gaps between frames to control acceleration and deceleration.
Playback Modes: Options for Loop, One-Shot, and Ping-Pong playback.
Touch Gestures: Intuitive controls such as pinch-to-squash and two-finger rotate.
This tool removes the "fear of the blank canvas," giving students a sandbox to experiment with animation spacing and key poses, before they ever open professional software.
