Manoela Ilic @crnacura Twitter profile | Pikagi

Pikagi

Manoela Ilic

@crnacura

24,899

Followers

2,072

Following

470

Media

3,320

Statuses

Creative developer @codrops · available for hire 👉 contact @codrops .com · Living off-grid ⛰️🌳🌸 #animation #webdesign #css

Portugal

https://t.co/HJqfct3hsk

Joined January 2009

Don't wanna be here? Send us removal request.

Pinned Tweet

@crnacura

Manoela Ilic

9 months

🦄 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

8

28

229

Last Seen Profiles

@Ma8P4

@IrishC49821

@AntonioCaraveo4

@stw_pdg

@JWCJ_kuxs

@CelenaSele98044

@Sumiayu3

@YOU_Muddy_FeeT

@hari_kin92778

@bokeplokalmalam

@yu895114373

@caterin36

@sotwecom

@migi_miya

@pedroizquiel_

@HarleighT45715

@aoiao_hana2

@Ma8P4

@lunvlr

@CresweytGKP

@ImagiChan

@twth5E

@yasu4818

@vviied

@ConnellLorcan

@thant38264

@Ma8P4

@Angstfor_dinner

@Esteban27909767

@bokeplokalmalam

@75meejooo2

@hotmomuk

@bokeplokalmalam

@AndiGigoloAsli

@hotmomuk

@nobinovika

@crnacura

Manoela Ilic

7 years

A CSS Grid powered menu that expands from a page corner #css #cssgrid #webdev #animation

22

233

1K

@crnacura

Manoela Ilic

2 years

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

70

753

@crnacura

Manoela Ilic

1 year

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

699

@crnacura

Manoela Ilic

2 years

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

469

@crnacura

Manoela Ilic

1 year

Playing with some more scroll-driven animations, this time on grid columns and rows: Demo: #gsap #javascript #animation #onscroll #motiondesign #inspiration #coding

1

38

383

@crnacura

Manoela Ilic

7 years

A #cssgrid powered slideshow with individual layouts and reveal effects #javascript #css #animation

8

125

362

@crnacura

Manoela Ilic

2 years

Some ideas for on-scroll typography animations using @greensock 's ScrollTrigger plugin: #animation #typography #css #js

6

32

356

@crnacura

Manoela Ilic

7 years

Experimenting with clip-path for a #CSS glitch effect #animation #webdev

8

77

344

@crnacura

Manoela Ilic

2 years

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

41

336

@crnacura

Manoela Ilic

7 years

The CSS glitch effect applied to slideshow transitions #css #webdev #javascript

7

72

332

@crnacura

Manoela Ilic

11 months

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

332

@crnacura

Manoela Ilic

9 months

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

329

@crnacura

Manoela Ilic

6 years

Playing with #SVG filter effects for distortion animations on images #gsap #animation #webdev #uidesign #javascript

5

44

300

@crnacura

Manoela Ilic

5 months

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

@crnacura

Manoela Ilic

9 years

Some menu styles that use the line as main design element

7

120

280

@crnacura

Manoela Ilic

2 years

Exploring some page transitions with covering elements and CSS clip-paths ✂️ #animation #css #javascript #gsap #webdevelopment

1

32

279

@crnacura

Manoela Ilic

6 years

A Masonry-powered grid layout with a scrollable content view #gsap #animation #css #javascript #webdev

4

55

277

@crnacura

Manoela Ilic

5 years

A little #tutorial on how to make a page scroll smoothly and add some on-scroll image animations #javascript #webdev #animation

8

40

274

@crnacura

Manoela Ilic

3 years

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

271

@crnacura

Manoela Ilic

6 months

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!

@raunofreiberg

rauno

7 months

Blur reveal

21

25

796

9

15

275

@crnacura

Manoela Ilic

11 years

Just Delete Me: A directory of direct links to delete your account from web services. http://t.co/PnmHNR9q80

9

180

260

@crnacura

Manoela Ilic

7 months

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

262

@crnacura

Manoela Ilic

8 years

Some decorative stack motion hover effects #css #javascript

5

88

254

@crnacura

Manoela Ilic

7 years

Implementation of the Outdoors layout designed by the amazing @gilhuybrecht #css #webdev #cssgrid #layout #javascript #animejs

8

49

256

@crnacura

Manoela Ilic

8 months

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

@crnacura

Manoela Ilic

2 years

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

246

@crnacura

Manoela Ilic

9 years

Card expansion effect made with #SVG #clipPath and #Trianglify http://t.co/EUqKNcucmS by @ClaudioCalautti http://t.co/7yT00Y6Oxq

3

129

247

@crnacura

Manoela Ilic

1 year

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

248

@crnacura

Manoela Ilic

9 years

Some icon animations made with mo.js by @legomushroom

Tweet media one

5

87

236

@crnacura

Manoela Ilic

2 years

🐹 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

228

@crnacura

Manoela Ilic

10 years

Playing with elastic elements for enhanced interactions http://t.co/2kMZzMQ1bh Gotta love #SVG and @Snapsvg :) http://t.co/oVcVGzOPR8

Tweet media one

10

142

210

@crnacura

Manoela Ilic

5 months

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

207

@crnacura

Manoela Ilic

3 years

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

205

@crnacura

Manoela Ilic

3 years

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

199

@crnacura

Manoela Ilic

10 months

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

@crnacura

Manoela Ilic

2 years

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

196

@crnacura

Manoela Ilic

1 year

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

@crnacura

Manoela Ilic

3 years

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

190

@crnacura

Manoela Ilic

11 months

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

@crnacura

Manoela Ilic

4 years

I explored some (layout) ideas for on-scroll image grid animations using Locomotive Scroll by @LocomotiveMTL 👇 #webdesign #frontend #uidesign #inspiration #animation

5

25

189

@crnacura

Manoela Ilic

3 years

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

186

@crnacura

Manoela Ilic

7 months

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

@crnacura

Manoela Ilic

3 years

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

179

@crnacura

Manoela Ilic

4 years

You will want to learn from this awesome developer: @bruno_simon has started working on an online #threejs course and the outline looks amazing!!! 👌👌👌

Tweet media one

6

31

178

@crnacura

Manoela Ilic

6 years

A set of demos with animated WebGL lines created with the THREE.MeshLine library🤘 by @JeremBoo #webgl #threejs #webdev

0

27

176

@crnacura

Manoela Ilic

2 years

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

25

176

@crnacura

Manoela Ilic

7 years

Exploring some progressive hover effects for proximity feedback #webdev #javascript #ui #hover #animation

1

39

176

@crnacura

Manoela Ilic

7 months

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

21

171

@crnacura

Manoela Ilic

3 years

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

3

20

168

@crnacura

Manoela Ilic

6 years

A collection of our favorite demos and web experiments from 2018 #demos #webdev

Tweet media one

0

42

162

@crnacura

Manoela Ilic

7 years

Dynamic Shape Overlays with #SVG by @ykob0123 #javascript #webdev

4

46

166

@crnacura

Manoela Ilic

1 year

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

163

@crnacura

Manoela Ilic

1 year

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

162

@crnacura

Manoela Ilic

1 year

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

160

@crnacura

Manoela Ilic

4 years

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

31

157

@crnacura

Manoela Ilic

2 years

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

157

@crnacura

Manoela Ilic

7 years

A simple implementation of the grid item animation by @filipslovacek #animejs #javascript #css

6

30

155

@crnacura

Manoela Ilic

3 years

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

151

@crnacura

Manoela Ilic

4 years

👍👍👍 10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be.

1

28

147

@crnacura

Manoela Ilic

9 years

Learn how to create your first 3D scene with #threejs in this amazing tutorial by @yakudoo

Tweet media one

1

67

151

@crnacura

Manoela Ilic

2 years

Some geeky type effects inspired by @andreasgysin 's work 🔥⌨️🔤 #animation #typography #design #frontend #gsap #javascript #creativecoding #inspiration

3

21

150

@crnacura

Manoela Ilic

6 years

An experimental slideshow with a rotated look #javascript #gsap #animation #uidesign #webdevelopment

3

20

146

@crnacura

Manoela Ilic

7 years

Awesome infinite & interactive tunnel animations by @Mamboleoo #threejs #webgl

5

45

146

@crnacura

Manoela Ilic

7 years

A fantastic creation by @lmgonzalves : Particle effects for buttons (or other elements) #javascript #animejs #ui #webdesign #webdev #animation

2

40

141

@crnacura

Manoela Ilic

7 years

Playing with #SVG clipPath #animations to create some organic looking hover effects #animejs #webdev

1

31

140

@crnacura

Manoela Ilic

5 months

Playing around with a motion effect on a grid based on an interaction from Also added a transition inspired by @cubeycap 's animation 😻 Links to demo + code in the comments 👇

5

5

144

@crnacura

Manoela Ilic

6 years

A playful grid layout with a motion hover effect #gsap #animation #webdev #cssgrid

7

32

139

@crnacura

Manoela Ilic

2 years

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

@crnacura

Manoela Ilic

1 year

🐣I made 3 tiny hover effects inspired by Alena Orlova's grid design for @geexarts Check it out: I used #gsap but probably all possible with #CSS only. Wanna give it a try? Let me see your creations! Code 👉 #gsap #javascript

5

11

140

@crnacura

Manoela Ilic

6 years

A little details menu with boxes that get revealed in an irregular grid #cssgrid #animation #gsap #javascript #demo #webdev #webdesign

6

24

139

@crnacura

Manoela Ilic

3 years

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

136

@crnacura

Manoela Ilic

2 years

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

@crnacura

Manoela Ilic

3 years

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

@crnacura

Manoela Ilic

3 years

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

135

@crnacura

Manoela Ilic

6 years

A slideshow with a "diagonal" look and a content preview #javascript #uidesign #css #animation #gsap

2

21

134

@crnacura

Manoela Ilic

3 years

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

136

@crnacura

Manoela Ilic

1 year

Experimenting with some 3D image grid animations on scroll: #frontend #animation #3d #css #gsap #javascript #inspiration

0

20

136

@crnacura

Manoela Ilic

2 years

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

135

@crnacura

Manoela Ilic

4 years

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

131

@crnacura

Manoela Ilic

6 years

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

134

@crnacura

Manoela Ilic

1 year

Another addition to our on-scroll journey! ⛵ Animations on a "connected" grid: Demo 👉 #gsap #inspiration #webdesign #webdevelopment #frontend #motiondesign #javascript

1

11

131

@crnacura

Manoela Ilic

9 years

A Shazam-like button that morphs into a music player using @Snapsvg #svg #webdev #tutorial

3

52

128

@crnacura

Manoela Ilic

7 years

Experimenting with some #SVG morphing paths for page transitions #animation #animejs #webdev

4

17

130

@crnacura

Manoela Ilic

4 years

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

@crnacura

Manoela Ilic

1 year

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

@crnacura

Manoela Ilic

5 months

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

135

@crnacura

Manoela Ilic

8 years

Some hover experiments with tilt animations 😜 Inspired by the effect seen on the 2015 @Kikk_Festival grid ❤️

8

30

128

@crnacura

Manoela Ilic

8 years

A simple transparency effect for images with interactive points

Tweet media one

4

32

125

@crnacura

Manoela Ilic

7 years

Experimenting with some fun shape and letter animations Inspired by @animography 's work #svg #webdesign #javascript #animejs #charmingjs

5

33

126

@crnacura

Manoela Ilic

6 years

Some creative thumbnail reveal effects for links #animation #javascript #gsap #demo

5

25

127

@crnacura

Manoela Ilic

6 years

A small experiment with some parallaxy image previews that animate to a custom grid #cssgrid #javascript #demo #gsap #animation

0

24

123

@crnacura

Manoela Ilic

7 years

Playing with animated SVG frames for a slideshow #svg #animejs #javascript

8

19

125

@crnacura

Manoela Ilic

8 years

Some inspiration for grid item loading effects #animation #webdev #inspiration #animejs #masonry #grid

1

40

125

@crnacura

Manoela Ilic

9 years

Rain & Water Effect Experiments by @lucasbebber #WebGL

7

62

125

@crnacura

Manoela Ilic

5 years

Learn how to dynamically change the colors of product images by creating an #SVG and applying a mix-blend-mode in this great #tutorial by @KyleWetton #webdev #css Thank you Kyle!

1

28

123

@crnacura

Manoela Ilic

1 year

😍😍😍 What an amazing new look! 💙 @greensock

Tweet card media

Homepage | GSAP

GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

6

12

122

@crnacura

Manoela Ilic

5 years

I'm going to be available for collaborations and creative projects starting from 2020.🙋🏽‍♀️ Want to work with me? Drop me a line: info @tympanus .net

5

31

123

@crnacura

Manoela Ilic

5 years

A really great exploration by @aqro on how to use Cannon.js to build a delicious 3D physics-based menu 😍 #threejs #webgl #cannonjs #3d #webdev #typography #codrops

2

17

124