This blog was originally published on school blog website this is a republish and translation of the original content
In my first few weeks at Yummygum, I worked on many different projects. Furthermore, I also learned many new things like Gatsby* (a javascript framework).
Jollycons (WP2.3)
We at Yummygum are currently working on the project Jollycons, which are icon sets that Yummygum has created and is going to release. My job at Jollycons was to convert the designs to code.
Footer (WP2.3)
My first task for Jollycons was to create the footer, for this I converted the design pixel perfect to code.
We at Jollycons use Gatsby this is a framework built on React.js. When coding the footer I first set up the layout (the html). So since we are using React this was written in JSX* (A kind of fancy html).
Since we are using React, we can easily make changes to the footer as well. After I coded the layout of the footer I proceeded to style the footer in scss* (Sass is an extended css).
With this code, we animate the made with <3 by yummygum when someone hovers over the text with their mouse. Let's see this animation in the browser.
That looks great top! After writing some more SCSS to make the footer properly responsive, the footer is now finished.
Mistakes and solutions
When creating the footer I ran into only one problem and that is that how the footer layout is put together differs from the grid. Because of this, when making the page responsive, it caused the footer to be completely messed up.
I solved this problem by using !important to override the base grid in the footer. This was necessary because the base grid also uses !important.
Cookie notification (WP1.4 & WP2.3)
Since we use cookies on Jollycons we also needed a cookie notification. The problem with cookie notifications is that they often don't look nice. Since there was no design for this I looked at how the rest of the website looks and implemented the styling into the cookie notice.
Initially I had placed the cookie notification on the right side of the screen, this only caused some pretty important content to be hidden. So we then chose to move the cookie notification to the left side of the screen.
To store whether someone has accepted the cookies we store this in the local storage* (storage in your browsers where we can store text) so that the notification is not displayed again to the user.
To complete the cookie notification, we add another subtle animation when the user accepts the cookie notification.
Mistakes and solutions
When creating the cookie notification I did run into some bugs. I even discovered another bug while writing this blog as you can see above in the gif the button jumps.
My first problem was that the cookie notification was hiding the most important content. I fixed this by moving the cookie notification to the left side of the screen.
I also ran into a bug that if the user had already accepted cookies the notification was still visible for a millisecond on reload. I solved this by making the cookie notification invisible initially.
Logo animation (WP2.3)
We wanted to animate the lollipop in the Jollycons logo by having its color change. Since the logo is an SVG we can easily do this. Before we start coding, we need to decide in what order we want to animate the colors. Initially we looked at how it would look if we animated violet dark -> sea dark -> rose dark, but this animation didn't quite work out.
In the end we chose the order violet dark -> sea dark -> violet dark -> rose dark -> violet dark, this makes the transition of the color nicer and smaller.
Now that we have determined the order we can start coding the animation, here I chose to use css keyframes. This allows us to animate the different steps of the animation.
Because we go back to the first color at the end, we can easily turn this into an endless animation. Now we just need to add the animation to the lollipop.
And that's already all the code we need, now let's see how it looks in the browser.
Mistakes and solutions
When creating the logo animation I didn't really run into any problems, this was partly because the animation is quite simple so this code was fairly easy for me to come up with.
Scroll animation svg
On the homepage we have three SVGs to make them even more impressive we want to animate them based on the scroll position of the user.
When I started creating this animation, an animation was only conceived for the last SVG. The idea was still largely a draft and fine tuning of the animation was also still needed while making the animation.
For the svg, we want the circles and lines to come in based on scroll position. For this we are going to use a mask that gets larger relevant to the user's scroll position.
First let's code the mask, for this we want to have a square that is the complete size of the svg.
A mask causes the content that is outside the mask to be hidden. So we want to make it small first and make it larger based on the scroll position. To do this, we will use the CSS property transform: scale(). With this we can make the element smaller and larger, and because we use transform for this, this animation is also very light for the browser.
With the above code we animate the mask, since the animation is relevant to the scroll position there are a few things we need.
First of all, we do not want the animation to start even before the svg is in the screen. Therefore we create a start position, since the position of the svg on different screens is always different it is retrieved with .getBoundingClientRect() . With this we get, among other things, the position of the svg.
Without going into too much detail about the calculation of the transform scale itself, we next come to the transform itself. Here I initially ran into the problem that if the scale is smaller than 0 the animation plays backwards. To solve this I threw the transform in an if else.
Because of this the scale will never be smaller than zero nor larger than one. Now we just need to add the code that executes this function when the user scrolls the page.
Great now it should work let's view the animation in the browser.
It works but it doesn't look quite right yet. The mask is in the center but not in the optical center of the icon. let's update this position.
For this we adjust the transform origin to the specific position, this is always a case of trying until it is right.
In the end, this was the best position as the center, the animation just doesn't feel quite right yet. This is because the mask is very clearly a square. Let's try to solve this by adding opacity to it.
This already looks a lot better but it still feels too much like a square. It probably looks better if we make the circles and lines animate separately (i.e. with a delay). For this, let's copy and paste the masks twice, for the delay we'll add some extra code to the if else statement.
This makes the amount of magnification different between masks, with this we have connected the dots. The animation now looks good in the browser and no longer feels like a square.
Mistakes and solutions
When making the scroll animation I ran into quite a few problems, this was also because I had not animated with masks before and the exact animation was not really fixed yet.
The first problem I encountered was that the svg was constantly blinking on scroll. I found out through testing that this was because I was using <use> in the mask to reference the square. I fixed this by placing the square directly in the mask.
I also ran into the fact that the animation didn't feel quite right, this was because the mask was square. I solved this by dividing the parts of the svg into different masks. As a result, the animation no longer looks square and thus looks a lot better.
Wat heb ik geleerd
I have learned a lot in the past few weeks about working with Gatsby, animating SVGs and working in a team on the same project. I also learned how to create emails with MJML
I have been working on the following points from my PAP
Core task 2 - Learning how to work with frameworks such as Gatsby
At Jollycons we use Gatsby, so I have been working with this a lot over the past few weeks and feel a lot more comfortable with it. While working on the Yummygum website I also learned to work with Handlebars* (an extended HTML).
Key Task 2 - Learning to create emails using MJML.
I coded the newsletter for jollycons, I did this using MJML. This was a lot harder than I what expected but I managed in the end.
Learning objective in personal development - Improve communication with my colleagues
This has come back in recent weeks because I already feel at home in the team and ask for help when I can't figure something out.
Learning objective of practice trainer - Being able to proudly share your work with your colleagues and the outside world.
I am very proud of how the scroll animation ended up and would also proudly share it with the outside world.
What will I do the next two weeks?
I will continue working on Tide and Jollycons in the coming weeks. I will also work on other projects when I am needed there.