How to add CSS keyframes or animation libraries with custom code

In TeleportHQ, you add your own CSS animation in two parts. First, click the Project settings cog at the bottom of the left sidebar, open Custom code, and paste the animation's @keyframes inside a <style> tag under Head. The code saves as you type. Then select an element and, in the right panel's Advanced tab, add an animation property that uses the animation's name. Custom code plays in Preview and on your published site, not on the editor canvas.

Before you start#

• This is for people comfortable with CSS. For animations without code, see Which animation options does TeleportHQ have?
• You need permission to change project settings.
• Custom code isn't limited by plan.

1. Add your keyframes#

1. In the editor, at the bottom of the left sidebar, click the Project settings cog. The Project settings panel opens.
2. Under Data & code, click Custom code. A drawer opens next to the panel.
3. Under Custom code, click Head.

4. Paste your animation inside a <style> tag. For example:

   <style>
     @keyframes softPulse {
       0% { transform: scale(1); }
       50% { transform: scale(1.05); }
       100% { transform: scale(1); }
     }
   </style>

The drawer has no save button: TeleportHQ saves the code by itself while you type. Close the drawer with the X at its top right when you're done.

2. Use the animation on an element#

1. Go back to the canvas and select the element. For example, an Order now button.
2. In the right panel, open the Advanced tab.
3. In the empty row, type animation in the property field.
4. Type softPulse 2s infinite in the value field.
5. Click + to add the row.

To reuse the animation on many elements, add the same animation property to a CSS class instead, in the class's Properties. See How to edit a CSS class.

Add an animation library#

To load another library, such as a scroll-animation script, paste its <link> or <script> tag from the library's documentation into Head (or Body for scripts that should load last). Follow the library's own instructions for the class names or attributes it needs.

To give an element a class name that a library asks for, for example animate__animated:

1. Select the element, for example the Order now button.
2. In the right panel, open the Visual tab and find the Classes section.
3. Click in Type to search or create new class, type the class name, for example animate__animated, and press Enter.
4. The Create class panel opens. Turn off Extract element styles: the element keeps its own styles, and the class stays empty.

Repeat for each class name the library needs, for example animate__bounce. TeleportHQ keeps an empty class on the element in Preview and on your published site, so the library finds it.

Check that it worked#

Custom code doesn't run on the TeleportHQ canvas, so the element stays still while you edit. Open Preview to see the animation, or publish your site and open it. See How to preview your site before publishing.

Troubleshooting#

The animation doesn't play in Preview or on my published site Check that the name in the animation value matches the @keyframes name exactly, including capital letters. Then check that the <style> tag is in Head. After a change, click Update Preview in the preview tab, or publish again.

My site looks broken after adding code The Custom code drawer warns: "WARNING: Invalid code added here might break your website." Remove the code you added, then publish again. Add it back one piece at a time.

Good to know#

• Code in Head is added to every page of your site.
• Visitors who turn on "reduce motion" on their device still see your own animations, unless you add a prefers-reduced-motion rule to your CSS yourself. See What do visitors who turn on reduced motion see?
• For custom fonts, don't use custom code. Use Fonts in Project settings. See How to upload your own fonts.