# data[].attributes.body
is the use of more than one type of media together to communicate information.

# data[].attributes.body
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).

# data[].attributes.body
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.

# data[].attributes.body
Text

Images/ Graphic

Audio

Video

Animation

Multimedia makes information more engaging, interactive, and easier to understand.

# data[].attributes.headline
Importance of multimedia in today's digital world

# data[].attributes.subject
Importance of multimedia in today's digital world

# data[].attributes.body
Multimedia is important because:

Makes learning more interesting and visual

Helps explain complex ideas easily

Used in education, advertising, entertainment and business

# data[].attributes.body
They were developed by Disney animators to make animation look more realistic, smooth and appealing.

The main principles include:

1. Squash and Stretch

2. Anticipation

3. Staging

4. Straight Ahead & Pose to Pose

5. Follow Through & Overlapping Action

6. Slow In & Slow Out

7. Arcs

8. Secondary Action

9. Timing

10. Exaggeration

11. Solid Drawing

12. Appeal

# data[].attributes.body
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})

# data[].attributes.body
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

# data[].attributes.body
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

# data[].attributes.body
Create buttons to play, const playButton = document.getElementById('btnPlay')4

timeline.play()

*.pause()

the naming is straightforward

# data[].attributes.body
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

# data[].attributes.body
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)

# data[].attributes.body
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

# data[].attributes.body
.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

# data[].attributes.body
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.

# data[].attributes.body
Make a tween for each projects

create simple .from tween

targetting when the top of the image hit bottom.

# data[].attributes.body
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')