Téotime Pacreau · @teotimepacreau
24 followers · 69 posts · Server mastodon.design#100DaysOfCode : #HTML #CSS #VanillaJS #GSAP
#Day6 : Text line filling opacity animation
Le projet est à retrouver sur :
https://teotimepacreau.github.io/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode/
Code source : https://github.com/teotimepacreau/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode
Goals :
- VanillaJSto add a line-mask div in each line (forEach and appendChild)
- line-mask CSS class with position absolute that cover the line from right to left with high opacity
#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #Greensock
#greensock #frontenddevelopment #codingday #learntocode #javascript #codingchallenge #webdesign #frontend #webdev #Day6 #Gsap #vanillajs #css #html #100daysofcode
Téotime Pacreau · @teotimepacreau
23 followers · 66 posts · Server mastodon.design#100DaysOfCode : #HTML #CSS #GSAP #JS
#Day5 : Text landing animation and variable font
Le projet est à retrouver sur :
https://teotimepacreau.github.io/Text-landing-animation-and-variable-fonts-Day5-of-100DaysOfCode/
Code source : https://github.com/teotimepacreau/Text-landing-animation-and-variable-fonts-Day5-of-100DaysOfCode
Goals :
- word / line animation coming from bottom with opacity handled with GSAP fundamentals
- variable font discovery
smooth transition playing with the weight of the font and the color on title
#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #Code
#code #frontenddevelopment #codingday #learntocode #javascript #codingchallenge #webdesign #frontend #webdev #day5 #js #Gsap #css #html #100daysofcode
GreenSock · @gsap
2 followers · 5 posts · Server fosstodon.orgHello fediverse!
Who's out there? Are you making anything fun? 👀
#Gsap #animation #creativedev #frontend
Dale · @daledesilva
1 followers · 26 posts · Server indieweb.social
Dale · @daledesilva
1 followers · 12 posts · Server indieweb.socialGot it working well now 😊
Re-approached it from a centre of mass and moment calculation perspective - You can see the debug shapes I added.
Calculating the drag force felt a little complicated until it didn't!
#Inertia #Physics #GSAP #Animation #FrontEnd #IndieDev @StackBlitz@twitter.com
#indiedev #frontend #animation #Gsap #physics #inertia
Dale · @daledesilva
1 followers · 12 posts · Server indieweb.socialDraggable in #GSAP is super easy, but I wanted something with pendulum type physics based on where you grab.
The Inertia plugin didn't do it so I've been messing around a bit. Still some bugs to iron out though 😆
#Inertia #Physics #Animation #FrontEnd #IndieDev @StackBlitz@twitter.com
#indiedev #frontend #animation #physics #inertia #Gsap
Dale · @daledesilva
1 followers · 12 posts · Server indieweb.socialAdded some keyboard control.
(The white circle is the goal for the body - that's what the keyboard controls directly)
Next I'll tweak the foot placement algorithm to adjust if it's not around the centre of mass.
#CreativeCoding #ProceduralAnim
#PixiJS #GSAP @StackBlitz@twitter.com
#Gsap #pixijs #ProceduralAnim #creativecoding
Dale · @daledesilva
1 followers · 12 posts · Server indieweb.socialFinally dipping these long legs into procedural animation. Like I intended to do in my 2004
@AdobeFlash
days.
Wasted 18 years 😞
#PixiJS #GSAP #CreativeCoding in
@StackBlitz