Working with javascript dates can be tricky there are additional libraries you can get and inject into your projects, but I like to keep things dependency-free as far as possible. Especially when a few simple lines is all that was needed.
The date which is returned will be your current local time, this does not help when your API requires time for reporting. eg: all sales between now and now will be empty, as there would in most cases be no transactions happening on this exact millisecond.
You need to convert the date to start at the start of the day, and then to the end of the day, I simply set the hours to 24 hours on the date and then subtract one millisecond.
Subtracting the 1 millisecond is not a solution I have seen online before, most of the solutions online were pretty complicated and or required additional dependencies.
I was experimenting with creating some progress bars, particularly happy with getting the outline, background and spacing between the fill and the outline in. Feel free to use these however you like.
Here are some premade, easy to use CSS animations I created. Feel free to use them, I use them to save myself time when creating things.
I am enjoying throwing code onto codepen to have a quick source to reference that enables me to quickly add code into a project.
Note that I embedded the SVG so I didn’t have to call it from the server.
Play the animations by hovering over or tapping them. I will probably continue to add and tweak them over time, and possibly convert it into some sort of library at some stage.
I wanted to create a way which I can simply split an image in half using only CSS. I wanted the effect to be dynamic and responsive so that we can swap out any image at any time without having to edit the image in an image editor. The more I played with it the more interesting effects I realised could be achieved with very little tweaking of the code.
Below are some prototypes, feel free to explore and mess around with it.
In the above code pen you can see the fun little menu effect we are about to create. The whole effect is created using only HTML and CSS (SCSS), in addition we will be using Psuedo elements.
When we look at the effect we can see that:
The effects all trigger on hover
Text underlined from the center of word outwards
Letter spacing increases (distance between the individual letters)
Colour changes
There is a nice “bouncy” animation to the whole effect
Items stack on top of each other on smaller screens
Setting up the document structure
First off we create the navigational HTML structure, wrap an unsorted list element within a nav element and the populate a list of links.
Take note that all the code can be found in the codepen, and if you don’t understand SCSS you can use the drop down arrow in codepen to view the compiled CSS.
Creating the bounce / elastic animation
Next up we create the underline effect using CSS. It’s important to note that the line animates from the center of the link outwards.
We create the animation using the cubic-bezier function in CSS, this sets the timing for the animation and is really easy to create when you use the developer tools in Firefox and/or one of the online tools like cubic-bezier.com. Below you can see the cubic-bezier as seen when edited in fire-fox.
cubic-bezier animation
Timing is arguably the most important aspect of animation, and spending time to get it right will greatly enhance the “feel” of your designs. To achieve the effect we are going for we make sure that we overshoot the end position both in the beginning I loosely based this on of the 12 principles of animation, #5 Follow through and overlapping.
You could potentially create a more controlled animation using @keyframes, I am however satisfied with the result from the cubic-bezier function. Because we are using SCSS we set a variable that we can simply reuse throughout our code when defining the “timing” value in our transition property, this is what it looks like:
$bounce: cubic-bezier(.68,-0.55,.27,1.55);
Creating the underline decoration
The underline decoration is not actually an underline, it merely looks like one. If you have a look at the code you will noticed that we use the psuedo element: before with an absolute positioning.
It’s really important to note that the link element needs to be relative and the pseudo before element needs to be absolute, this allows it to sit over the element and size itself to the appropriate size. See the examples below:
Here we can see the pseudo before element (in this case the orange outline) applied to a list element.
Relative Positioning
With absolute positioning applied we can see how it lays on top of the parent li element.
Absolute Positioning
Now that we understand how this works, we simply set the background for the before element to a 100% width, position it to the bottom and give it a small height value so it looks like a line.
Please note that in the above code I have also included the basic styling for margins, list styling and text alignment, these are rather trivial with the exception of text-align: center;
Animating the line
Next we add the hover state that triggers the line animation, hover over the example to see it in action.
I need to bring your attention to the transform origin property at this point. We have not defined it or used it as it defaults to the middle of the items x and y (50%), which is what we needed for our effect. Take a couple of minutes to add it and play with the different values and see how it changes the effect.
Animating the text
To get the text to spring outwards we recycle the timing from the $bounce cubic-bezier we set up earlier and add the letter-spacing property to the a tag and the a:hover tag. We also need to center the text in the nav or the underline-nav class to get the text expanding from the center.
We created a smooth, fun animated elastic effect with the help of pseudo elements, the cubic bezier function, transform and exploring one of the 12 principles of animation. Whilst I haven’t tested the effect in all the browsers, the code should work in all popular browsers.
Feel free to review the code on codepen.io, and mess around with it a little. If you are unfamiliar with code pen or SCSS, simply hit the dropdown arrow on the SCSS panel and select “view compiled css”, in addition tweak the zoom options in the code pen above to see the responsive versions (horizontal and vertical layouts).
I hope this tutorial helped someone, somewhere, feel free to share, use and customise if you do end up using it drop me a message and show me how you ended up using it.
Creating consistent fade in and outs on something like subtitles in a video can become rather tedious over time especially if you are changing the the duration of those layers at any point. Using the expressions functionality within after effects you can easily automate these fades with a little bit of code.
Simply copy and paste the code below onto the opacity property of the layer. You will need to alt+click the little stop watch on the opacity layer (command+click on mac… I assume?) and then paste the expression into the expression editor.
// Automatic Fade in and out for after effects by Francois Marais, francoismarais.com
dur = outPoint - inPoint;
// Specify your fade times
fadeInTime = 0.6; // Total Seconds
fadeOutTime = 0.6;
// Specify your opacity preferences
startOpacity = 0;
endOpacity = 100;
fadeIn = linear(time,inPoint,inPoint+fadeInTime,startOpacity, endOpacity);
fadeOut = linear(time,outPoint-fadeOutTime,outPoint-thisComp.frameDuration,endOpacity, startOpacity);
(time < (dur/2+inPoint))? fadeIn : fadeOut
Update: The code can be compressed into a single line expression. I feel the above version is easier to read, understand and customise, and when someone is googling solutions the more expanded versions are better received. Below is the shorter example, special thanks to the guys on Reddit.
// Automatic Fade in and out for after effects
Math.min(linear(time,inPoint,inPoint + .5,0,100),linear(time,outPoint - .5,outPoint,100,0));
I hope this helped someone, somewhere feel free to share, customise and let me know what you ended up doing with it.
Throughout my career I have gotten to read a lot of written content, and one thing that I have encountered (and guilty of myself at times) is spelling simple common words incorrectly.
What could I do about it?
To combat this I decided to make a “game” that would help eliminate common spelling errors and more importantly have helpful advise and information about the mistake you have made, so that you wouldn’t make the mistake again. I needed it to be lightweight, work on any device and look appealing enough for players to give it a go.
Introducing “Wordling”
Because nothing says “spell better” than a made up word. The game is simple, a player is presented with a word and simply asked if it is spelt correctly. The player then chooses yes or no, and the player either continues to the next word or gets some helpful information to try and correct their spelling in future. It’s worth noting this is a prototype at the moment. Below you can give it a go in all it’s codepen glory.
Next up I will probably upload the project to github, before continuing to work on it. There is quite a bit to still do on this, even though it’s just a simple game / learning tool:
A back end needs to be integrated
I am toying with the idea to integrate similar concepts of flashcards and the three pile technique, where you will simply see the words you get wrong more often than the ones you don’t get wrong.
The scoring system will be explored and made public so players can challenge an motivate each other to beat each others streak score. Currently scoring is planned to be based on how many words you get correct in a row and the time it took you as the tie breaker.
Finally I need upload the fully functional version to the web where anyone can then access and play it.
