Items grid that show options when you choose one of them. Images by Matt Kaufenberg (http://dribbble.com/mattkaufenberg)
A Pen by Marcelo Barros on CodePen.
Moa Poordeveloper
Poordeveloper
/ RitarSoft Company Logo Animation Loader.markdown
Created
October 23, 2015 03:31
RitarSoft Company Logo Animation Loader
A Pen by Sergey Harini on CodePen.
Poordeveloper
/ Material Design Audio Player.markdown
Created
October 22, 2015 05:43
Material Design Audio Player
Poordeveloper
/ Meaningful Transitions.markdown
Created
October 22, 2015 03:45
Meaningful Transitions
A contacts list based on a video from Google's Material Design spec.
A Pen by Kyle Edwards on CodePen.
Another example of clip-path property for revealing content effect. This experiment will work on Latest Chrome, haven't tested on another browser.
The transition itself is not smooth i think, i have some difficulty time with the javascript. If you have better method please let me know in the comment.
The Design and animation Choreography itself was inspired by Great Shot from CHRISTOPHE KEREBEL on MaterialUp ( https://www.materialup.com/posts/personal-social-card-material-design-animation )
Forked from Rian Ariona's Pen Material VCard.
Poordeveloper
/ Material Design Range Slider.markdown
Created
October 21, 2015 16:31
Material Design Range Slider
Forked from Andreas Storm's Pen Material Design Range Slider.
Smart Watch In CSS Based on material principle and Animation the actual idea Dribbble user id @xer.lee {{ Best view in Chrome }} And i am hard work on SVG animation So i complete this pen to Same example I hope You like Plz Don't Forget to Like and Comment
A Pen by Grapes Theme on CodePen.
Poordeveloper
/ Mobile modal animation.markdown
Created
October 21, 2015 16:30
Mobile modal animation
I wanted to play a little with animations timing for a mobile modal, and here are the results.
Click on the blue circle to open the modal, then click on the blue background to close it.
UPDATE: Ok, since this was a rather simple pen I decided to work on my vanilla JS skills and remove jQuery. If you see anything wrong with it, just let me know! :D
A Pen by Nicolás J. Engler on CodePen.
Poordeveloper
/ Bubble Box Login Screen.markdown
Created
October 21, 2015 16:27
Bubble Box Login Screen
I saw this login screen http://codepen.io/Lewitje/pen/BNNJjo and was inspired to make my own variation. I changed the "bubbles" to flow up through the whole window and instead of using a list, I used svg elements. I think this will allow for more flexibility, since an svg image could potentially be used instead of the rectangles.
I also changed the inputs to reflect some of the principles of Google's Material Design, even though I broke some rules. I saw how to create the inputs here: http://codepen.io/sevilayha/pen/IdGKH
Finally, for the submit button, I used an animation found here: http://codepen.io/chrisdothtml/pen/waKBdM This specifically goes against the Material Design Rules, but I like it anyway
A Pen by Eric Struhl on CodePen.
Poordeveloper
/ Material Design - FAB Motion Animation.markdown
Created
October 21, 2015 16:26
Material Design - FAB Motion Animation
Simple experiments about FAB and motion
Forked from Mattia Astorino's Pen Material Design - FAB Motion Animation.