Manoela Ilic
@crnacura
Followers
24,841
Following
1,935
Media
455
Statuses
3,250
Creative developer @codrops · available for hire 👉 contact @codrops .com #uidesign #animation #webdesign #frontend #css
Portugal
Joined January 2009
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Vance
• 1110842 Tweets
Iraq
• 445425 Tweets
Stolen Valor
• 303786 Tweets
Wisconsin
• 246211 Tweets
Kursk
• 230954 Tweets
BEST WISHES FOR SAROCHA
• 222829 Tweets
Trump 2024
• 165242 Tweets
#erisimengelinikaldır
• 151269 Tweets
Tampon Tim
• 141664 Tweets
ISIS
• 133151 Tweets
Eau Claire
• 95936 Tweets
Walthamstow
• 74883 Tweets
Vienna
• 68625 Tweets
Brighton
• 59583 Tweets
Scott Ritter
• 49399 Tweets
Quincy Hall
• 44463 Tweets
$XRP
• 41962 Tweets
Chidimma
• 40838 Tweets
Home Affairs
• 38067 Tweets
Swifties
• 36255 Tweets
Nelly
• 33610 Tweets
Bon Iver
• 27941 Tweets
FURIALEX EN CARAJO
• 27043 Tweets
Ferdi
• 25835 Tweets
#الاتحاد_انتر_ميلان
• 21643 Tweets
D'Tigress
• 14428 Tweets
Entourage
• 13794 Tweets
Stephen Miller
• 12554 Tweets
Air Force 2
• 12224 Tweets
$YAWN
• 11357 Tweets
#世界猫の日
• 10393 Tweets
Pinned Tweet
🦄 Finally, we have a place where you can browse all our 500+ free demos, from fun web experiments to animation concepts and interaction ideas. Code included:
Huge thanks to the 80 talented contributors who've been part of our journey over the past 12
7
29
217
22
235
1K
Made some more on-scroll
#typography
animations:
It really depends on the content. Some words just scream for a certain motion... and the animation helps convey the message better!😃
#gsap
#greesock
#animation
#js
#webdesign
#inspiration
#coding
15
69
755
Animating clip-paths on layers of images makes really interesting page transitions!✨
Hope you like these for inspiration:
Just scratching the surface here!
#frontend
#css
#js
#gsap
#animation
#creativecoding
4
90
703
Based on
@AlexFisla
's fantastic work, I got playing with this little grid interaction:
Lots of fun possibilities here, depending on which values for the parameters you choose 🤪
#frontend
#animation
#javascript
#css
#webdesign
#gsap
4
59
474
Playing with some more scroll-driven animations, this time on grid columns and rows:
Demo:
#gsap
#javascript
#animation
#onscroll
#motiondesign
#inspiration
#coding
1
38
385
8
127
366
Some ideas for on-scroll typography animations using
@greensock
's ScrollTrigger plugin:
#animation
#typography
#css
#js
6
32
356
8
77
347
Roll the dice on your next dev project with this in-depth tutorial on creating a
#threejs
3D dice roller! Follow along with
@uuuuuulala
for a step-by-step guide to bring your game to life 🎲🎉
#javascript
#coding
#frontenddev
Thank you, Ksenia! 🙏💙
5
42
340
7
74
334
I love that SVG typography animation on so I tried recreating it. Not the same chopping effect but the results are still fun 😅
Read more:
#gsap
#css
#javascript
#coding
#typography
6
30
334
Major kudos to
@MBarvian
for his jaw-dropping contribution to Codrops! 🔥
Max brings Francesco Zagami's beautiful designs to life using CSS scroll animations. These impeccably coded demos are a goldmine for seeing the new CSS feature in action! Don't miss it 👉
3
31
330
Playing with
#SVG
filter effects for distortion animations on images
#gsap
#animation
#webdev
#uidesign
#javascript
5
44
305
Today we have a fantastic tutorial on Codrops 🧑🏻🏫
@guilanier
shows us how to use SDFs in Three.js to create a really beautiful interactive lens blur effect on simple shapes. Don't miss this!
Links below 👇
Thank you so much, Giom!❤️🔥
#threejs
#webgl
#frontend
6
21
303
Exploring some page transitions with covering elements and CSS clip-paths ✂️
#animation
#css
#javascript
#gsap
#webdevelopment
1
32
280
A Masonry-powered grid layout with a scrollable content view
#gsap
#animation
#css
#javascript
#webdev
4
55
276
A little
#tutorial
on how to make a page scroll smoothly and add some on-scroll image animations
#javascript
#webdev
#animation
8
40
277
This didn't turn out *exactly* like I planned it 😅 but I think the mini grid is kinda cute 🐹
#css
#javascript
#gsap
#animation
#webdesign
5
20
274
Love what
@rauno
is doing here.
What if we break the text into letters and experiment with blur, brightness, and other initial transforms? Lots of possibilities here!
Tip: A grainy background adds a nice touch!
9
15
277
Just Delete Me: A directory of direct links to delete your account from web services.
http://t.co/PnmHNR9q80
9
182
263
Throwback to over a decade ago when playing with 3D in CSS was all the rage!
Remember interactive 3D books? 📚
So satisfying to watch and tinker with! Excited to see it back in fashion 🤩
Discover more 3D magic here (not just CSS):
6
20
263
Implementation of the Outdoors layout designed by the amazing
@gilhuybrecht
#css
#webdev
#cssgrid
#layout
#javascript
#animejs
8
50
258
Today we have a tutorial for you:
@romanjeanelie
shows how to create a really cool 3D text bulge effect with
#r3f
😍
Don't miss it:
Thank you so much, Roman! 🙏🩵
4
24
256
Exploring some smooth panel scroll effects based on Margot Priolet’s website:
...using CSS filters and transform magic🐰🪄
#css
#javascript
#animation
#gsap
#coding
4
27
249
Card expansion effect made with
#SVG
#clipPath
and
#Trianglify
http://t.co/EUqKNcucmS
by
@ClaudioCalautti
http://t.co/7yT00Y6Oxq
3
130
249
You know those stunning fullscreen image transitions on portfolio sites?
Well, I'm a total fan of them, so today I'd like to share 16 ideas that have been swirling in my mind for a while—some are old, some are new, but I hope they all inspire you!
I
4
27
250
🐹 A tiny menu hover effect and page transition where image tiles animate to a full version:
My mac is getting old though... I promise the demo is smoother than the video 🙈😂
#webdesign
#webdevelopment
#gsap
#javascript
#css
#animation
1
23
227
Playing with elastic elements for enhanced interactions
http://t.co/2kMZzMQ1bh
Gotta love
#SVG
and
@Snapsvg
:)
http://t.co/oVcVGzOPR8
10
145
212
I totally fell in love with the amazing look and interactions of Jean Dawson’s website by
@mouthwashstudio
and
@guicolombel
.
I couldn't resist using it as inspiration to create my own version of those retro-style hover effects 👩🚀
It’s not quite as cool as the original, and of
5
7
208
Inspired by
@Holographikco
's amazing work, I tried creating a layout switch animation from rows to a content preview:
Using GSAP's Flip plugin saved my day 😅 What a powerful tool!
#gsap
#animation
#typography
#css
#frontend
#webdesign
6
11
207
Trying a page transition based on a kinetic typography animation 👇
(colors are a bit off in the video, sorry about that!)
#javascript
#animation
#webdesign
#gsap
#typography
3
16
202
Hacking around with text clip-path animations on scroll:
Wish we could do this with CSS because SVG is a pain in the gluteus maximus! 😅
#gsap
#svg
#typography
#animation
#frontend
7
23
201
A simple transition, but a mighty visual effect! 🦁
Animating a large image to its tiny place in a grid:
Maybe this serves as some kind of starter idea for interesting layout animations?🤔💡😜
#gsap
#animation
#javascript
#css
3
15
200
Today I’m releasing 4 exclusive demos that we’ve created for our subscribers to all our readers! 🥳
Hope you like them!
GitHub links included!
#frontend
#javascript
#gsap
#css
#demo
#animation
#webdesign
#inspiration
2
21
192
Tried to create a little menu animation with a background cover effect!
Inspired by
@RuslanSiiz
's Dribbble shot!
#demo
#javascript
#webdesign
#css
#animation
#coding
1
18
191
Today we got a great tutorial by
@Anemolito
for you!
Learn how to create an interactive effect with lots of objects:
Thank you, Daniel! 🙏
#threejs
#webgl
#coding
#tutorial
#javascript
#demo
0
17
189
I explored some (layout) ideas for on-scroll image grid animations using Locomotive Scroll by
@LocomotiveMTL
👇
#webdesign
#frontend
#uidesign
#inspiration
#animation
5
25
190
An interactive WebGL pixel distortion effect with endless possibilities! Made by fabulous
@akella
😍 Thank you Yuri, love this so much! Can't stop playing with it 😃
#webgl
#threejs
#javascript
#webdesign
#inspiration
1
17
188
Pushing around some texts on scroll with expanding images. This is inspired by a billboard ad 🧐
Pretty tricky because it depends so heavily on the context, but could be interesting for some layouts!
Check out the links in the 🧵
#animation
#gsap
6
18
187
Experimenting with some CSS filter effect on images when navigating a slideshow:
Hope you like the design... because the animation is nothing fresh, really 😉
Maybe you can elevate it to something else?
#css
#webdesign
#javascript
#gsap
#animation
9
18
183
You will want to learn from this awesome developer:
@bruno_simon
has started working on an online
#threejs
course and the outline looks amazing!!! 👌👌👌
6
31
184
Playing with a simple layout animation using
@greensock
's Flip plugin. Tiny thumbs 🖼️ fly to their position in a grid:
Article:
Demo:
#javascript
#animation
#css
#webdesign
#gsap
1
26
178
Exploring some progressive hover effects for proximity feedback
#webdev
#javascript
#ui
#hover
#animation
1
40
179
Thrilled to share an incredible case study today!
@michelegiorgi
takes us through his passionate journey of restoring an '80s classic and crafting 84—24, a web project where Three.js artistry meets impeccable minimalist design.
Don't miss it:
Honored
1
20
176
Made a little menu effect with an SVG overlay and an infinite background CSS animation. Nothing special, really, but needed an excuse to use Meno Banner again 😁
Hope you enjoy it and find it useful!
#animation
#css
#javascript
#webdesign
#typography
4
20
170
4
46
168
I've been playing with different word animations on text blocks. Here's a demo where you can try out some:
Hope you like it 🤗
#creativecoding
#webdevelopment
#webdesign
#javascript
#animation
2
21
165
Loved the effect on the
@evervault
website made by
@NevFlynn
!
So I'm deconstructing it in this tutorial💡
#css
#javascript
#gsap
#webdevelopment
#coding
#tutorial
#webdesign
2
17
163
Have a look at some examples of scroll-based layout animations using GSAP's ScrollTrigger and Flip plugins:
A little riddle: can you spot the only image in the demo not generated by AI? 🤔
#gsap
#javascript
#uidesign
#webdesign
#webdevelopment
#demo
4
19
162
I made this layout that animates from a menu with a background image grid to an inner page:
Hope you like it 🙂
#gsap
#animation
#frontend
#webdesign
#ui
#javascript
#inspiration
5
33
159
An
#animation
that I wanted to do for a while already: a view switch from grid to slideshow.
Proof-of-concept only!🏋🏽♀️🙈
#frontend
#gsap
#javascript
#ui
#webdesign
#inspiration
#css
#webdevelopment
#uidesign
#demo
#coding
4
16
159
6
30
155
What an honor to publish this: An exclusive
#tutorial
from by
@bruno_simon
where you'll learn how to craft efficient and super smooth scroll based animations in
#threejs
😍😍😍
THANK YOU, Bruno, I admire your work so much!
2
7
154
👍👍👍
10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be.
1
28
149
Some geeky type effects inspired by
@andreasgysin
's work 🔥⌨️🔤
#animation
#typography
#design
#frontend
#gsap
#javascript
#creativecoding
#inspiration
3
21
151
An experimental slideshow with a rotated look
#javascript
#gsap
#animation
#uidesign
#webdevelopment
3
20
147
5
45
147
A fantastic creation by
@lmgonzalves
: Particle effects for buttons (or other elements)
#javascript
#animejs
#ui
#webdesign
#webdev
#animation
2
40
141
Playing with
#SVG
clipPath
#animations
to create some organic looking hover effects
#animejs
#webdev
1
31
143
7
33
141
Exploring some page transitions made with simple
#CSS
grids +
@greensock
. Based on an animation by fabulous
@niccolomiranda
🥰
#frontend
#javascript
#gsap
#css
#webdevelopment
#webdesign
#inspiration
3
15
138
A little details menu with boxes that get revealed in an irregular grid
#cssgrid
#animation
#gsap
#javascript
#demo
#webdev
#webdesign
6
24
139
Experimenting more with GSAP's flip plugin and I'm blown away by how much this accelerates development!
What a powerful tool!💪
#javascript
#animation
#gsap
#css
#demo
3
9
137
New
#tutorial
+ video by
@tBlankensmith
where you'll learn how to create audio reactive shaders with
@shaderpark
+
@threejs
🕺🎶🎨
#creativecoding
#frontend
#javascript
#webgl
#webdevelopment
Thank you, Torin! 🙏🔥
1
21
138
I tried doing some alternating column scroll with Locomotive Scroll and et voilà! It works and it's very confusing, but oh, so much fun! 😅
Didn't have much time to implement the thumbnail navigation though, sorry about that!
#css
#webdesign
#gsap
3
2
135
I tried recreating an effect I saw a while back using a repeated image.
The possibilities are endless 😜 Hope you find it interesting!
Slightly psychedelic touch thought...🍄 😁
#gsap
#javascript
#css
#frontend
#animation
#code
5
9
137
A slideshow with a "diagonal" look and a content preview
#javascript
#uidesign
#css
#animation
#gsap
2
21
136
Just something playful for a menu: a little
#animation
for where the letters of a word shuffle to become the first letter of some menu items
#coding
#css
#javascript
#webdesign
#gsap
3
8
138
Experimenting with some 3D image grid animations on scroll:
#frontend
#animation
#3d
#css
#gsap
#javascript
#inspiration
0
20
136
Playing with switching layouts using CSS Grids and
@greensock
's magic Flip plugin🔀✨
#inspiration
#animation
#frontend
#webdesign
#uidesign
#motiondesign
My favourite is the "zoom" effect💖👇
2
13
134
Here's another thumbnail to full view
#animation
. this time with a magnetic hover effect and some 3d motion on a grid:
There's also a little tooltip ☺️
#animation
#gsap
#javascript
#css
#webdesign
#uidesign
#interaction
1
18
134
Learn how to build an underwater-style navigation using
#pixijs
in this great
#tutorial
by legendary
@liamegan
. Inspired by the work of
@bstsrvdbld
#pixijs
#webgl
#glsl
#javascript
#uidesign
#webdev
#inspiration
3
21
136
Another addition to our on-scroll journey! ⛵
Animations on a "connected" grid:
Demo 👉
#gsap
#inspiration
#webdesign
#webdevelopment
#frontend
#motiondesign
#javascript
1
11
132
4
17
131
I made a short tutorial on how to achieve that trendy motion hover effect on a background grid of images:
#animation
#javascript
#gsap
#css
#webdesign
2
28
132
Remember those trail animations that started to be cool *years* ago? Well, they are still pretty awesome and today I want to show you some new ideas to get your creative juices flowing 🫶
Read more:
#frontend
#js
#css
#gsap
#animation
#creativecoding
0
11
131
Playing with a grid animation concept based on
@Daistudioo
's work 🙌
Powered by CSS Grid and GSAP (Flip)!
Kudos to Rémi for this nice effect idea and for letting me code it up! 💙🙏
Links in the 🧵
4
10
132
Some hover experiments with tilt animations 😜 Inspired by the effect seen on the 2015
@Kikk_Festival
grid ❤️
8
30
131
A simple transparency effect for images with interactive points
4
33
126
Experimenting with some fun shape and letter animations Inspired by
@animography
's work
#svg
#webdesign
#javascript
#animejs
#charmingjs
5
33
127
5
25
127
A small experiment with some parallaxy image previews that animate to a custom grid
#cssgrid
#javascript
#demo
#gsap
#animation
0
24
124
8
19
126
Some inspiration for grid item loading effects
#animation
#webdev
#inspiration
#animejs
#masonry
#grid
1
40
125
