Blog
Guides to web animation
How scroll, text and hover animations work, with code when you want it and the panel when you don’t. Every guide shows how to do it in Bricks.
Entrance animations
Animate on scroll with CSS: fade-in, reveal masks and the difference between transitions and animations
How to animate on scroll with CSS: fade-in, slide-in, mask and circle reveals, transitions vs animations, and the no-code version in Bricks.
6 min read
Hover animations
CSS hover effects: how to add hover animations to images, buttons, links and menus, with Bricks examples
CSS hover effects with copy-paste code: text on image hover, button hovers, underline link effects, menu hovers, and the one-class version in Bricks.
5 min read
Scroll animations
Smooth scroll in JavaScript: scroll-behavior, scrollTo, Lenis vs Locomotive, and how to avoid scrolljacking
Smooth scroll in CSS and JavaScript: scroll-behavior, scrollTo and scrollTop, then Lenis vs Locomotive and how to add inertia without hijacking the scroll.
6 min readWhich scroll animation library should you use? GSAP ScrollTrigger, AOS, ScrollMagic and Motion compared, plus a no-code option for WordPress
Scroll animation libraries compared by weight, features and effort: GSAP ScrollTrigger, AOS, ScrollMagic, Motion — and when you do not need one at all.
5 min readScroll animations with CSS and JavaScript: how a CSS scroll animation works, with or without a script
How scroll animations work in CSS and JavaScript: scroll-timeline, IntersectionObserver, SVG on scroll, and what you can skip by setting them in Bricks instead.
7 min readParallax scrolling in WordPress without GSAP: the parallax effect with a from/to scroll animation
Parallax effect examples and how to build parallax scrolling in WordPress with a CSS scroll animation, no GSAP: images, backgrounds and layers. Read on.
6 min readScroll website examples: scrolling effects you can inspect live, and the types of scrolling explained
Scrolling website examples you can inspect live: sticky scenes, stacked cards, horizontal scroll, video scrub and parallax, built in Bricks. See them.
6 min read
Text animations
Text animation examples: text change animation, kinetic typography, flip, loading and typewriter effects, with and without JavaScript
Text animation examples for websites, not video: text change, kinetic typography, flip and typewriter, with and without JavaScript, plus a Bricks demo.
7 min read
Add Bricks Builder animations to your next site
From $179, one payment, every update for life. 14-day refund.