Pens from Andy Pagès https://codepen.io/andyNroses/ en nospam@codepen.io Copyright 2024 2021-09-20T14:59:07-07:00 A Pen by Andy Pagès https://codepen.io/andyNroses/pen/dyReNXm https://codepen.io/andyNroses/pen/dyReNXm Andy Pagès

See the Code - See it Full Page - See Details

]]>
A Pen by Andy Pagès 2021-09-20T14:59:07-07:00
Spider-Verse: Morphing https://codepen.io/andyNroses/pen/ZmKBmW https://codepen.io/andyNroses/pen/ZmKBmW Andy Pagès

See the Code - See it Full Page - See Details

WIth Into the Spider-Verse animation movie coming up, I got inspired to do this little morphing! Still using the amazing SVGMorph plugin from GSAP!

]]>
Spider-Verse: Morphing 2018-11-26T19:53:28-07:00
Instagram Skeleton Screen (React) - Hover to toggle! https://codepen.io/andyNroses/pen/XxqoNe https://codepen.io/andyNroses/pen/XxqoNe Andy Pagès

See the Code - See it Full Page - See Details

Here is my approach on skeleton screens using React and its wonderful conditional rendering!

]]>
Instagram Skeleton Screen (React) - Hover to toggle! 2018-10-24T17:21:47-07:00
Marvel CSS Series: #1 Eye of Agamotto https://codepen.io/andyNroses/pen/NBeNdG https://codepen.io/andyNroses/pen/NBeNdG Andy Pagès

See the Code - See it Full Page - See Details

I'm a big Marvel fan, so this was so much fun! It's the first of a series I hope will be updated regularly.

]]>
Marvel CSS Series: #1 Eye of Agamotto 2018-08-10T01:26:47-07:00
Incredibles 2 Logo Animation (CSS) https://codepen.io/andyNroses/pen/WKyqQB https://codepen.io/andyNroses/pen/WKyqQB Andy Pagès

See the Code - See it Full Page - See Details

I got inspired by the Incredibles 2 trailer, I thought it'd be a nice challenge to recreate the logo animation with CSS! Update: Thanks to @Javierismo for his gradient contribution!

]]>
Incredibles 2 Logo Animation (CSS) 2018-08-07T17:54:50-07:00
Portal (CSS) https://codepen.io/andyNroses/pen/RByYyG https://codepen.io/andyNroses/pen/RByYyG Andy Pagès

See the Code - See it Full Page - See Details

I was thinking how awesome that game is and how much I love it. So why not express it in a pen huh? There it is, some pure CSS Portal cubes! (Used Font-awesome for the heart, alright I admit it!)

]]>
Portal (CSS) 2018-08-02T23:55:38-07:00
Lightsaber Progress (React, CSS) https://codepen.io/andyNroses/pen/oqqNbM https://codepen.io/andyNroses/pen/oqqNbM Andy Pagès

See the Code - See it Full Page - See Details

Check out this noice light saber progress! Was fun to make. I'll maybe do a series with other famous light sabers!

]]>
Lightsaber Progress (React, CSS) 2018-07-12T10:14:33-07:00
Checkboxes (React) https://codepen.io/andyNroses/pen/RMjygx https://codepen.io/andyNroses/pen/RMjygx Andy Pagès

See the Code - See it Full Page - See Details

Easy to use checkbox components based on React and some SVG!

]]>
Checkboxes (React) 2018-03-28T21:24:26-07:00
Slider Dots (React) https://codepen.io/andyNroses/pen/aYwBQb https://codepen.io/andyNroses/pen/aYwBQb Andy Pagès

See the Code - See it Full Page - See Details

A simple React component that can be used for slideshows or other listing displays! It uses simple CSS transitions, and is responsive. The default sizes can be easily modified in the SCSS.

]]>
Slider Dots (React) 2018-03-28T21:23:59-07:00
Carousel (React) https://codepen.io/andyNroses/pen/KaENLb https://codepen.io/andyNroses/pen/KaENLb Andy Pagès

See the Code - See it Full Page - See Details

Just trying out the CSSTransitionGroup add-on!

]]>
Carousel (React) 2018-03-28T21:24:55-07:00