RT deadrabbbbit
Tried to recreate the cool effects from Hyundai's website.
Here's a simple version build with @greensock , hosted on @CodePen .
https://codepen.io/d3adr4bbit/pen/RwvmGzV
Sound on...
RT Arby
Scroll-Based Animation isn't just about items popping out; it's about storytelling. Check out this dynamic content lockups with Scroll-Driven Animations built with @openprops
CodePen: http://codepen.io/mobalti/full/Jjxqjxe
@CodePen @argyleink @bramus #CSS #webdev
RT Jon Kantner
Collapsible Timeline
https://codepen.io/jkantner/pen/NWoVGXx @CodePen #CSS #JS
"Long/Short" by Hannah Morgan
https://codepen.io/fionchadd/pen/eYxxOgR
(What a cool use case for the Greensock MorphSVG plugin and morphing multiple SVGs into a stretched-out version of themselves.)
RT Álvaro Montoro
Re @ivorjetski @garethheyes @CodePen My entry: https://codepen.io/alvaromontoro/pen/abXxrNN
An interactive (and slightly responsive) lamp.
https://twitter.com/alvaro_montoro/status/1733246103464624489
RT jhey ▲
Re Here's that @CodePen link!
Can't resist a glowy border demo Was meant to be finishing something else this evening but that'll have to wait I guess
https://codepen.io/jh3y/pen/QWYPaax
"Spell Caster" by Steve Gardner
https://codepen.io/ste-vg/pen/zYerxoR
(This is an incredible Pen. The graphics and experience are so good. And fun! Stunning.)
"Spell Caster" by @steeevg
https://codepen.io/ste-vg/pen/zYerxoR
(This is an incredible Pen. The graphics and experience are so good. And fun! Stunning.)
The Opposites #CodePenChallenge continues!
This week, let's work with soft & sharp
https://codepen.io/challenges/2023/december/2
"Tab Bar Animation" by Aaron Iker
https://codepen.io/aaroniker/pen/KKbOaEb
(I was so prepared for the little border on the bottom to move, but not THAT.)
RT Ben Evans
Fancy a fun holiday challenge?
Fork & put your own piece of furniture in this room.
The funnier & the more adventurous the better.
All forks will be reviewed in a YouTube video early next year.
https://codepen.io/ivorjetski/pen/vYbPgdE
Inspired by @garethheyes
#cssonly #purecss @CodePen
RT Jordan Dey
Did you know you can achieve a parallax effect using the CSS 'perspective' property?
It's surprisingly simple! Take a peek at this #StarWars inspired CodePen to see the magic unfold@CodePen: https://codepen.io/DeyJordan/pen/WNPmxro
72 lines of #CSS
23 lines of #javascript
RT Adam Argyle
linear() + box-shadow + selectors, get a neat little effect no?!
Codepen:
https://codepen.io/argyleink/pen/XWOOydB
https://nerdy.dev/neat-bouncy-focus-effect-with-linear-and-box-shadow
RT Amit Sheen
Oh, dreidel, dreidel, dreidel
I made it out of #CSS
And add some animation
Then, dreidel I will play
Happy Hanukkah
Live demo and full code on @CodePen: https://codepen.io/amit_sheen/pen/mdvvowe https://twitter.com/i/web/status/1732910338067124467
"Cool Spotlight Shadows" by Ryan Mulligan
https://codepen.io/hexagoncircle/pen/gORePQx
RT Wakana Y.K.
This is a lightweight performance confetti animation designed for website background
It can be interactively rotated with the mouse, and the background color, excluding the confetti, is transparent.
Demo : https://codepen.io/wakana-k/full/gOqqWdY
@CodePen #codepen #threejs #confetti
RT Hannah
This week's #CodePenChallenge is long/short, giving me the opportunity to play with two of my favourite things: dachshunds and @greensock https://codepen.io/fionchadd/pen/eYxxOgR
"Butterfly Cow" by Stivs
https://codepen.io/stivaliserna/pen/oNbZgBK
RT Jon Kantner
Skeuomorphic Setting Switches
https://codepen.io/jkantner/pen/YzBddqx @CodePen #CSS
RT Wakana Y.K.
This is an interactive animation that satisfies the destructive urge
three-mesh-bvh is used for the diamond shine effect
Demo : https://codepen.io/wakana-k/pen/WNPLNjJ
@CodePen #codepen #threejs #ammojs
Build, test, and discover front-end code