Freakishly fun is the only way to describe our new Blobs tool! Create animated backdrops that morph and rotate, acting as accents and attention getters.
The Animated Divider tool allows us top add a pop of interest to our pages. Call attention to a section of content or just accent a header or some text. This tool is easy to use, but provides a great way to spice up our page design.
In this example we created one large animated Blob backdrop with a Card centered on top of it. We've layered two Blobs here with their positioning settings as well as played with some color translucency for more depth.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Here we've built a smaller Blob backdrop inside of a column. This time instead of layering two Blobs we're using just a single animated blob behind out content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.
We're using Blob in a similar way here, as we did in Example Two, but instead of an amiated element we've made it a static decorative backdrop.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat.
Big or small, animated or static, there's no denying that this new tool really is out of this world. We think it will compliment the other tools in your Foundry toolbox. You can even pair it with other animation tools like Alchemy.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
When enabled you're provided an area to add other tools and content within the Blobs tool. This allows you to layer content in and on top of the decorative Blobs.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Allows you to choose from a variety of preset blob shapes and sizes. This helps provide variety, especially when layering multiple blob child tools on top of one another.
Here you can choose the style of the Blob itself. You're able to choose from one of Foundry's preset colors, which are defined in the Control Center's color palette settings, or choose either a custom solid color. When using a custom solid color you'll be presented with a color picker for defining the color.
Allows you to choose whether a blob will be positioned using CSS' Relative or Absolute positioning. These are used for layering blobs together. In order to layer one blob on top of another you will always need at least one blob child item to be Relatively positioned and it should be the first one in the list of blobs.
Here you can decide whether you want this blob to be animated or not.
When animation is enabled, this feature lets you choose whether you want the blob to rotate in addition to its normal deformation animation.
When using the Rotate Blob option you are able to choose whether you wish for the blob to ganerally rotate clockwise or counter-clockwise. The deformation of the blob can slightly alter this.
The amount of time it takes for a full loop of the animation to take place. This includes rotation and deformation. A larger time equals a longer and slower animation.
This is a multipplier that affects the amount of deformation or skewing that is imparted on the blob. Try various amounts to get the look you're after.
This setting allows you to choose the z-index layer for this particular blob child item. This is used for layering blobs on top of one another.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.