Animations with css

Feature Requests
1

Scroll animations with CSS
The goal of this Topic is to be able to add on scroll animations (when detecting the View Port) without worrying about performance. It is an alternative for those projects where performance is important and you want to add animations.

Bricks interactions use JS for the animations and load a library, another thing I didn’t like is that it adds a lot of junk code to the HTML and increases the size of the DOM, it also doesn’t allow to combine animations.

Also bricksforge may be complex to add simple animations, and although Gsap is light it affects the performance of the web. So BRF can be used for advanced animations.

So being able to add animations easily, not to take too much time, not to affect the performance of the web and not to add elements to the HTML.

2

One way or another you’re gonna need at least a little js to detect whether an element is in the viewport, and if so add a class which you can add css animations to.

There seems to even be a plugin for it → Change class in viewport: create animations with pure CSS – WordPress plugin | WordPress.org

Or with just a lil sprinkle of JS like so → https://www.ja.do/en/when-is-an-element-in-the-viewport/

Personally, I agree that something simple like a fade-in on enter is easier and lighter with just pure css. As soon as it gets a little more complex though, it quickly becomes a headache to organize all your keyframe animations and time them correctly.

Compatibility is another thing to consider. GSAP works pretty consistently across all browsers and even in pretty old versions of each browser.

Also I’m pretty sure GSAP can put most of it’s load on the gpu of a pc these days which makes the animations themselves perform better (higher fps etc). don’t quote me on that though, been a while since I looked into it.

Pure css (again, not talking about just a fade-in), will need to be tested more thoroughly and you’ll have to prefix everything. Case in point, try adding transform: rotate(45deg); without any vendor prefixes and then look at it in Safari. Using something like https://animate.style/ would probably remove most of those issues.

Long story short, if you want pure css animations, the lightest most performant way would be to implement it yourself so there is no boilerplate or any other bloat. Just needs a few lines of JS anyway :slight_smile:

2 Likes