Skip to content

a place where there will be different UI animations to be able to easily copy and paste

Notifications You must be signed in to change notification settings

colorlessenergy/css-wizard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

css-wizard

a place where there will be different UI animations to be able to easily copy and paste

tech

  • react
  • Github - hosting

specs

a web app that has different UI animations with code shown for the animation.

There will be an object at the root that has all the information. That object will be used to render the different UI animations data.

All the UI animations will be displayed on the home page and clicking on one will go to a different page with all the code for the UI animation available.

add a new UI animation to the website

First a codepen will have to be created with a UI animation you want to share.

Once it is created look and click on the button that reads 'Embed' in the bottom right of the page.

image of embed button

Once the Embed button is pressed make sure to make the dropdown be on the 'Dark' theme.

image of themes dropdown selected to Dark

Scroll down to the section labeled as 'Copy & Paste code'. Copy the 'HTML (recommended)' one.

image of html to copy and paste

Now go to 'ui-animations.js' file and create a new object in the array.

This object should have

  • id - which is the previous id value plus one.
  • title - a proper title for the animation
  • description - a description of the animation
  • CodePen - copy and paste the code you got from CodePen

Note: when copying and pasting the code from codepen make sure to remove the JavaScript that is being imported '<script async src="https://static.codepen.io/assets/embed/ei.js"></script>'.

image of ui animation copy paste

About

a place where there will be different UI animations to be able to easily copy and paste

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published