If you're curious to know about the proper usage of CSS Utility Classes in Oxygen Builder, then this post will definitely guide you as you can find all the utility classes & their purposes that I'm using on my websites.
Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.
However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.
Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.
Feel free to explore our Legal Policy Pages.
Also, check out our other similar posts about:
Animate on scroll library to reveal animations when you scroll, it allows you to animate elements as you scroll up and down. If you scroll back to the top then the elements will animate to their prior state and are ready to animate again if you scroll down.
barba.js is a small (4.4kb minified and gzipped), flexible, and dependency-free library that helps you creating fluid and smooth transitions between your website's pages. It helps to reduce the delay between your pages, minimizing browser HTTP requests, and enhancing your user's web experience.
Chocolat.js enables you to display one or several images staying on the same page. The choice is left to the user to group together a series of pictures as a link or let them appear as thumbnails. The viewer may appear full-page or in a block.
Lightbox is free to use in both commercial and non-commercial work but the Attribution is required which means you must leave the developer's name, the homepage link, and the license info intact. None of these items have to be user-facing and can remain within the code.
Locomotive Scroll is a simple scroll library that provides detection of elements in the viewport and smooth scrolling with parallax. A scroll library used by developers at Locomotive.
Built as a layer on top of ayamflow's virtual scroll, it provides smooth scrolling with support for parallax effects, toggling classes, and triggering event listeners when elements are in the viewport.
The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
Using mo.js on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.
Touch-enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Owl Carousel has been chosen as the number one jQuery plugin by hundreds of developers.
It contains features including fully customizable, touch and drags support, fully responsive, modern browsers as well as zombie browsers support, modules, and plugins.
simpleParallax.js is a very simple and tiny Vanilla JS library that adds parallax animations to any image.
Where it may be laborious to get results through other plugins, simpleParallax.js stands out for its ease and its visual rendering. The parallax effect is directly applied to image tags, there is no need to use background images.
Slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping, and much more!
It has features including fully responsive to scales with its container, separate settings per breakpoint, uses CSS3 when available, and fully functional when not, swipe enabled or disabled if you prefer, desktop mouse dragging, infinite looping, fully accessible with arrow key navigation, add, remove, filter & unfilter slides, autoplay, dots, arrows, callbacks, etc...
It is a simple slider meeting various demands, even thumbnails, nested slider o vertical direction inspired by slick, Swiper, and Glide.
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
It is not compatible with all platforms, it is a modern touch slider that is focused only on modern apps/platforms to bring the best experience and simplicity.
Swiper, along with other great components, is a part of Framework7 - a fully-featured framework for building iOS & Android apps. Swiper is also a default slider component in the Ionic Framework.
The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current build only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.
Tilt.js is a tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery. It is a lightweight jQuery library that allows you to create simple tilt effects on hover without taking much load time.
tsParticles is a lightweight library for creating particles, an improved version of the abandoned and obsolete particles.js. A TypeScript library for creating particles that is dependency-free, browser-ready, and compatible with React, Vue, Angular, Svelte, jQuery, Preact, Inferno.
Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.
Reveal Animations When You Scroll. Very Animate.css Friend Easily customize animation settings: style, delay, length, offset, iterations… 100% MIT Licensed, not GPL. Keep your code yours. ES2015+, naturally Caffeine free.
I believe you found this resource list helpful so I would ask you for a favor, please spread the word and share it with your friends, colleagues, and community to make them aware of this awesome resource list.
Also if you want to ASK or SAY something around this topic then feel free to share your thoughts in the comment box below and add some extra value for the readers and the community.
Thanks for visiting our website SyncWin.com.
If you are a Web Designer/Developer who loves playing with CSS Animations but don't have enough time to write them from scratch thus looking for some ready-to-use CSS Animation Builders (especially Libraries) then this list post is going to be your final destination.