Stories by Katherine Kato on Medium

Creating Reveal Effects on Scroll

Katherine Kato — Wed, 27 Feb 2019 18:25:52 GMT

In this tutorial I would like to share on how I create block reveal effects on scroll. The effect consists of solid colored block decreasing in size and revealing text or an image.

These reveal effects can be used to create engaging and fresh interactions for UI components such as image sliders. I created this slider using a similar wipe animation:

View it on CodePen.

I will be showing you how to create this effect with CSS and Animate on Scroll (AOS), a JavaScript library for animating elements on scroll as a user enters the viewport.

Getting started

Let’s begin by adding the Animate on Scroll library to the project. Include the aos.css in tag:

And aos.js before the closing tag:

Once added, initialize AOS:

AOS.init();

Creating the reveal block

First we will create the reveal block for revealing text underneath. We will be grabbing text from Doggo Ipsum, a lorem ipsum generator from doggo lingo.


  

  Maximum borkdrive

The .reveal-holder class is a container for the solid color block element and text. The styling for these classes are:

.reveal-holder {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.reveal-block {
  position: absolute;
  top: 0;
  width: 100%;
  height: 101%;
  background: white;
}

This is for the block to cover and reveal an element properly. Having the height of the .reveal-block class to 101% is important here:

Setting the height to 100% results in the reveal block not completely over images after window resizing.

Having the overflow CSS property set to hidden for the .reveal-holder class helps prevent anything outside the element’s content from clipping.

Using CSS transitions

Animations are set using the data-aos attribute. For example, to reveal an element from the right, add the attribute to the .reveal-block class in the HTML:

And CSS:

[data-aos="reveal-right"] {
  transform: scaleX(1);
  transform-origin: 100% 0%;
  transition-property: transform;
  transition-delay: 0.5s;
}

[data-aos="reveal-right"].aos-animate {
  transform: scaleX(0);
}

The transform CSS property is using the scaleX() function to the .reveal-block element in order for the block to resize when animated. The transform-origin property sets the point of the transformation, which in this case is at 100% 0% or right left. This is what causes the block to animate by decreasing in size. The transition-property sets the transition effect to be applied and transition-delay sets the transition to wait based on the value set.

Add these options to the AOS.init() function to make the animation play once:

AOS.init({
  once: true
});

The animations will now play once on scroll! Here is how it should look so far:

To add this same effect to images, it is a similar process. Replace the text with an image in HTML:

To make the reveal effect slide to the left from the right, edit the transform-origin to 0% 100%:

[data-aos="reveal-left"] {
  ...
  transform-origin: 0% 100%;
  ...
}

Animating pseudo-elements

We will be using pseudo-elements to the .reveal-block class to create a more stylish reveal animation.

Start by modifying the CSS for the .reveal-block class:

.reveal-block {
  position: absolute;
  top: 0;
  width: 100%;
  height: 101%;
  background: white;
}

.reveal-block::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: lightgray;
  transition-property: transform;
  transition-duration: 0.5s;
}

The ::before pseudo-element is its own element, acting like another .reveal-block but can be set with its own properties, such as background color or positioning.

Add a .right class to .reveal-block like so:

This will help when with animating with pseudo-elements. The CSS being:

.reveal-block.right::before {
  transform: scaleX(0);
  transform-origin: 0% 100%;
}

.reveal-block.right.aos-animate::before {
  transform: scaleX(1);
}

This is the result:

Looks great! All that is left is to hide elements from appearing before scroll. To do this, we will add an data-aos attribute to the .reveal-holder class:

...

And the accompanying CSS:

[data-aos="reveal-item"] {
  visibility: hidden;
  transition-property: visibility;
  transition-duration: 0s;
}

[data-aos="reveal-item"].aos-animate {
  visibility: visible;
}

Wrapping up

Scroll-triggered animations such as block reveal effects can be an immersive and elegant interaction to reveal content. I hope this tutorial helped you learn not only how these animations are done, but also understanding what is exactly happening to make this animation work.

A live demo is available on CodePen:

https://medium.com/media/9c271fe2f45dc5a2d06b6c982a4bcb46/href

I also created a GitHub repository with the code.

kathykato/reveal-effects

Happy coding!

How to create an animated logo with SVG and CSS animations

Katherine Kato — Fri, 17 Aug 2018 15:15:14 GMT

Thoughtful logo design requires a designer to distill the essence of a brand into shapes and colors. In an overly crowded marketplace, one of the most important features of a brand is the ability to stand out and be memorable.

A successful logo is memorable and tells a compelling story about your brand without using any words

Enhancing a logo through animation further sets a brand apart from the competition. An animation can elegantly expand on your brand’s story.

The Fullstack Digital logo animation represents the 3 layers of services we offer: brand, web, and market.

In this tutorial I will show you how to recreate the Fullstack Digital logo using CSS animations.

Let’s start with animating the furthest left SVG shape as that is what appears first in the animation. Here is the starting code for the logo:

Each polygon shape within the SVG is defined by a class, .clss-1 being the polygon on the left, .clss-2 in the center, and .clss-3 on the right.

SVG order

The current order of the polygon shapes within the SVG will not work as the middle and right shapes would be in front of the left shape when we need them to be behind it.

Using the z-index CSS property will not work as the SVG Rendering Model states. SVGs will render elements in the order as they appear, so we will need to simply rearrange the order the of the polygon shapes like so:

...
  
  
  
...

Animating the shapes

To create the animation, we use the CSS @keyframes rule. We can then name the animation and apply the transform property. Let’s start with animating the furthest left SVG shape as that is what appears first in the animation. For instance, we will need to create an animation that causes the left SVG shape to appear from the left side.

The animation will be broken down using percentages. 0% being the start of the animation and 100% being the end. We will have the shape expand and move to the left using the transform property with translate() and scaleX() functions:

@keyframes widthAni {
  0% {
    transform: translate(-30%, 0) scaleX(0);
  }
  20%, 75% {
    transform: translate(0, 0) scaleX(1);
  }
  95%, 100% {
    transform: translate(-30%, 0) scaleX(0);
  }
}

Calling the animation

Since the left shape is defined as .clss-1, we will apply the widthAni animation to run infinitely for 4 seconds and set the transform-origin by adding this to the CSS:

.clss-1 {
  animation: widthAni 4s ease-in-out infinite;
  transform-origin: center right;
}

Animating the rest

Only the left shape was animated and now all that is left is to animate the other two shapes.

Like the first one, the middle and right shape will use @keyframes rule with the transform property to animate. They will also use the opacity property during some parts of the animation to hide and appear:

@keyframes springOut {
  0%, 20% {
    transform: translate(-21%, 0%);
    opacity: 0;
  }
  21% {
    transform: translate(-20.5%, 0%);
    opacity: 1;
  }
  27% {
    transform: translate(-4.75%, 0%);
    opacity: 1;
  }
  31%, 55% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  67% {
    transform: translate(-20.5%, 0);
    opacity: 1;
  }
  68%, 90%, 100% {
    transform: translate(-21%, 0);
    opacity: 0;
  }
}

@keyframes springOutAgain {
  0%, 20% {
    transform: translate(-41.5%, 0%);
    opacity: 0;
  }
  21% {
    transform: translate(-41%, 0%);
    opacity: 1;
  }
  27% {
    transform: translate(-9.5%, 0%);
    opacity: 1;
  }
  31%, 55% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  67% {
    transform: translate(-41%, 0%);
    opacity: 1;
  }
  68%, 90%, 100% {
    transform: translate(-41.5%, 0%);
    opacity: 0;
  }
}

And apply the animation to their respective shapes. The animations play infinitely for 4 seconds:

.clss-2 {
  animation: springOut 4s ease-in infinite;
}

.clss-3 {
  animation: springOutAgain 4s ease-in infinite;
}

The animation is not infinite on the homepage of our website.

Vendor prefixes

For simplicity, the code above does not use any vendor prefixes. You will want to include them while working with CSS animations and @keyframes. In doing so, the animation will render properly within supported browsers.

For example, the widthAni animation for .clss-1 would have vendor prefixes like this:

@-webkit-keyframes widthAni {
 0% {
   -webkit-transform: translate(-30%, 0) scaleX(0);
   transform: translate(-30%, 0) scaleX(0);
 }
 20%, 75% {
   -webkit-transform: translate(0, 0) scaleX(1);
   transform: translate(0, 0) scaleX(1);
 }
 95%, 100% {
   -webkit-transform: translate(-30%, 0) scaleX(0);
   transform: translate(-30%, 0) scaleX(0);
 }
}

@keyframes widthAni {
 0% {
   -webkit-transform: translate(-30%, 0) scaleX(0);
   transform: translate(-30%, 0) scaleX(0);
 }
 20%, 75% {
   -webkit-transform: translate(0, 0) scaleX(1);
   transform: translate(0, 0) scaleX(1);
 }
 95%, 100% {
   -webkit-transform: translate(-30%, 0) scaleX(0);
   transform: translate(-30%, 0) scaleX(0);
 }
}

Conclusion

View it live on the Fullstack Digital homepage, or check out this codepen:

https://medium.com/media/83a7bb92f940c9ed9aaf32cefbbd9083/href

If you’d like to easily build blazing fast websites with flawless layouts, we’re releasing a free visual website builder soon. It’s a great alternative to Wordpress. Sign up for early access below:

https://medium.com/media/14568360bba2410aac2e339538e5a069/href

When I’m not writing, I’m helping businesses go further, faster at Fullstack Digital. We provide digital brand strategy, design, development, and marketing for forward-thinking companies. Check out some of our work here.

How to create an animated logo with SVG and CSS animations was originally published in Fullstack Digital on Medium, where people are continuing the conversation by highlighting and responding to this story.

Creating an animated dashed line background with SVG and CSS

Katherine Kato — Tue, 31 Jul 2018 15:05:08 GMT

In this tutorial I will show you how to create a neat SVG background animation using CSS animation. This pattern was built for the Pancakes Builder landing page. Pancakes is an upcoming free website builder for Hugo, a powerful static site generator.

Creating the SVG

Start off by making a straight line with the tag wrapped in the

The width and height should be to 100% since the SVG will need to be stretched to fit the screen width and height. On , the x1 and x2 values are defined as the horizontal starting and ending points of a line, while y1 and y2 are the vertical starting and ending points. The current values will create a simple, straight line that fills the screen width at 100%.

To create the dashes, we will use the stroke-dasharray property. The first value is the stroke size and the second is the space in between each dash. Let’s use CSS to define the values 66 and 16 to start like so:

line {
  stroke: #f4f4f4;
  stroke-dasharray: 66, 16;
}

Now you should have one simple dashed line. To increase the line stroke weight and give it rounded edges, you can define them with CSS:

line {
  ...
  stroke-width: 10;
  stroke-linecap: round;
  ...
}

Time to create the pattern. Adjust the code in the

With CSS, set the height of

At this point it is just all about calculating how much space for each on each row by changing the y1 and y2 values. Starting from the first having y1 and y2 values of 15, add 25 each time for each row. In this instance, the next few tags would look like the following:

...
      
      
      
...

Keep adding the values until the pattern does not have anymore blank space.

Nesting the

To add the colored area to the pattern, the

And add this to the CSS:

#logo line {
  stroke: #ffd05e;
}

Animating the

Using CSS animations, we can use the stroke-dashoffset property to animate the lines. First, set the to have a value for stroke-dashoffset:

line {
  ...
  stroke-dashoffset: 82;
}

Then create a @keyframes rule and set the stroke-dashoffset to 0:

@keyframes lineMove {
  to {
    stroke-dashoffset: 0;
  }
}

Finally, use the CSS :nth-child selector for the tag. Define them with odd and even values and have the even value play the animation in reverse like this:

line:nth-child(odd) {
  animation: lineMove 2s infinite linear;
}

line:nth-child(even) {
  animation: lineMove 2s infinite linear reverse;
}

Wrapping Up

https://medium.com/media/24a7ea8b734052d3fd6fb23f2bd33718/href

Here is how the SVG code should look when completed:

And the CSS:

svg {
  height: 100vh;
}

line {
  stroke: #f4f4f4;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 66, 16;
  stroke-dashoffset: 82;
}

line:nth-child(odd) {
  animation: lineMove 2s infinite linear;
}

line:nth-child(even) {
  animation: lineMove 2s infinite linear reverse;
}

#logo line {
  stroke: #ffd05e;
}

@keyframes lineMove {
  to {
    stroke-dashoffset: 0;
  }
}

That’s it! This is my first article here on Medium and I wanted to share my process on how I made this SVG line animation background. Referencing the MDN Web Docs and Using SVG with CSS3 and HTML5 (O’Reilly) helped me with understanding and creating this animation.

Creating an animated dashed line background with SVG and CSS was originally published in Fullstack Digital on Medium, where people are continuing the conversation by highlighting and responding to this story.