Semaine 5 - Légendes d'automne
Description
Section intitulée « Description »Vous devez, à l’aide de vos connaissances en Nextjs, CSS/JS et GSAP, raconter une courte légende / anecdote / fable / un fait divers (réels ou fictifs) d’une durée minimale de 15 secondes en une seule séquence d’animation.
- La séquence devra être découpée en composantes à l’image des exercices des cours 4 et 5.
- Elle devra mélanger des séquences animées conventionnelles en fonction du temps (comme au cours 4) et des animations par défilement (scrub). Au moins une timeline est requise. Pas de partie loading.
- Les médias utilisés doivent être entièrement créés par vous. Il est aussi possible de générer des médias par AI génératif, mais votre application devra cependant le mentionner.
- En panne d’inspiration? Utilisez une des fables d’Ésope (tome 1 et tome 2) (en partie ou en entier).
- L’histoire ne pourra pas être uniquement présentée sous forme de texte. Trois à cinq moments hautement visuels distincts (action, transformation, déplacement, apparition, changement de décor, etc.) sont requis. L’animation doit demeurer compréhensible sans explication de votre part.
- L’expérience doit former une séquence continue : les différents moments de l’histoire doivent s’enchaîner visuellement. Il ne faut pas créer une succession de pages ou de diapositives.
- Vous ne pouvez pas prendre les exercices des cours 04 et 05 et les modifier. Démarrez d’un nouveau projet.
- L’une des librairies suivantes de GSAP devra également être utilisée: MorphSVG, DrawSVG ou MotionPath.
- Vous pouvez absolument éplucher le web à la recherche d’inspirations à reproduire ou desquelles vous inspirer: Awwwards, Dribbble, GSAP Showcase, etc…
Liste de vérification
Section intitulée « Liste de vérification »La séquence est découpée en composantes. On y retrouve des séquence animées par le temps (sans scroll). On y retrouve des séquence animées par défilement. L’histoire compte 3 à 5 moments hautement visuels. Les segments de l’histoire se situent tous sur la même page (même url). Au moins l’une de ces librairies a été utilisée au moins une fois (MorphSVG, DrawSVG ou MotionPath). Si du AI génératif a été utilisé pour le visuel, l’utilisateur en a été informé. Le fichier page.jsx n’a pas été converti en composante client. Au besoin une composante client a été insérée entre page.jsx et les composantes de l’histoire ( /scroll/page.jsxdans l’exercice du cours 05).À la remise, un fichier mentionnant les sources (le visuel et l’histoire s’il y a lieu) a été inclus au .zip du projet.
Par Teams, au début du cours 7
Critères d’évaluation
Section intitulée « Critères d’évaluation »| Contrôle de l’animation | Clarté du code et respect des contraintes | Mise en scène et créativité de l’animation | Clarté et originalité du traitement narratif |
|---|---|---|---|
| Est-ce maîtrisé techniquement? | Est-ce bien construit? | Est-ce visuellement intéressant et inventif? | Est-ce que ça raconte efficacement quelque chose, à sa manière? |
| 20 pts | 20 pts | 30 pts | 30 pts |