La meilleure animation de texte au scroll (à mettre sur tout vos sites)

[@tutos-front-end]

Pour ceux qui veulent le code 😉 : codepen.io/front-end-fr/pen/GRLwgQd

[@garycookies9709]

Salut, Je te découvre à peine et franchement je te remercie! Tes exemples sont clairs, ta voix est bien calée et tout parait assez simple quand on te voit faire! Tu gagnes un abonné et j'attends avec impatience ta vidéo sur Lenis! Continues comme ça, c'est du très très bon boulot!

[@tutos-front-end]

Merci pour tes encouragements ça fait plaisir et bienvenue :)

[@berlenskyy]

🔥

[@matthieukoromarketing]

Le fait de splitter le texte ne pose pas de problème de référencement ?

[@tutos-front-end]

La question est très pertinente, mais non. La plupart des moteurs analysent le code HTML avant que le JS ne passe. C'est d'ailleurs pour ça que coder un site avec React pose des problèmes au niveau du référencement. Par contre il faut faire attention que notre contenu soit bien visible avant l'exécution de JS, il ne faudrait pas mettre le texte en invisible dès le départ en CSS par exemple. C'est pour ça que j'utilise "gsap.from" plutôt que "gsap.to". Si j'avais utilisé "gsap.to" j'aurais du cacher le texte dans un premier temps pour lui donner ensuite la valeur d'arriver (en blanc). La je fais l'inverse, si mon script est lancé, il va cacher le texte en partant de cette valeur que je donne dans "gsap.from". C'est une chose à toujours prendre en compte quand on réalise des effets visuels, penser que si JS n'est pas activé, mon contenu doit être accessible 😉

[@staif75]

Hello ! super vidéo merci, mais est ce que la longueur du texte joue? Je crois que mon paragraphe est trop court (ou alors c'est le body) car l'effet ne s'applique pas jusqu'à la fin de mon texte.

[@tutos-front-end]

Oui dans la vidéo à 9:55 je l'explique et je montre comment résoudre le problème 😉 C'est normal si tu n'as pas d'élément en dessous, soit il y en aura, soit tu peux faire comme je le montre en jouant sur la propriété "end"

[@staif75]

@@tutos-front-end Oops 😬 merci , je manque de concentration parfois 🙄. Problème résolu en tout cas !

[@tutos-front-end]

Ahah ! Content d'avoir pu aider 😉

[@myfreedom42]

c'est marrant j'ai code cette anim moi meme cette aprem, a part gsap, je ne comrpends pas l'interet du splitter, c pas du tout opti puisque ça fait les lettres ET les mots, hors on veux soit l'un soit l'autre, jamais les deux. J'ai fait mon propre split avec un sur les mots et une sur les lettres ça prend 10 lignes, je vois pas trop l'utilite de ce truc... Par contre le scrollsmother, ça je vais pouvoir l'ajouter et c'est top ! merci ;) +1 abonné

[@tutos-front-end]

Splitter me permet de gagner du temps si je suis sur un site pour un client sans trop alourdir. Evidemment il sera plus utiles si j'utilise plus de fonctionnalités de cet librairie que je n'ai fait dans le tuto. C'est donc la deuxième raison, pour simplifier le "tuto" 😉 Merci à toi pour ton commentaire en tout cas et bienvenue 😉

[@TheNSproject]

bonjour 😊 je vous ai découvert ce matin grave à votre video sur Figma et il était parfait! merci beaucoup pour votre contenu ! j'aimerais vous poser qque questions, faites vous des consultations ? j'aimerai avoir vos conseils, je souhaite savoir comment faire pour rendre mes projets figma en site internet d'une manière la plus simple. j'ai appris le coding avec le langage Java et JavaScript. j'avoue que je veux éviter de coder...

[@tutos-front-end]

Bonjour et merci pour ce retour 😊 C'est une question qui revient souvent sur ma chaine ou sur ma formation Figma. Comment transformer sa maquette Figma en vrai site web sans avoir à coder obligatoirement. Je prévois donc de sortir des formations sur le sujet ainsi que des vidéos sur la chaine. Donc pour répondre en avant première je dirais Framer ou Webflow (il y a wix studio que j'ai touché un peu mais j'attends de voir pour donner un avis et pourquoi pas en faire des vidéos) Framer se rapproche beaucoup de Figma, les utilisateurs habitué à Figma s'y retrouve très vite. Pour des sites plus complexes Framer montrera quelques limites et Webflow sera plus intéressant et plus complet mais légèrement plus complexe à appréhender (ce qui est normal puisqu'il permet plus de choses). Dans les 2 cas l'intégration d'une maquette Figma est assez simple à mettre en œuvre. J'espère vous avoir éclairé 😉

[@ludovicvasseur9278]

super video merci.... je suppose qu'on peut utiliser cela avec react

[@tutos-front-end]

Oui bien sur, notamment avec le hook useGSAP() 😉

[@andytrutsh]

merci !

[@tutos-front-end]

De rien 😊