DEV Community: Amelia Smith

Scroll Driven Animations - we don't need any JS

Amelia Smith — Mon, 16 Oct 2023 15:35:00 +0000

Scroll Driven Animation is the future of CSS animation

We shared some crazy examples of scroll-driven animation. Watch this video and be inspired

Bunch of demos and source Code

// Detect dark theme var iframe = document.getElementById('tweet-1713611084832420019-613'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1713611084832420019&theme=dark" }

Important Links

Demos

https://scroll-driven-animations.style/

Blog by Chrome
https://developer.chrome.com/articles/scroll-driven-animations/

animation-timeline
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility

Only good developers make bad UI

Amelia Smith — Fri, 13 Oct 2023 17:16:27 +0000

Do you know Developers are competing to make the worst user experience possible

Check out some best bad UI created by experienced programmers.

// Detect dark theme var iframe = document.getElementById('tweet-1712528404761973028-686'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1712528404761973028&theme=dark" }

Thank you ❤❤

Mind Blowing CSS Only Animation in 2023

Amelia Smith — Sat, 26 Aug 2023 16:46:08 +0000

Mind Blowing CSS Only Animation in 2023

Watch Full Video

Best CSS Animation on internet

Amelia Smith — Wed, 02 Aug 2023 11:15:48 +0000

1. Animated Background with SVG in CSS

Output

Source Code

2. CSS Border Lighting Animation in CSS

Output

Source Code

3. CSS 3D Card Hover Effect

Output

Source Code

https://democoding.in/css-3d-card-generator

This amazing design made by Amit Sheen