css-challenges
CSS challenge 13: GSAP voor gevorderden
ποΈ βΈΊ Dinsdag 20 mei
β° βΈΊ 9:30 - ca 11:30 uur
Oefening 1: π Starten met mouse events π
π βΈΊ π¦π¦π₯
Opdracht: animeer .cursor zodat het element de muis volgt.
https://github.com/user-attachments/assets/ab5bb6b5-bc54-4072-9172-3d44a8373d82
π©π»βπ» βΈΊ
Code voor jou
(CodePen)
π©π»βπ» βΈΊ
Uitwerking
(CodePen)
niet meteen spieken π«£
Oefening 2: π Reactieve custom cursors π
π βΈΊ π¦π₯π₯
Opdracht: animeer .cursor op basis van waar je overheen hovert.
https://github.com/user-attachments/assets/91c88797-c276-4495-89f7-54fb0b1a2436
In de event parameter staat een stuk meer informatie dan alleen de clientX en clientY. Ooit gehoord van target bijvoorbeeld?
Kom je er niet uit?
Log eens wat er in e.target zit (console.log(e.target) in de event listener functie). Wat als we willen weten over wat voor element we heen hoveren, kunnen we dat opvragen vanuit e.target? (Spoiler: JA dat kan!)
π©π»βπ» βΈΊ
Code voor jou
(CodePen)
π©π»βπ» βΈΊ
Uitwerking
(CodePen)
niet meteen spieken π«£
Oefening 3: ποΈ Image trails intro ποΈ
π βΈΊ π₯π₯π₯
Opdracht: animeer de foto zodat het midden van de foto de muis volgt.
https://github.com/user-attachments/assets/1445b02d-53b0-4a73-930e-9c2bffd38473
Wanneer je een mouse event-listener op een element zet zijn de clientX en clientY waarden nog steeds gelijk aan de x en y as van de window. Dat betekent dat je voor deze animatie zowel e.clientX/e.clientY als de breedte en hoogte van de button nodig hebt. Dit kan je op verschillende manieren opvragen; google eens βHow to get width of element jsβ.
Hier een visuele weergave:
π©π»βπ» βΈΊ
Code voor jou
(CodePen)
π©π»βπ» βΈΊ
Uitwerking
(CodePen)
niet meteen spieken π«£
Oefening 4: π€© Mouse events op elementen π€©
π βΈΊ π₯β¬οΈβ¬οΈ Opdracht: animeer het clip-path in de button op basis van waar de muis entert (en BONUS: leavet).
https://github.com/user-attachments/assets/0d39c432-ec26-4206-bee8-d443b5ba28a8
Wanneer je een mouse event-listener op een element zet zijn de clientX en clientY waarden nog steeds gelijk aan de x en y as van de window. Dat betekent dat je voor deze animatie zowel e.clientX/e.clientY als de x en y positie van de button nodig hebt. Dit kan je op verschillende manieren opvragen; google eens βHow to get x position of element jsβ.
Wanneer je client x/y aftrekt van de x/y positie van het element krijg je de coordinaten die je kan gebruiken om de clip path in te starten.
Clip path circle werkt als volgt: clip-path({circle-size} at {x positie} {y positie})
π©π»βπ» βΈΊ
Code voor jou
(CodePen)
π©π»βπ» βΈΊ
Uitwerking
(CodePen)
niet meteen spieken π«£
Oefening 4: π ππ MEERDERE IMAGES IN EEN TRAIL π ππ
π βΈΊ β¬οΈβ¬οΈβ¬οΈ Opdracht: animeer meerdere afbeeldingen die de muis volgen π π€©
https://github.com/user-attachments/assets/65ed7166-d287-415a-a7d4-27f3bd4d62d4
Image trails π, een echte uitdaging, maar leuke (tikkeltje irritante) toevoeging op websites!
π©π»βπ» βΈΊ
Code voor jou
(CodePen)
π©π»βπ» βΈΊ
Uitwerking
(CodePen)
niet meteen spieken π«£
Oefening 5: π¬ SplitTexts π¬
π βΈΊ β¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈβ¬οΈ Opdracht: animeer de splittexts zoals jij wil πͺ
https://github.com/user-attachments/assets/221facfb-5f28-4440-a1ff-b5d6eb7e6679
π©π»βπ» βΈΊ
Code voor jou
(CodePen)
π©π»βπ» βΈΊ
Uitwerking
(CodePen)
Oefening 6: (Te) Gekke dingen met SplitText en Draggable
Opdracht: gekke dingen maken!!
π©π»βπ» βΈΊ
Code voor jou
(CodePen)
π©π»βπ» βΈΊ
Uitwerking
(CodePen)
Links
π― βΈΊ GSAP website (GSAP ππ§¦)
π― βΈΊ GSAP docs (GSAP ππ§¦)
π― βΈΊ GSAP plugins (GSAP ππ§¦)