Portfolio by Mehsana Aisha Kaudeer

Introduction to animation

mehsanakaudeer — 2025-08-13 12:25:17 UTC

Animation is not just a drawing, it is a series of still images shown fast to create motion.

2d Animation is flat, focuses on the characters and backgrounds.
Persistence of vision helps us see motion in still frames.
Early tools : flipbooks, thaumatrope, phenakistoscope, zoetrope.
First films : “Humorous Phases of Funny Faces” (1906), “Fantasmagorie” (1908).

Reflection

mehsanakaudeer — 2025-08-13 14:22:57 UTC

From the first session, I learned that animation started as simple toys and drawings, but the idea of creating movement from still images is the same today. I understood the difference between 2D and 3D animation and how early tools like flipbooks, zoetropes, and the thaumatrope helped develop the field. I also realized that persistence of vision is what makes animation work. Overall, i learned that animation takes patience, creativity and attention to detail.

It usually includes:

mehsanakaudeer — 2025-08-20 06:47:47 UTC

Text

Images/ Graphic
Audio
Video
Animation
Multimedia makes information more engaging, interactive, and easier to understand.

Multimedia

mehsanakaudeer — 2026-01-21 08:57:03 UTC

is the use of more than one type of media together to communicate information.

Importance of multimedia in today's digital world

mehsanakaudeer — 2026-01-21 09:02:38 UTC

Multimedia is important because:

Makes learning more interesting and visual
Helps explain complex ideas easily
Used in education, advertising, entertainment and business

12 Principles of Animation?

mehsanakaudeer — 2026-01-21 09:09:39 UTC

They were developed by Disney animators to make animation look more realistic, smooth and appealing.

The main principles include:

Squash and Stretch
Anticipation
Staging
Straight Ahead & Pose to Pose
Follow Through & Overlapping Action
Slow In & Slow Out
Arcs
Secondary Action
Timing
Exaggeration
Solid Drawing
Appeal

Ease Visualizer

mehsanakaudeer — 2026-01-25 13:07:44 UTC

TWEEN

mehsanakaudeer — 2026-01-25 13:10:26 UTC

gsap.to('ul', {duration : 0.7, x: 40, ease: "bounce.out"})

-stagger: 0.3
-it move like a stair then: gsap.to('ul li', {duration : 0.7, x: 40, ease: "bounce.out", stagger: 0.3})

.fromTo and set Tween

mehsanakaudeer — 2026-01-25 13:20:01 UTC

gsap.fromTo('header', {x: -40}, {x: 40, repeat: 2, duration:1,ease:'power2.inOut', yoyo: true})
-swings from left to right

gsap.set - doesn't do animation , it just move it somewhere

Timeline

mehsanakaudeer — 2026-01-25 13:27:47 UTC

Setting up a timeline is more flexible

Define timeline at the top of the page

- const timeline = gsap.timeline()

chain the tweens to the timeline

Controls and Callbacks

mehsanakaudeer — 2026-01-25 13:28:29 UTC

Create buttons to play, const playButton = document.getElementById('btnPlay')4

timeline.play()

*.pause()

the naming is straightforward

Greensock Snippets

mehsanakaudeer — 2026-01-25 13:28:45 UTC

gsap without importing will try to auto complete , so we need to import gsap

- gsap.t will give u suggestions

Install greensock snippet to expand it

ScrollTrigger Basics

mehsanakaudeer — 2026-01-25 13:30:00 UTC

need to include scrollTrigger pluggin , then go to js to initaitae the pluggin

gsap. keeps auto correcting , then use terminal . type
npm i gsap , it will bring the node pakage and remove the annoying completions
gsap.registerPlugin(scrollTrigger)

toggleClass

mehsanakaudeer — 2026-01-25 13:30:12 UTC

Create simple gsap set tween

gsap.set('#project02, {scrollTrigger: {
trigger: '#project02',
start: ' top bottom',
end: 'bottom center',#toggleClass: 'active' ,
markers: true
}})
Adjust the fading transition

Simple parallax effect

mehsanakaudeer — 2026-01-25 13:30:34 UTC

.bcg-parallax {

padding: 150px 0;

color: #fff;

background-color: #000;

text-align: center;

position: relative;

overflow: hidden;

const parallaxTl = gsap.timeline ({
ease: 'none',
scrollTrigger: { trigger: '.bcgparallax',
start: 'top bottom',
scrub: true
}
});
parallaxTl
.from('.content-wrapper', {duration: 0.4, autoAlpha: 0})
.from('bcg', {duration: 2, y: '-30%'}, 0);

Fade the text and move background image: make the animation smooth by changing the durations.

enabled the parallax section in the html, bcg(background) applied to this empty div tags

Simple pin effect

mehsanakaudeer — 2026-01-25 13:30:44 UTC

Simple pinning effect , hides the text and pins the logo when user scroll away.

gsap.to(['#intro h1, intro p'], {
autoAlpha: 0,
ease: 'none',
scrollTrigger: {
trigger: '#intro .content',
start: 'top top+=5%',
pin: true,
scrub: true,
markers: true
}});

Created a simple tween , only 2 element are fading while pinning an element on the page.

Toggle Actions

mehsanakaudeer — 2026-01-25 13:30:55 UTC

Make a tween for each projects

create simple .from tween

targetting when the top of the image hit bottom.

Callback functions

mehsanakaudeer — 2026-01-25 13:31:09 UTC

can tap into callback function and know whether tweens are in progress or not
- onUpdate: (self) => console.log(self.progress)
- onToggle: () => console.log('toggle')
- onEnter: () => console.log('onEnter')
- onLeave: () => console.log('onLeave')
- onEnterBack: () => console.log('onEnterBack')

mehsanakaudeer — 2026-01-25 18:41:31 UTC