Animation Librarys and Sage Help

sage
,
1

Hey so I am trying to use the animate.css library and it doesn’t seem to work at all. Does anyone know if it works on sage or what animation library I can use that will work?

2

Hey,

But what exactly doesn’t work?
Do you have some errors after import styles / modules of package?

3

There are no errors when importing its just simply I apply the classes after running the npm i to install the package then I import it in my js file and I don’t see any animations at all when i reload the page.

4

I’ve checked right now, and it works properly.

Could you show how you import animate.css?

5 
import {domReady} from '@roots/sage/client';
import './slideshow';
import './modalController';
import './projectCategoriesController';
import 'animate.css';


// Flowbite Tailwind CSS Framework
// import 'flowbite';
// React
// import React from 'react';
// import ReactRenderer from './ReactRender/ReactRenderer';



/**
 * app.main
 */
const main = async (err) => {
  if (err) {
    // handle hmr errors
    console.error(err);
  }

};

/**
 * Initialize
 *
 * @see https://webpack.js.org/api/hot-module-replacement
 */
domReady(main);
import.meta.webpackHot?.accept(main);
6

Let’s try to import it in app.css after @import ‘tailwindcss/base’;

As below

@import 'tailwindcss/base';

// your style
@import 'animate.css';

@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
7

Yeah it still doesn’t seem to work

8

Check twice your html elements, and console, maybe you missing something.
Actually this package import only styles classes there shouldn’t be any conflict between animate css and Sage.

9

Have you rebuilt your assets after installing? Does the CSS from animate.css appear in your built assets?