TIM+

Le mandat

TIM+ est un nouveau programme de notre département : en participant à des activités en dehors des cours, les étudiants accumulent des points et peuvent obtenir la certification PLUS+, une mention officielle ajoutée à leur DEC. Encore fallait-il qu'ils comprennent comment ça fonctionne, et qu'ils aient envie d'embarquer.

La page vit dans le TIM HUB, le site du département. Elle devait tout expliquer en un seul défilement (le principe, les étapes, les activités, les paliers, la cérémonie) et rester assez vivante pour qu'un étudiant de 18 ans se rende jusqu'en bas.

Une vidéo pour le lancement

Pour le lancement du programme, à l'automne 2025, on a aussi monté une courte vidéo de présentation, diffusée sur la chaîne YouTube du département. Elle reprend l'identité de la page : le violet, la croix jaune et verte, et le slogan « Engage-toi dans la réussite ».

Lire la vidéo « TIM+ »

Une page, sept sections

Plutôt qu'un règlement à lire, la page raconte le programme dans l'ordre où un étudiant se pose les questions : c'est quoi, comment ça marche, qu'est-ce que je peux faire, qu'est-ce que ça me donne, où j'en suis, et à quoi ça sert après.

Le fonctionnement, lui, tient en cinq étapes numérotées : s'inscrire, participer, gagner des points, les cumuler tout au long des études, puis obtenir la certification à 500 points.

Chaque section a sa couleur (noir, violet, vert, jaune) pour que le passage de l'une à l'autre se sente au défilement, même sur téléphone.

Six types d'activités

Pour accumuler des points, les étudiants choisissent parmi six blocs d'activités : la réussite académique, l'enrichissement disciplinaire, les activités socioculturelles, l'engagement étudiant, les saines habitudes de vie, et l'engagement social et environnemental. Chaque bloc a un nom accrocheur (Objectif Réussite, Boost créatif, Vie TIM à fond…), quelques exemples concrets et un maximum de points.

Ce plafond oblige à varier : on ne devient pas certifié en ne faisant qu'une seule sorte d'activité. Les cartes présentent donc les six blocs côte à côte, pour qu'un étudiant voie d'un coup d'œil où il peut encore aller chercher des points.

Les cartes réagissent à la souris : elles s'inclinent légèrement vers le curseur et reviennent en place avec un petit rebond. Un détail, mais il donne envie de les survoler une à une, donc de les lire.

Des animations déclarées dans le HTML

Le thème réutilise l'architecture de mes projets WordPress : des classes regroupées par webpack, et une fabrique qui instancie la bonne classe pour chaque élément portant un attribut data-component. Ici, quatre composants suffisent : Scroller, Animator, CardThreeD et ListExpend.

Animator lit le type d'animation dans un attribut data-anim (letterReveal, rotate, scale, flipChilds, scaleChilds) et prépare deux tweens GSAP, une entrée et une sortie. Un IntersectionObserver les déclenche quand l'élément entre ou sort de l'écran. Pour animer un nouvel élément, on ajoute deux attributs dans le gabarit, sans toucher au JavaScript.

Scroller, lui, installe ScrollSmoother pour un défilement adouci et pilote les effets liés à la position : les lignes du titre d'accueil, découpées par SplitText, glissent en sens opposés à mesure qu'on descend.

export default class Animator {
  constructor(element) {
    this.element = element;
    this.anim = {};
    document.fonts.ready.then(() => this.init());
  }

  init() {
    // data-anim="flipChilds" → this.initFlipChilds()
    this[`init${capitalize(this.element.dataset.anim)}`]();
    new IntersectionObserver(([entry]) => {
      entry.isIntersecting ? this.anim.in.restart() : this.anim.out.restart();
    }).observe(this.element);
  }

  initFlipChilds() {
    const items = this.element.children;
    gsap.set(items, { transformOrigin: 'top', rotationX: 90, autoAlpha: 0, y: 200 });
    this.anim.in = gsap.to(items, {
      rotationX: 0, autoAlpha: 1, y: 0,
      duration: 1.5, stagger: 0.2, ease: 'expo.out', paused: true,
    });
    this.anim.out = gsap.to(items, { rotationX: 90, autoAlpha: 0, duration: 0, paused: true });
  }
}

Trois paliers, trois badges

Pour rendre la progression concrète, chaque palier a son badge : Initié.e à 200 points, Ambassadeur.drice à 350, Certifié.e TIM+ à 500. Les pastilles, avec leurs autocollants, s'inclinent vers la souris comme les cartes des blocs.

Un classement pour jouer le jeu

Le cœur ludique de la page, c'est le classement. Les points des étudiants sont récupérés de la plateforme du cégep, puis affichés sous forme de palmarès : le rang, les points et le statut atteint, avec une date de dernière mise à jour. Le premier porte l'autocollant du chat ULTIM.

Seuls les cinq premiers sont visibles au départ ; le bouton « Voir le top 30 » déplie le reste de la liste. À l'entrée à l'écran, les rangées basculent une à une comme des cartes qu'on retourne.

Sur cette page, les noms des étudiants sont floutés.

Sur téléphone

Sur téléphone, les sections s'empilent, les étapes et les cartes passent en une colonne, et le classement garde l'essentiel : le rang, le nom et les points.

Crédits

Client

Département TIM, Cégep Édouard-Montpetit

Design

Caroline Duplantis

Programmation

Matthieu Parent

Montage vidéo

Caroline Duplantis

Captures réalisées sur le site en ligne. Photographies et logos : propriété de leurs auteurs et de Département TIM, Cégep Édouard-Montpetit.