Changelog

Now you will find a new class in ScrollTrigger animations called fa–text-reveal, this text animation does not affect SEO and accessibility because it does not break words or characters.

This class also has its modifiers: start, end, from and to.

Now you can find 3 new mouse animations: https://fancyanimations.com/mouse/

Now you can create your own ScrollTrigger animations with the FA Framework. You just need to know a bit of CSS and creativity.

Now you can find a class called:

fa--custom

To control the custom animation you can use the variable:

var(–-fa--scroll--custom)

This variable returns values from 0 to 1, the value will also depend on the modifiers.

This opens up the possibilities to use various animations with transforms, e.g:

transform: translateX(calc(var(--fa-scroll--custom) * -100%)) scale(var(--fa-scroll--custom))

This update introduces ScrollTrigger animations. It is the first ScrollTrigger animation system that does not use GSAP or experimental CSS.

FA2.0. It is now much more flexible and allows you to manipulate animations more freely.

FA2.0 animations are based on CSS and an ultra-lightweight script that weighs less than 1Kb, this ensures that the performance impact is almost zero.

FA2.0 animations also support CSS optimization, the output CSS will have only the animations used in your website.

Advantages of FA2.0:

• Unlike libraries like GSAP that use a 70kb + 40kb script for the ScrollTrigger module, FA2.0 uses an ultra-lightweight script of less than 1kb.
• Unlike JS-based animation libraries, FA2.0 does all calculations with CSS and renders before loading the page and not after, further improving load times.
• FA2.0 does not use experimental CSS like scroll-timeline, this guarantees high browser compatibility.

If you want to see the full potential of FA2.0 you need to watch the tutorials:

Custom cursor has arrived at Fancy Animations, this cursor doesn’t use external libraries either, it uses an ultra light script and CSS.

Some browsers on mobile devices save the page cache and when you click on the back button it does not reload the JS, this meant that the page transition animation never disappeared.

Fixed some bugs that affected the GoogleSpeed Insights score.

The most important new feature of this update is the page transitions. Other plugins use GSAP, barbara.js or Swup, these libraries will easily add 100kb of JS to your website.

Fancy Animations page transitions use their own native script with Vanilla JS that weighs less than 2kb, and a CSS that weighs less than 1kb. This ensures that it does not affect the loading times of your website unlike other plugins.

Animations are now slider compatible, the big new feature is that you can use the same scroll animations, so Fancy Animations doesn’t have to add extra CSS.

Demo: https://fancyanimations.com/sliders/

Some user requests in the roadmap have been implemented.