Check out the new FA UI V.2.4.3

Check video

Changelog

Welcome to the changelog for the latest updates on our plugin! In this section, you'll find detailed information about the newest features, enhancements, and bug fixes that have been implemented.

2.5.2

Entrance animations UI

YouTube video

Now, when you select an element, you’ll find the “Entrance Animations” option in the Style tab.

The class-based system is still available for advanced users, but this new interface is much more user-friendly, especially for those unfamiliar with working with classes.

You can disable animations for individual elements through the interface, or, disable them globally from the plugin settings.

Animations now use the ease timing function for smoother transitions. If you want an elastic or bounce effect, you can enable the Elastic timing-function for a more dynamic feel.

Now infinite loop works without adding fade when restarting the animation.

All attributes of scrollTrigger animations are now rendered in the optimized CSS.

2.4.3

Awwwards Animations

I’m excited to share the final update of the year for Fancy Animations! While it’s not a plugin update, this release will help you discover the full potential of Fancy Animations.

🎥 First, watch this video:

YouTube video

In this video, I explain how to use the “parent” and “get parent” options, which are essential for this release.

🆕 What’s new?
I’ve created a collection of templates featuring Awwwards-style animations. These templates will help you deeply understand how to create this type of animation and practice building your own.

When FA was first launched, it only included entry animations. However, it has grown significantly, adding key features like ScrollTrigger Animations, allowing you to create scroll-based animations without GSAP and without impacting your website’s loading times.

Although this feature has been available for a while, it was originally aimed at advanced users who work with classes. But with version V2.4.3, it’s now much more accessible for everyone. With these new templates, I’m confident you’ll stop seeing FA as just a simple animation plugin and start exploring its full potential.

I hope you enjoy this release and feel inspired to create even more amazing animations.

I’ve created a collection of templates featuring Awwwards-style animations. These templates will help you deeply understand how to create this type of animation and practice building your own.

2.4.3

ScrollTrigger UI

Enjoy a new graphical interface that makes scroll trigger animations easier than ever. Customize animations with intuitive controls for start, end, from, and to. Plus, options to reverse animations, disable them on mobile devices, and more.

YouTube video

Find the new option in the element style tab.

You can now add a span with classes to style your text without being affected by the ScrolllTrigger TextReveal animation.

2.3.2

Compatibility with Bricks Ajax filters

Now the entrance animations work with Bricks filters, at the end of the filter ajax request the animations will restart again, this will make your filters more attractive.

Now the animations are restarted when filtering, I recommend adding the no delay class for a better experience.

2.3.1

Bug fixes

Fixed a bug that prevented animations from running in the editor when text animations were disabled.

2.3.0

Text Animations

Our text animations are not only visually stunning, they are also optimized for performance. With a lightweight script of just 1.2K, these animations keep a clean DOM structure without breaking accessibility and without compromising speed.

YouTube video

You must enable “Text animations” in the plugin settings for the classes to work.

2.2.5

Text reveal – ScrollTrigger

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 will find a new class in ScrollTrigger animations called fa–text-reveal. This class also has its modifiers: start, end, from and to.

Now the loading text is no longer blocked for a single line, some users used to place a long text that overflowed on mobile.

It ensures that if a user comes from a previous version 2.0 this setting is added to the refactoring of the database.

2.2.2

Mouse animations

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

Mouse animations Bricks builder

Now you will find 3 new mouse animations, you must enable them from the plugin settings.

Performance has been improved for the new animations, a bug that caused the animations to freeze when there were many listening events has been fixed.

2.1.1

Custom animations

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))
YouTube video

Now you can create your own ScrollTrigger animations.

Page transitions now work fine when body is not full width

2.0

FA2.0 – ScrollTrigger Animations

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:

YouTube video
YouTube video
YouTube video

The new FA2.0 animation system. The entrance animations were not replaced by the ScrollTrigger animations, don’t worry.

From V2.0 onwards you will no longer have to deactivate and activate the plugin to load the new animations with each update.