Rotating Elements (Exportable Copy)

Rotating Elements

Turn it uuuup!
You can choose any block to rotate. When you hover over the element it will pause its rotation.

 

1. Image Block

Add a new image block to where you want the rotated element to be.
You can add as many images as you like and use the code multiple times throughout your site.

 

2. Inspect Element

Open your your Dev Tool (Command+Shift+C) and look for the block-yui ID for the parent div containing the image

For example:

 

3. Custom CSS

  • Paste Custom CSS code below under Design > Custom CSS

  • Replace #blockID in the Custom CSS with the #block-yui you copied from Step 2.
    Example: #block-yui_3_17_2_1_1638382945834_2089

  • Save and Refresh the page

#blockID img {
      /* Animation Duration: 1s is very fast, 30s is slow */
      animation-duration: 15s;
      /* Animation Direction: Choose "normal" for clockwise, "reverse" for counterclockwise, and "alternate" to alternate directions */
      animation-direction: normal;
      /* Animation Iteration: Choose "infinite" to rotate forever, choose a number "n" to rotate n times */
      animation-iteration-count: infinite;
      /* Animation Timing: Choose "linear" to rotate at the same rate throughout, choose "ease-in-out" to slow down at beginning and end of rotation */
      animation-timing-function: linear;
      /* Animation Delay: Specify time after pageload before animation starts */
      animation-delay: 0ms;
      animation-name: ilcTurn;
      max-width: 100%;
    }

  #blockID:hover img,
  #blockID:focus img {
      /* Play State: "paused" to pause when you hover, "running" to keep on rotating */
      animation-play-state: paused;
    }

  @keyframes ilcTurn {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

💡 If you want to show this effect multiple times on one page, you don't need to duplicate @keyframes ilcTurn. Just duplicate the sections that start with #blockID

 

4. Customizations & How it Works

Change the effect speed, delay, easing function, and direction following the comments in the CSS below:

  • The @keyframes section defines an animation named ilcTurn that rotates elements clockwise by 360º.

  • For each #blockID, we select an img tag inside and specify that it should use animation-name: ilcTurn;. This is how we link the image to the keyframe animation. We can link the same keyframe to multiple elements just by adding animation-name !

CSS Animation has tons of configuration options:

  • animation-duration specifies how long it takes to complete one keyframe cycle (ie. a single 360º rotation)

  • animation-direction defines whether the keyframe animates forwards (normal) or backwards (reverse). We're using this to manipulate the ilcTurn animation to go clockwise or counterclockwise without repeating code.

  • animation-iteration-count defines how many times the ilcTurn animation repeats. By saying infinite, it will rotate endlessly. You can also write a digit such as 1 or 2 and the animation will stop after 1 cycle or 2 cycles, respectively.

  • animation-timing-function defines the rate of rotation throughout one cycle. Linear means going at the same rate throughout, while other functions like ease-in-out will slow down the animation at the beginning and end of the cycle. More info here

  • animation-delay defines the time before your animation starts. Sometimes, you might want to stagger your rotation if you have many on a page. This way, you can specify different start times for each animation.

  • animation-play-state defines whether the animation is paused or running. We've used this on the :hover and :focus state to pause the animation when the cursor touches a block (or on mobile phones, when the viewer taps the block).

Code SnippetsCristina Tioseco