• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Tutorial A Guide to Animations using CSS Transitions and BBscript

Alteras

Alteras

The Sleepy Prisoner
Administrator
Supporter
[class=GuideBox] width: 220px; height: auto; background-color: #308FDB; color: #F8F8F7; padding: 15px; text-align: left; flex: 0 auto; [/class] [class=selection] transition: all .5s ease-in-out; display: block; margin-top: .5em; color: #F8F8F7; [/class] [class name=selection state=hover] color: #FFCB29; [/class]
[div class=GuideBox]Navigation:
[/div]
Introduction

This is a tutorial to create animations using CSS Transitions and BBscript. You've probably seen several examples already, whether this be expanding text on hover or spinning text. This guide will cover CSS Transition and using BBscript for Animations. As CSS transitions require the use of Classes, it is recommended that you understand how to make and use them. A wonderful guide has already been made that is highly recommended. While this guide does cover it, there already exists a quick and simple guide explaining how to create hover effects here. This guide will be written under the assumption that the reader has a proper understanding of classes. Feel free to ask questions if I didn't explain something well.

Here are two really easy examples of CSS Transitions in action:

[div class=expandLetterSpaceEx]Text Example

[class=expandLetterSpaceEx] width: auto; padding: 5px; border: 3px solid SkyBlue; background-color: white; display: inline; color: black; transition: all .5s ease-in-out; [/class] [class name=expandLetterSpaceEx state=hover] letter-spacing: 5px; color: #e20000; [/class]
[div class=ExampleContainerSpinning][div class=SpinningExample][/div][/div]
[class=ExampleContainerSpinning] width: 100px; height: 100px; border: 2px solid black; position: relative; overflow: hidden; background: white; [/class] [class=SpinningExample] width: 25px; height: 25px; background: red; position: absolute; top: 5px; left: 5px; transform-origin: 50% 50%; transition: all 3s ease-in-out; [/class] [class=SpinningExampleOn] transform: rotate(720deg); top: 50px; left: 50px; width: 50px; height: 50px; [/class] [script class=ExampleContainerSpinning on=mouseenter] addClass SpinningExampleOn SpinningExample [/script] [script class=ExampleContainerSpinning on=mouseleave] removeClass SpinningExampleOn SpinningExample [/script]

[/div][/div]
 
Last edited:
[class=GuideBox] width: 220px; height: auto; background-color: #308FDB; color: #F8F8F7; padding: 15px; text-align: left; flex: 0 auto; [/class] [class=selection] transition: all .5s ease-in-out; display: block; margin-top: .5em; color: #F8F8F7; [/class] [class name=selection state=hover] color: #FFCB29; [/class]
[div class=GuideBox]Navigation:
[/div]
CSS Hover Classes

In order to make animations, we will be using classes and class state. It is highly recommended that you are familiar with classes before proceeding. Here is a great guide: Tutorial - A Beginner's Guide To Classes. Likewise, there already exists a quick guide to everything I'll be explaining in this section: Resource - w o e n o !.

There are two ways classes are defined, one without any states and one with states. Primarily, you'll only be using the state "hover." Here is a quick example:

[div class=Example1_1]Hover Over Me

[class=Example1_1] border: 2px solid black; padding: 5px; display: inline; [/class] [class name=Example1_1 state=hover] border-color: red; color: red; [/class]
Code: 
[div class=Example1_1]Hover Over Me[/div]

[nobr]
[class=Example1_1]
border: 2px solid black;
padding: 5px;
display: inline;
[/class]

[class name=Example1_1 state=hover]
border-color: red;
color: red;
[/class]
[/nobr]

As you can see, both classes have the same identifier name for one div, but both have different values. But because the second one has a state condition of hover, it is only used when you hover over the text. Also, when the class gets used, it overrides whatever properties it needs to replace with its own, making the text red and the border red. However, it'll leave all the other stuff alone. There are two other states that a class can have, active and focus. For the purposes of this guide, we'll only be concerned with hover and classes with no state. If you have two classes with the same identifier name and no state on either one, it will only use the properties that was last made in the code.

[div class=Example1_2]I have only the second Class[/div]
[class=Example1_2] border: 2px solid red; display: inline; padding: 5px; color: blue; [/class] [class=Example1_2] color: red; [/class]
Code: 
[div class=Example1_2]I have only the second Class[/div]
[nobr]

[class=Example1_2]
border: 2px solid red;
display: inline;
padding: 5px;
color: blue;
[/class]

[class=Example1_2]
color: red;
[/class]
[/nobr]

So this means that you can't just make a ton of classes all with the same name without any states. This is also true with classes with states.

[div class=Example1_3]I have only the second hover class[/div]
[class=Example1_3] display: inline; padding: 5px; [/class] [class name=Example1_3 state=hover] border: 2px solid red; [/class] [class name=Example1_3 state=hover] color: red; [/class]
Code: 
[div class=Example1_3]Hover over me. I have only the second hover class[/div]
[nobr]

[class=Example1_3]
display: inline;
padding: 5px;
[/class]

[class name=Example1_3 state=hover]
border: 2px solid red;
color: blue;
[/class]

[class name=Example1_3 state=hover]
color: red;
[/class]
[/nobr]

As you can see, you can create classes that change the look of a div at an action. However if we apply this to fancier stuff, like making things larger or spread out, it won't have a nice animation.

[div class=Example2_1]Text Example[/div] [class=Example2_1] width: auto; padding: 5px; border: 3px solid SkyBlue; background-color: white; display: inline; color: black; [/class] [class name=Example2_1 state=hover] letter-spacing: 5px; color: #e20000; [/class]
Code: 
[div class=Example2_1][size=6]Text Example[/size][/div]
[nobr]

[class=Example2_1]
width: auto;
padding: 5px;
border: 3px solid SkyBlue;
background-color: white;
display: inline;
color: black;
[/class]

[class name=Example2_1 state=hover]
letter-spacing: 5px;
color: #e20000;
[/class]

[/nobr]

The way we get nice animations is to use the CSS property transition. The transition property has 2 required values, 2 optional values, and the ability to use multiple transitions in one. The two required values is the property being changed and the timing for how long the duration of the transition is. The optional values are how the timing for it is perform and if there's a delay to it or not.

So let's take our previous example make it so that it transitions from black to red in the span of 1 second.

[div class=Example2_2]Text Example[/div] [class=Example2_2] width: auto; padding: 5px; border: 3px solid SkyBlue; background-color: white; display: inline; color: black; transition: color 1s; [/class] [class name=Example2_2 state=hover] letter-spacing: 5px; color: #e20000; [/class]
Code: 
[div class=Example2_2][size=6]Text Example[/size][/div][nobr]

[class=Example2_2]
width: auto;
padding: 5px;
border: 3px solid SkyBlue;
background-color: white;
display: inline;
color: black;
transition: color 1s;
[/class]

[class name=Example2_2 state=hover]
letter-spacing: 5px;
color: #e20000;
[/class]
[/nobr]
To make the letter spacing also change smoothly, we just have to add it into the transition property with a comma. Let's make the letter spacing take 2 seconds.

[div class=Example2_3]Text Example[/div] [class=Example2_3] width: auto; padding: 5px; border: 3px solid SkyBlue; background-color: white; display: inline; color: black; transition: letter-spacing 2s; [/class] [class name=Example2_3 state=hover] letter-spacing: 5px; color: #e20000; [/class]
Code: 
[div class=Example2_3][size=6]Text Example[/size][/div][nobr]

[class=Example2_3]
width: auto;
padding: 5px;
border: 3px solid SkyBlue;
background-color: white;
display: inline;
color: black;
transition: letter-spacing 2s;
[/class]

[class name=Example2_3 state=hover]
letter-spacing: 5px;
color: #e20000;
[/class]
[/nobr]

As you can see, just by adding the transition property to the main class, it will handle transitions to and from its states. If we add transitions to only the class with the hover, the animation will only occur when it is hovered, and there won't be any smooth transitions back out.
[/div][/div]
 
Last edited:
[class=GuideBox] width: 220px; height: auto; background-color: #308FDB; color: #F8F8F7; padding: 15px; text-align: left; flex: 0 auto; [/class] [class=selection] transition: all .5s ease-in-out; display: block; margin-top: .5em; color: #F8F8F7; [/class] [class name=selection state=hover] color: #FFCB29; [/class]
[div class=GuideBox]Navigation:
[/div]
CSS Transitions

The transition property is needed to achieve smooth transitions. It is inserted inside a class as a property and is made up of four parts, the property being animated, the time duration of the animation, the timing function of the animation, and the delay before animation. Timing function and delay are both optional, only property and duration are required.

Code: 
transition: [property] [duration] [timing function] [delay] ;

The properties that can be animated are listed here: Animatable CSS properties.

Here is a quick example using only property and duration values:

[div class=Example1_1]Hover over me
[class=Example1_1] width: auto; padding: 5px; border: 3px solid SkyBlue; background-color: white; display: inline; color: black; transition: color 2s; [/class] [class name=Example1_1 state=hover] color: #e20000; [/class]
Code: 
[div class=Example1_1][size=6]Hover over me[/size][/div]
[nobr]

[class=Example1_1]
width: auto;
padding: 5px;
border: 3px solid SkyBlue;
background-color: white;
display: inline;
color: black;
transition: color 2s;
[/class]

[class name=Example1_1 state=hover]
color: #e20000;
[/class]

[/nobr]

Durations can be defined in seconds (#s) or milliseconds (#ms), where 1s = 1000ms. Decimals may be used for both units. If a duration is not provided or is 0s/0ms, it will not perform the animation and will instead perform the change in state instantaneously. A negative time value is invalid and will nullify the declaration.

The timing function dictates how an animation is perform, whether it starts off slow and get faster toward the end, or starts fasts, ends slowly, etc. This is an optional property, and by default, it will use an ease timing function. The full list of timing functions can be found here: transition-timing-function. Here is a quick comparison between ease, ease-in, ease-out, and ease-in-out, four commonly used timing functions.
[div class=flexier][div class=flexing]
ease
[div class=Example1_2Container][div class=Example1_2ease][/div][/div]transition: all 3s ease;​
[/div][div class=flexing]
ease-in
[div class=Example1_2Container][div class=Example1_2easeIn][/div][/div]transition: all 3s ease-in;​
[/div][div class=flexing]
ease-out
[div class=Example1_2Container][div class=Example1_2easeOut][/div][/div]transition: all 3s ease-out;​
[/div][div class=flexing]
ease-in-out
[div class=Example1_2Container][div class=Example1_2easeInOut][/div][/div]transition: all 3s ease-in-out;​
[/div][/div] [class=flexier] display: flex; flex-flow: row wrap; justify-content: center; [/class] [class=flexing] flex: 0 0 auto; margin: 3px; padding: 5px; width: 200px; [/class] [class=Example1_2Container] width: 100px; height: 100px; border: 2px solid black; position: relative; margin: 0 auto; overflow: hidden; background: white; [/class] [class=Example1_2easeInOut] width: 25px; height: 25px; background: red; position: absolute; top: 5px; left: 5px; transform-origin: 50% 50%; transition: all 3s ease-in-out; [/class] [class=Example1_2ease] width: 25px; height: 25px; background: red; position: absolute; top: 5px; left: 5px; transform-origin: 50% 50%; transition: all 3s ease; [/class] [class=Example1_2easeIn] width: 25px; height: 25px; background: red; position: absolute; top: 5px; left: 5px; transform-origin: 50% 50%; transition: all 3s ease-in; [/class] [class=Example1_2easeOut] width: 25px; height: 25px; background: red; position: absolute; top: 5px; left: 5px; transform-origin: 50% 50%; transition: all 3s ease-out; [/class] [class=SpinningOn1_2] transform: rotate(720deg); top: 50px; left: 50px; width: 50px; height: 50px; [/class] [script class=Example1_2Container on=mouseenter] addClass SpinningOn1_2 Example1_2easeInOut addClass SpinningOn1_2 Example1_2ease addClass SpinningOn1_2 Example1_2easeIn addClass SpinningOn1_2 Example1_2easeOut [/script] [script class=Example1_2Container on=mouseleave] removeClass SpinningOn1_2 Example1_2easeInOut removeClass SpinningOn1_2 Example1_2ease removeClass SpinningOn1_2 Example1_2easeIn removeClass SpinningOn1_2 Example1_2easeOut [/script]

Delays are also optional and determine how long to wait until the animation is performed. They use the same time units as duration.
[div class=flexier][div class=flexing]
No Delay
[div class=Example1_3Container][div class=Example1_3_0][/div][/div]transition: all 3s 0s;​
[/div][div class=flexing]
.5s
[div class=Example1_3Container][div class=Example1_3_5][/div][/div]transition: all 3s 0.5s;​
[/div][div class=flexing]
1s
[div class=Example1_3Container][div class=Example1_3_1][/div][/div]transition: all 3s 1s;​
[/div][div class=flexing]
2s
[div class=Example1_3Container][div class=Example1_3_2][/div][/div]transition: all 3s 2s;​
[/div][/div] [class=Example1_3Container] width: 100px; height: 100px; border: 2px solid black; position: relative; overflow: hidden; margin: 0 auto; background: white; [/class] [class=Example1_3_0] width: 25px; height: 25px; background: red; position: absolute; top: 5px; left: 5px; transform-origin: 50% 50%; transition: all 3s 0s; [/class] [class=Example1_3_5] width: 25px; height: 25px; background: red; position: absolute; top: 5px; left: 5px; transform-origin: 50% 50%; transition: all 3s 0.5s; [/class] [class=Example1_3_1] width: 25px; height: 25px; background: red; position: absolute; top: 5px; left: 5px; transform-origin: 50% 50%; transition: all 3s ease 1s; [/class] [class=Example1_3_2] width: 25px; height: 25px; background: red; position: absolute; top: 5px; left: 5px; transform-origin: 50% 50%; transition: all 3s 2s; [/class] [class=SpinningOn1_3] transform: rotate(720deg); top: 50px; left: 50px; width: 50px; height: 50px; [/class] [script class=Example1_3Container on=mouseenter] addClass SpinningOn1_3 Example1_3_1 addClass SpinningOn1_3 Example1_3_0 addClass SpinningOn1_3 Example1_3_5 addClass SpinningOn1_3 Example1_3_2 [/script] [script class=Example1_3Container on=mouseleave] removeClass SpinningOn1_3 Example1_3_0 removeClass SpinningOn1_3 Example1_3_5 removeClass SpinningOn1_3 Example1_3_1 removeClass SpinningOn1_3 Example1_3_2 [/script]

You can also chain together multiple animations, each with their own duration, timing function, and delay, alongside the first with a comma. If you want all animated properties to have the same values, you can use "all" instead for the property name, as seen above.
Code: 
transition: [property 1] [duration 1] [timing function 1] [delay 1] , [property 2] [duration 2] [timing function 2] [delay 2] , ... , [property #] [duration #] [timing function #] [delay #] ;
[/div][/div]
 
Last edited:
[class=GuideBox] width: 220px; height: auto; background-color: #308FDB; color: #F8F8F7; padding: 15px; text-align: left; flex: 0 auto; [/class] [class=selection] transition: all .5s ease-in-out; display: block; margin-top: .5em; color: #F8F8F7; [/class] [class name=selection state=hover] color: #FFCB29; [/class]
[div class=GuideBox]Navigation:
[/div]
Example using CSS Transition

So, while CSS transition alone may feel relegated to being only fancy stuff happening when you hover, you can still do pretty cool stuff. In this section, we will go step by step in making an IC post info tab slide in and out of the side.

Here is what the IC Post looks like without any actions:
[class=ICcontainerExample1] width: 100%; min-height: 400px; position: relative; overflow:hidden; [/class] [class=ICsideExample1] position: absolute; height: 100%; width: 225px; padding: 15px; box-sizing: border-box; color: white; background: #42bff4; transform: translateX( calc(-1* (225px - 15px))); transition: transform .25s ease-in , filter .25s ease-in-out .25s; [/class] [class=tabExample1] background: #42bff4; border-radius: 10px; padding: 25px 3px 30px 3px; right: 0px; top: 0px; box-sizing: border-box; color: white; transform: translateX(50%); position: absolute; [/class] [class=ICcontentExample1] padding-left: 28px; [/class] [div class=ICcontainerExample1][div class=ICsideExample1][div class=tabExample1]
full

Name: Chevalia Traylor
Mood: Didactic
Interactions: None
[div class=ICcontentExample1]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam vitae leo a semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada ligula molestie purus laoreet, eu euismod sapien efficitur. Vestibulum quis lorem vitae nunc malesuada ultricies. Mauris mi lectus, pharetra sed convallis vel, porttitor non nulla. In hac habitasse platea dictumst. Vivamus egestas non ipsum ut mattis. Mauris ac laoreet libero. Nulla porttitor ligula at metus laoreet, quis auctor massa volutpat. Quisque at malesuada ipsum. Phasellus et dolor erat.
[/div][/div]
And here is what we want it to look like when we hover over the tab:
[class=ICcontainerExample2] width: 100%; min-height: 400px; position: relative; overflow:hidden; [/class] [class=ICsideExample2] position: absolute; height: 100%; width: 225px; padding: 15px; box-sizing: border-box; color: white; background: #42bff4; transform: translateX(0px); filter: drop-shadow(0px 0px 5px black); [/class] [class=tabExample2] background: #42bff4; border-radius: 10px; padding: 25px 3px 30px 3px; right: 0px; top: 0px; box-sizing: border-box; color: white; transform: translateX(50%); position: absolute; [/class] [class=ICcontentExample2] padding-left: 28px; [/class] [div class=ICcontainerExample2][div class=ICsideExample2][div class=tabExample2]
full

Name: Chevalia Traylor
Mood: Didactic
Interactions: None
[div class=ICcontentExample2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam vitae leo a semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada ligula molestie purus laoreet, eu euismod sapien efficitur. Vestibulum quis lorem vitae nunc malesuada ultricies. Mauris mi lectus, pharetra sed convallis vel, porttitor non nulla. In hac habitasse platea dictumst. Vivamus egestas non ipsum ut mattis. Mauris ac laoreet libero. Nulla porttitor ligula at metus laoreet, quis auctor massa volutpat. Quisque at malesuada ipsum. Phasellus et dolor erat.
[/div][/div][/div][/div][/div]

Here is what the code looks like when it is opened:
Code: 
[nobr]

[class=ICcontainer]
width: 100%;
min-height: 400px;
position: relative;
overflow:hidden;
[/class]

[class=ICside]
position: absolute;
height: 100%;
width: 225px;
padding: 15px;
box-sizing: border-box;
color: white;
background: #42bff4;
filter: drop-shadow(0px 0px 5px black);
[/class]

[class=tab]
background: #42bff4;
border-radius: 10px;
padding: 25px 3px 30px 3px;
right: 0px;
top: 0px;
box-sizing: border-box;
color: white;
transform: translateX(50%);
position: absolute;
[/class]

[class=ICcontent]
padding-left: 28px;
[/class]

[/nobr][div class=ICcontainer][div class=ICside][div class=tab][fa]fa-chevron-right fa-lg[/fa][/div][IMG]https://www.rpnation.com/media/tumblr_m66li7i1ph1r6148uo1_1280-jpg.34575/full[/IMG]
Name: Chevalia Traylor
Mood: Didactic
Interactions: None
[/div][div class=ICcontent]
IC Text stuff
[/div][/div]

For this example, we'll only need to look at the class ICside. The way we currently have is when it is opened. This is the code for when we want it to be closed:
Code: 
[class=ICside]
position: absolute;
height: 100%;
width: 225px;
padding: 15px;
box-sizing: border-box;
color: white;
background: #42bff4;
transform: translateX( calc(-1* (225px - 15px) ) );
[/class]

Comparing the two side, the only thing that changes are the filter and the transform. Here we are using the transform to move the side until only 15 pixels are showing. There are other ways to make a div move utilizing positioning, margins, padding, etc. This specific example will use transform, as almost every other way to make the div move will follow the same pattern.

Since the only things changing are filter and transform, we'll take them out and put them in their own hover class.
Code: 
[class=ICside]
position: absolute;
height: 100%;
width: 225px;
padding: 15px;
box-sizing: border-box;
color: white;
background: #42bff4;
transform: translateX( calc(-1* (225px - 15px)));
[/class]

[class name=ICside state=hover]
transform: translateX(0px);
filter: drop-shadow(0px 0px 5px black);
[/class]
We keep the "transform: translateX( calc(-1* (225px - 15px)));" in the original class because its what we want it to start out with, and add "transform: translateX(0px);" to the hover class.

So this is what we have so far:
[class=ICcontainerExample3] width: 100%; min-height: 400px; position: relative; overflow:hidden; [/class] [class=ICsideExample3] position: absolute; height: 100%; width: 225px; padding: 15px; box-sizing: border-box; color: white; background: #42bff4; transform: translateX( calc(-1* (225px - 15px))); [/class] [class name=ICsideExample3 state=hover] transform: translateX(0px); filter: drop-shadow(0px 0px 5px black); [/class] [class=tabExample3] background: #42bff4; border-radius: 10px; padding: 25px 3px 30px 3px; right: 0px; top: 0px; box-sizing: border-box; color: white; transform: translateX(50%); position: absolute; [/class] [class=ICcontentExample3] padding-left: 28px; [/class] [div class=ICcontainerExample3][div class=ICsideExample3][div class=tabExample3]
full

Name: Chevalia Traylor
Mood: Didactic
Interactions: None
[div class=ICcontentExample3]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam vitae leo a semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada ligula molestie purus laoreet, eu euismod sapien efficitur. Vestibulum quis lorem vitae nunc malesuada ultricies. Mauris mi lectus, pharetra sed convallis vel, porttitor non nulla. In hac habitasse platea dictumst. Vivamus egestas non ipsum ut mattis. Mauris ac laoreet libero. Nulla porttitor ligula at metus laoreet, quis auctor massa volutpat. Quisque at malesuada ipsum. Phasellus et dolor erat.
[/div][/div][/div]

Let's add a transition with a delay to make it so that the drop-shadow appears first before the sliding, that way it looks like it lifts off the page.
[class=ICcontainerExample4] width: 100%; min-height: 400px; position: relative; overflow:hidden; [/class] [class=ICsideExample4] position: absolute; height: 100%; width: 225px; padding: 15px; box-sizing: border-box; color: white; background: #42bff4; transform: translateX( calc(-1* (225px - 15px))); transition: transform .5s ease-in .25s, filter .25s ease-in-out; [/class] [class name=ICsideExample4 state=hover] transform: translateX(0px); filter: drop-shadow(0px 0px 5px black); [/class] [class=tabExample4] background: #42bff4; border-radius: 10px; padding: 25px 3px 30px 3px; right: 0px; top: 0px; box-sizing: border-box; color: white; transform: translateX(50%); position: absolute; [/class] [class=ICcontentExample4] padding-left: 28px; [/class] [div class=ICcontainerExample4][div class=ICsideExample4][div class=tabExample4]
full

Name: Chevalia Traylor
Mood: Didactic
Interactions: None
[div class=ICcontentExample4]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam vitae leo a semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada ligula molestie purus laoreet, eu euismod sapien efficitur. Vestibulum quis lorem vitae nunc malesuada ultricies. Mauris mi lectus, pharetra sed convallis vel, porttitor non nulla. In hac habitasse platea dictumst. Vivamus egestas non ipsum ut mattis. Mauris ac laoreet libero. Nulla porttitor ligula at metus laoreet, quis auctor massa volutpat. Quisque at malesuada ipsum. Phasellus et dolor erat.
[/div][/div][/div][/div][/div]
Code: 
[class=ICside]
position: absolute;
height: 100%;
width: 225px;
padding: 15px;
box-sizing: border-box;
color: white;
background: #42bff4;
transform: translateX( calc(-1* (225px - 15px)));
transition: transform .5s ease-in .25s, filter .25s ease-in-out;
[/class]

[class name=ICside state=hover]
transform: translateX(0px);
filter: drop-shadow(0px 0px 5px black);
[/class]
Something you might already be able to tell, the order isn't quite right during the closing sequence. The way to fix this would be to move the opening transition to the hover class and make another transition in the original class for the closing transition.

[class=ICcontainerExample5] width: 100%; min-height: 400px; position: relative; overflow:hidden; [/class] [class=ICsideExample5] position: absolute; height: 100%; width: 225px; padding: 15px; box-sizing: border-box; color: white; background: #42bff4; transform: translateX( calc(-1* (225px - 15px))); transition: transform .5s ease-in , filter .25s ease-in-out .5s; [/class] [class name=ICsideExample5 state=hover] transform: translateX(0px); filter: drop-shadow(0px 0px 5px black); transition: transform .5s ease-in .25s, filter .25s ease-in-out; [/class] [class=tabExample5] background: #42bff4; border-radius: 10px; padding: 25px 3px 30px 3px; right: 0px; top: 0px; box-sizing: border-box; color: white; transform: translateX(50%); position: absolute; [/class] [class=ICcontentExample5] padding-left: 28px; [/class] [div class=ICcontainerExample5][div class=ICsideExample5][div class=tabExample5]
full

Name: Chevalia Traylor
Mood: Didactic
Interactions: None
[/div][div class=ICcontentExample5]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam vitae leo a semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada ligula molestie purus laoreet, eu euismod sapien efficitur. Vestibulum quis lorem vitae nunc malesuada ultricies. Mauris mi lectus, pharetra sed convallis vel, porttitor non nulla. In hac habitasse platea dictumst. Vivamus egestas non ipsum ut mattis. Mauris ac laoreet libero. Nulla porttitor ligula at metus laoreet, quis auctor massa volutpat. Quisque at malesuada ipsum. Phasellus et dolor erat.
[/div][/div][/div]
Code: 
[class=ICside]
position: absolute;
height: 100%;
width: 225px;
padding: 15px;
box-sizing: border-box;
color: white;
background: #42bff4;
transform: translateX( calc(-1* (225px - 15px)));
transition: transform .5s ease-in , filter .25s ease-in-out .5s;
[/class]

[class name=ICside state=hover]
transform: translateX(0px);
filter: drop-shadow(0px 0px 5px black);
transition: transform .5s ease-in .25s, filter .25s ease-in-out;
[/class]

So now, when hovering, instead of using "transition: transform .5s ease-in , filter .25s ease-in-out .5s;" it'll use "transition: transform .5s ease-in .25s, filter .25s ease-in-out;" and vice versa when closing.

That is all there is. There are more complex things you can do with transition and hover, this is just a simple example to cover the main points. Here is the full code for the sliding IC tab. It is free to use.
Code: 
[nobr]

[class=ICcontainer]
width: 100%;
min-height: 400px;
position: relative;
overflow:hidden;
[/class]

[class=ICside]
position: absolute;
height: 100%;
width: 225px;
padding: 15px;
box-sizing: border-box;
color: white;
background: #42bff4;
transform: translateX( calc(-1* (225px - 15px)));
transition: transform .5s ease-in , filter .25s ease-in-out .5s;
[/class]

[class name=ICside state=hover]
transform: translateX(0px);
filter: drop-shadow(0px 0px 5px black);
transition: transform .5s ease-in .25s, filter .25s ease-in-out;
[/class]

[class=tab]
background: #42bff4;
border-radius: 10px;
padding: 25px 3px 30px 3px;
right: 0px;
top: 0px;
box-sizing: border-box;
color: white;
transform: translateX(50%);
position: absolute;
[/class]

[class=ICcontent]
padding-left: 28px;
[/class]

[/nobr][div class=ICcontainer][div class=ICside][div class=tab][fa]fa-chevron-right fa-lg[/fa][/div][IMG]https://www.rpnation.com/media/tumblr_m66li7i1ph1r6148uo1_1280-jpg.34575/full[/IMG]
Name: Chevalia Traylor
Mood: Didactic
Interactions: None
[/div][div class=ICcontent]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam vitae leo a semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada ligula molestie purus laoreet, eu euismod sapien efficitur. Vestibulum quis lorem vitae nunc malesuada ultricies. Mauris mi lectus, pharetra sed convallis vel, porttitor non nulla. In hac habitasse platea dictumst. Vivamus egestas non ipsum ut mattis. Mauris ac laoreet libero. Nulla porttitor ligula at metus laoreet, quis auctor massa volutpat. Quisque at malesuada ipsum. Phasellus et dolor erat.
[/div][/div]
[/div][/div]
 
Last edited:
[class=GuideBox] width: 220px; height: auto; background-color: #308FDB; color: #F8F8F7; padding: 15px; text-align: left; flex: 0 auto; [/class] [class=selection] transition: all .5s ease-in-out; display: block; margin-top: .5em; color: #F8F8F7; [/class] [class name=selection state=hover] color: #FFCB29; [/class]
[div class=GuideBox]Navigation:
[/div]
Using BBscript with CSS Transition

While you can already achieve a lot with just CSS classes alone, it doesn't achieve the same kind of control that BBscript does. The newly released BBscript already contains a few in house ways to directly change your posts without the need of transitions, functions like hide, show, fadeIn, fadeOut, slideUp and slideDown. These let you do more outside of the single div box that is being hovered. For simpler animations, they are enough to achieve small results. However, they do not allow for the change of values such as text color, size, and appearance. At the same time, in the current version of BBscript, these animations all occur without delay, not allowing sequenced animations. To achieve control over almost all aspects of every div, utilizing both BBscript and CSS transition, we will use addClass and removeClass.

addClass and removeClass allows us to add and remove classes to any div we want. There are two parts to addClass and removeClass, the class to be added/removed and the div that it is going to be added to/removed from. The div that it will be added to/removed from is defined by what class it has.
Code: 
addClass [Class to be added] [Class Name of Div]
removeClass [Class to be removed] [Class Name of Div]

[class=red] color: red; [/class] [script class=AddExample1 on=click] addClass red indicator1 [/script] [script class=RemoveExample1 on=click] removeClass red indicator1 [/script] [div class=indicator1]

[input type=button class=AddExample1]Add class to make red[/input]
[input type=button class=RemoveExample1]Remove class[/input]

There is no toggling if you addClass twice, and it won't add another if the class is already in the div. At the same time, if multiple divs are called the same class name, then adding/removing the class will occur to all of them at the same time.

[script class=AddExample2 on=click] addClass red indicator2 [/script] [script class=RemoveExample2 on=click] removeClass red indicator2 [/script] [div class=indicator2][/div][div class=indicator2][/div][div class=indicator2][/div][div class=indicator2]Another div with the same class name[/div]
[input type=button class=AddExample2]Add class to make red[/input]
[input type=button class=RemoveExample2]Remove class[/input]

If the classes that are used have transition properties in them, it'll perform the transitions.

[script class=AddExample3 on=click] addClass red indicator3 [/script] [script class=RemoveExample3 on=click] removeClass red indicator3 [/script] [class=indicator3] transition: color 1s; [/class] [div class=indicator3][/div][div class=indicator3][/div][div class=indicator3][/div][div class=indicator3]Another div with the same class name, now with transitions!![/div]
[input type=button class=AddExample3]Add class to make red[/input]
[input type=button class=RemoveExample3]Remove class[/input]

Code: 
[nobr]
[class=red]
color: red;
[/class]

[script class=Add on=click]
addClass red indicator
[/script]

[script class=Remove on=click]
removeClass red indicator
[/script]

[class=indicator]
transition: color 1s;
[/class]

[/nobr][div class=indicator][fa]fa-circle fa-fw fa-3x[/fa][/div]
[input type=button class=Add]Add class to make red[/input]
[input type=button class=Remove]Remove class[/input]

As you can see, the class doesn't have any state and doesn't need to be called the same thing as the class it is affecting to have an animation. What we can do is make there be another hover class called red that only occurs when div is red and the div is being hovered over.

[class=red2] color: red; [/class] [class name=red2 state=hover] color: blue; [/class] [script class=Add4 on=click] addClass red2 indicator4 [/script] [script class=Remove4 on=click] removeClass red2 indicator4 [/script] [class=indicator4] transition: color 1s; [/class] [div class=indicator4] Hover over me[/div]
[input type=button class=Add4]Add class to make red[/input]
[input type=button class=Remove4]Remove class[/input]

Because the class "red" isn't added to the div until after the button is pressed, it won't turn blue.

Emulating Hover Behavior.
There are some instances in which you'd want to use bbscript to emulate a hover instead of the normal CSS hover state. Because of how BBscript is, we have more powerful options when a hover occurs, and can control whether or not actions occur when it stops hovering. This allows for easy animations in the cases where clicking and hovering need to be differentiated. To emulate a hovering on, you would use the bbscript state on=mouseenter and on=mouseleave. You'd have to make it two individual scripts.

[script class=indicator5 on=mouseenter] addClass red indicator5 [/script] [script class=indicator5 on=mouseleave] removeClass red indicator5 [/script] [div class=indicator5] Hover over me[/div]
Code: 
[nobr]
[script class=indicator on=mouseenter]
addClass red indicator
[/script]

[script class=indicator on=mouseleave]
removeClass red indicator
[/script]
[/nobr]
[div class=indicator][fa]fa-circle fa-fw fa-3x[/fa] Hover over me[/div]
Of course, this is pretty pointless by itself. The reason why'd we want to do something like this is to make the effect occur on something else.
[script class=hover6 on=mouseenter] addClass red indicator6 [/script] [script class=hover6 on=mouseleave] removeClass red indicator6 [/script]
[div class=hover6]Hover over me[/div][div class=indicator6][/div]
Code: 
[nobr]
[script class=hover on=mouseenter]
addClass red indicator
[/script]

[script class=hover on=mouseleave]
removeClass red indicator
[/script]
[/nobr]
[div class=hover]Hover over me[/div][div class=indicator][fa]fa-circle fa-fw fa-3x[/fa][/div]

This is how complex animations is able to be achieved, by combining BBscript alongside CSS transitions and applying them to other classes. By having BBscript be used where CSS hover is inefficient and CSS transitions used where BBscript cannot, we can get increasingly complex code with clean animations.
[/div][/div]
 
Last edited:
[class=GuideBox] width: 220px; height: auto; background-color: #308FDB; color: #F8F8F7; padding: 15px; text-align: left; flex: 0 auto; [/class] [class=selection] transition: all .5s ease-in-out; display: block; margin-top: .5em; color: #F8F8F7; [/class] [class name=selection state=hover] color: #FFCB29; [/class]
[div class=GuideBox]Navigation:
[/div]
Example using BBscript with CSS Transition

For our example, we'll be making a cool and simple character card (I actually have this as my about description if you want to see a live example). Our application of BBscript here is clicking on the image icon at the bottom left hand corner to make the sides slide in and out. We'll also make both sides slide in when the page is first loaded. This is what it looks like complete without any BBscript:

[class=base] --img-w: 3200; --img-h: 1512; --bg-color: rgba(182, 0, 48, 0.8); width: 100%; padding-top: calc( var(--img-h)/var(--img-w) * 100%); margin: 0 auto; box-sizing: border-box; border: 5px solid black; border-radius: 20px; background-image: url('https://www.rpnation.com/media/58839975_p0_waifu2x_art_scale_tta_1-png.34526/full'); background-size: cover; position: relative; overflow: hidden; [/class] [class=container] position: absolute; top: 0; width: 100%; height: 100%; color: white; [/class] [class=left] background-color: var(--bg-color); width: 39.75%; height: 100%; border-right: 5px solid white; box-sizing: border-box; overflow:hidden; top:0; position: absolute; transform-origin: top right; transform: skewX(-30deg); transition: all 1.5s ease-in-out; [/class] [class=titleL] height: auto; right: 0; position: absolute; writing-mode: vertical-rl; box-sizing: border-box; text-align: right; font-size: 5vw; transform: skewX(30deg) rotate(-150deg); [/class] [class=right] background-color: var(--bg-color); width: 62%; height: 100%; border-left: 5px solid white; box-sizing: border-box; overflow:hidden; bottom: 0; right: 0; position: absolute; transform-origin: bottom left; transform: skewX(-30deg); transition: all 1.5s ease-in-out; [/class] [class=titleR] height: auto; left: 0; bottom:0; position: absolute; writing-mode: vertical-rl; box-sizing: border-box; text-align: left; font-size: 5vw; transform: skewX(30deg) rotate(-150deg); [/class] [class=contentR] bottom: 0; right: 0; position: absolute; width: 33.5%; height: 100%; padding: 5px; box-sizing: border-box; overflow:hidden; transition: all .5s ease-in-out 1s; [/class] [class=contentL] top: 0; left: 0; position: absolute; height: 50%; width: 21%; padding: 5px; box-sizing: border-box; overflow:hidden; transition: all .5s ease-in-out 1s; [/class] [class=scroll] width: 100%; height: 100%; padding-right: 150px; overflow-y:scroll; position: relative; [/class] [class=opacity] opacity:0; transition: all .5s ease-in-out; [/class] [class=hide] width: 0; [/class] [class=button] color: white; position: absolute; bottom: 0; left: 0; padding: 5px; cursor: pointer; [/class] [class=options] display: inline; width: 100px; [/class] [class=Image] opacity:0; position: absolute; display:inline; left:0 width: 0; transition: all .3s ease-in-out; white-space: nowrap; [/class] [class=Text] opacity:0; position: absolute; display: inline; left:0 width: 0; transition: all .3s ease-in-out; white-space: nowrap; [/class] [class=buttonShow] opacity: 1; width: 70px; [/class] [div class=base][div class=container]
[div class="left"][div class=titleL]User:

[div class="right"][div class=titleR]Name[/div][/div]
[div class="contentL"][div class=scroll style=top:0;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie enim sapien, et dignissim massa pellentesque nec. Aenean eu ante eu nulla pellentesque molestie nec sed tortor. Morbi a risus sed turpis venenatis cursus et at nulla. Ut vel leo purus. Donec sit amet tempor erat. Nunc iaculis ipsum at posuere aliquet. Duis sit amet massa et lorem rutrum tempor non mattis nunc. Sed pulvinar at nisi non tempor. Phasellus ut pretium tortor, in ornare tortor. Morbi diam ante, pellentesque vitae venenatis non, ultrices ut metus. Nunc sit amet ante feugiat lorem ultrices blandit.
[/div][/div]
[div class="contentR"][div class=scroll style=bottom:0;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie enim sapien, et dignissim massa pellentesque nec. Aenean eu ante eu nulla pellentesque molestie nec sed tortor. Morbi a risus sed turpis venenatis cursus et at nulla. Ut vel leo purus. Donec sit amet tempor erat. Nunc iaculis ipsum at posuere aliquet. Duis sit amet massa et lorem rutrum tempor non mattis nunc. Sed pulvinar at nisi non tempor. Phasellus ut pretium tortor, in ornare tortor. Morbi diam ante, pellentesque vitae venenatis non, ultrices ut metus. Nunc sit amet ante feugiat lorem ultrices blandit.

Nulla maximus facilisis nulla. Cras nunc mi, imperdiet ut consequat sed, eleifend ut justo. Curabitur non auctor quam. Nullam id est ac sapien sagittis tincidunt eu at nibh. Praesent aliquam, lorem et pulvinar mattis, lorem ante elementum velit, vel euismod mauris neque ac arcu. Quisque eget accumsan nisl. Pellentesque pulvinar dignissim leo sed varius. Curabitur maximus accumsan libero vel cursus. Praesent fringilla vestibulum est, vel vulputate odio blandit sit amet. Integer a semper justo. Curabitur efficitur tristique lacus, nec mollis tortor mollis at. Morbi vel leo ac enim consequat consectetur id eu odio. Morbi vitae ante nec lorem tincidunt dignissim. Proin tempus, justo a efficitur hendrerit, dolor dui dignissim magna, sed pretium lorem odio sit amet dui.

Fusce sagittis eu purus non mattis. Quisque ut aliquam mauris. Etiam iaculis dignissim dui quis fermentum. Duis efficitur sapien quis tincidunt sollicitudin. Praesent consectetur lacus ipsum, sit amet commodo metus tristique convallis. Curabitur blandit diam id dapibus bibendum. Donec id pulvinar tellus. Nunc suscipit, ipsum non tempus fringilla, ligula libero ultrices nisl, at lobortis ante turpis eget neque. Mauris venenatis pulvinar neque et elementum. Mauris est libero, pharetra ac metus venenatis, viverra consequat risus. Nunc neque lectus, mollis in est at, elementum viverra neque. Suspendisse semper posuere ullamcorper.

Suspendisse potenti. Quisque feugiat congue ornare. Morbi mollis, neque vitae sagittis sagittis, justo nunc posuere elit, quis suscipit odio dui eu quam. Fusce eu sapien augue. Ut lobortis tincidunt diam non posuere. Integer quis lobortis libero. Nam quis mi nisi. Morbi eget dictum nunc, sit amet porta libero. In a tristique nibh. Vivamus metus nulla, mollis nec volutpat ut, dignissim non tortor. Nulla facilisi. Ut consequat diam tempor quam rhoncus imperdiet. Sed molestie augue a odio imperdiet, a vehicula arcu feugiat.

Sed fermentum bibendum risus, vitae imperdiet mauris ornare ac. Aenean non placerat magna, at scelerisque erat. Quisque nec lectus in dolor mattis pharetra ac id erat. Fusce id tincidunt dolor. In consequat eleifend justo eget euismod. Nam varius felis sed tellus malesuada bibendum. Morbi id sapien eu leo ultricies lobortis. Nunc ut vulputate mauris, non congue erat.​
[/div][/div][div class=button] [div class=options][div class=Image]View Image[/div][div class=Text]View Text[/div][/div][/div]
[/div][/div][/div]

And this is what our code looks like:
Code: 
[nobr]

[class=base]
--img-w: 3200;
--img-h: 1512;
--bg-color: rgba(182, 0, 48, 0.8);
width: 100%;
padding-top: calc( var(--img-h)/var(--img-w) * 100%);
margin: 0 auto;
box-sizing: border-box;
border: 5px solid black;
border-radius: 20px;
background-image: url('https://www.rpnation.com/media/58839975_p0_waifu2x_art_scale_tta_1-png.34526/full');
background-size: cover;
position: relative;
overflow: hidden;
[/class]

[class=container]
position: absolute;
top: 0;
width: 100%;
height: 100%;
color: white;
[/class]

[class=left]
background-color: var(--bg-color);
width: 39.75%;
height: 100%;
border-right: 5px solid white;
box-sizing: border-box;
overflow:hidden;
top:0;
position: absolute;
transform-origin: top right;
transform: skewX(-30deg);
transition: all 1.5s ease-in-out;
[/class]

[class=titleL]
height: auto;
right: 0;
position: absolute;
writing-mode: vertical-rl;
box-sizing: border-box;
text-align: right;
font-size: 5vw;
transform: skewX(30deg) rotate(-150deg);
[/class]

[class=right]
background-color: var(--bg-color);
width: 62%;
height: 100%;
border-left: 5px solid white;
box-sizing: border-box;
overflow:hidden;
bottom: 0;
right: 0;
position: absolute;
transform-origin: bottom left;
transform: skewX(-30deg);
transition: all 1.5s ease-in-out;
[/class]

[class=titleR]
height: auto;
left: 0;
bottom:0;
position: absolute;
writing-mode: vertical-rl;
box-sizing: border-box;
text-align: left;
font-size: 5vw;
transform: skewX(30deg) rotate(-150deg);
[/class]

[class=contentR]
bottom: 0;
right: 0;
position: absolute;
width: 33.5%;
height: 100%;
padding: 5px;
box-sizing: border-box;
overflow:hidden;
transition: all .5s ease-in-out 1s;
[/class]

[class=contentL]
top: 0;
left: 0;
position: absolute;
height: 50%;
width: 21%;
padding: 5px;
box-sizing: border-box;
overflow:hidden;
transition: all .5s ease-in-out 1s;
[/class]

[class=scroll]
width: 100%;
height: 100%;
padding-right: 150px;
overflow-y:scroll;
position: relative;
[/class]

[class=opacity]
opacity:0;
transition: all .5s ease-in-out;
[/class]

[class=hide]
width: 0;
[/class]

[class=button]
color: white;
position: absolute;
bottom: 0;
left: 0;
padding: 5px;
cursor: pointer;
[/class]

[class=options]
display: inline;
width: 100px;
[/class]

[class=Image]
opacity:0;
position: absolute;
display:inline;
left:0
width: 0;
transition: all .3s ease-in-out;
white-space: nowrap;
[/class]

[class=Text]
opacity:0;
position: absolute;
display: inline;
left:0
width: 0;
transition: all .3s ease-in-out;
white-space: nowrap;
[/class]

[class=buttonShow]
opacity: 1;
width: 70px;
[/class]

[/nobr][div class=base][div class=container]
[div class="left"][div class=titleL][font=Orbitron]User:[/font][/div][/div]
[div class="right"][div class=titleR][font=Orbitron]Name[/font][/div][/div]
[div class="contentL"][div class=scroll style=top:0;][font=Lato]

Left side content

[/font][/div][/div]
[div class="contentR"][div class=scroll style=bottom:0;][font=Lato][RIGHT]

Right side content

[/RIGHT]
[/font][/div][/div][div class=button][font=Orbitron][fa]fa-image fa-fw fa-lg[/fa] [div class=options][div class=Image]View Image[/div][div class=Text]View Text[/div][/div][/font][/div]
[/div][/div]

In our code, we have already prepared the classes to be added. Here we want either "View Image" or "View Text" to display when we hover over the image icon that we want to make clickable. To do that, we'll have the BBscript perform an "addClass buttonShow" to either the class "Image" or "Text" depending on the state of the code. To keep track of the state, we'll prepare a variable, which we'll call "IsText", that we'll change as we click on the button. Likewise, when we are no longer hovering over the icon, we'll perform "removeClass buttonShow" to either "Image" or "Text". We won't have to figure out which on it needs to be since performing a removeClass on one that doesn't have the class won't do anything. The reason why we can't use hover is because the divs we're trying to show occupy the same space. Here is the bbcode that'll be needed:
Code: 
[script=button]
set IsText 1
[/script]

[script class=button on=mouseenter]
if (eq ${IsText} 1) (addClass buttonShow Image) (addClass buttonShow Text)
[/script]

[script class=button on=mouseleave]
removeClass buttonShow Image
removeClass buttonShow Text
[/script]
We have a separate [script=] as you can see, setting "IsText" to 1. Because this script has no on state, it is the first thing done when the page is loaded. We don't actually have to care about what it is called, as it won't make a difference to the code, but we'll call it "button" since it pertains to the button.

Here is what it looks like when we can hover over the button.
[class=Image1] opacity:0; position: absolute; display:inline; left:0 width: 0; transition: all .3s ease-in-out; white-space: nowrap; [/class] [class=Text1] opacity:0; position: absolute; display: inline; left:0 width: 0; transition: all .3s ease-in-out; white-space: nowrap; [/class] [class=button1] color: white; position: absolute; bottom: 0; left: 0; padding: 5px; cursor: pointer; [/class] [class=buttonShow1] opacity: 1; width: 70px; [/class] [script=button1] set IsText1 1 [/script] [script class=button1 on=mouseenter] if (eq ${IsText1} 1) (addClass buttonShow1 Image1) (addClass buttonShow1 Text1) [/script] [script class=button1 on=mouseleave] removeClass buttonShow1 Image1 removeClass buttonShow1 Text1 [/script] [div class=base][div class=container]
[div class="left"][div class=titleL]User:
[/div]
[div class="right"][div class=titleR]Name[/div][/div]
[div class="contentL"][div class=scroll style=top:0;] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie enim sapien, et dignissim massa pellentesque nec. Aenean eu ante eu nulla pellentesque molestie nec sed tortor. Morbi a risus sed turpis venenatis cursus et at nulla. Ut vel leo purus. Donec sit amet tempor erat. Nunc iaculis ipsum at posuere aliquet. Duis sit amet massa et lorem rutrum tempor non mattis nunc. Sed pulvinar at nisi non tempor. Phasellus ut pretium tortor, in ornare tortor. Morbi diam ante, pellentesque vitae venenatis non, ultrices ut metus. Nunc sit amet ante feugiat lorem ultrices blandit.
[/div][/div]
[div class="contentR"][div class=scroll style=bottom:0;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie enim sapien, et dignissim massa pellentesque nec. Aenean eu ante eu nulla pellentesque molestie nec sed tortor. Morbi a risus sed turpis venenatis cursus et at nulla. Ut vel leo purus. Donec sit amet tempor erat. Nunc iaculis ipsum at posuere aliquet. Duis sit amet massa et lorem rutrum tempor non mattis nunc. Sed pulvinar at nisi non tempor. Phasellus ut pretium tortor, in ornare tortor. Morbi diam ante, pellentesque vitae venenatis non, ultrices ut metus. Nunc sit amet ante feugiat lorem ultrices blandit.

Nulla maximus facilisis nulla. Cras nunc mi, imperdiet ut consequat sed, eleifend ut justo. Curabitur non auctor quam. Nullam id est ac sapien sagittis tincidunt eu at nibh. Praesent aliquam, lorem et pulvinar mattis, lorem ante elementum velit, vel euismod mauris neque ac arcu. Quisque eget accumsan nisl. Pellentesque pulvinar dignissim leo sed varius. Curabitur maximus accumsan libero vel cursus. Praesent fringilla vestibulum est, vel vulputate odio blandit sit amet. Integer a semper justo. Curabitur efficitur tristique lacus, nec mollis tortor mollis at. Morbi vel leo ac enim consequat consectetur id eu odio. Morbi vitae ante nec lorem tincidunt dignissim. Proin tempus, justo a efficitur hendrerit, dolor dui dignissim magna, sed pretium lorem odio sit amet dui.

Fusce sagittis eu purus non mattis. Quisque ut aliquam mauris. Etiam iaculis dignissim dui quis fermentum. Duis efficitur sapien quis tincidunt sollicitudin. Praesent consectetur lacus ipsum, sit amet commodo metus tristique convallis. Curabitur blandit diam id dapibus bibendum. Donec id pulvinar tellus. Nunc suscipit, ipsum non tempus fringilla, ligula libero ultrices nisl, at lobortis ante turpis eget neque. Mauris venenatis pulvinar neque et elementum. Mauris est libero, pharetra ac metus venenatis, viverra consequat risus. Nunc neque lectus, mollis in est at, elementum viverra neque. Suspendisse semper posuere ullamcorper.

Suspendisse potenti. Quisque feugiat congue ornare. Morbi mollis, neque vitae sagittis sagittis, justo nunc posuere elit, quis suscipit odio dui eu quam. Fusce eu sapien augue. Ut lobortis tincidunt diam non posuere. Integer quis lobortis libero. Nam quis mi nisi. Morbi eget dictum nunc, sit amet porta libero. In a tristique nibh. Vivamus metus nulla, mollis nec volutpat ut, dignissim non tortor. Nulla facilisi. Ut consequat diam tempor quam rhoncus imperdiet. Sed molestie augue a odio imperdiet, a vehicula arcu feugiat.

Sed fermentum bibendum risus, vitae imperdiet mauris ornare ac. Aenean non placerat magna, at scelerisque erat. Quisque nec lectus in dolor mattis pharetra ac id erat. Fusce id tincidunt dolor. In consequat eleifend justo eget euismod. Nam varius felis sed tellus malesuada bibendum. Morbi id sapien eu leo ultricies lobortis. Nunc ut vulputate mauris, non congue erat.​
[/div][/div][div class=button1] [div class=options][div class=Image1]View Image[/div][div class=Text1]View Text[/div][/div][/div]
[/div][/div][/div]

So now that we have that, we want to slide the sides in and out on click. We already have the code prepared in the class "opacity" and "hide" which we'll apply to the textboxes and the red sides respectively. Since we want to only add or remove these classes if they're already opened or closed, we will reuse the variable "IsText" and apply it in an if statement to determine what to do. While we're at it, we'll hide the button text so that our users don't get confused. Here is our code for it.
Code: 
[script class=button on=click]
if (eq ${IsText} 1) (addClass opacity contentL)
if (eq ${IsText} 1) (addClass opacity contentR)
if (eq ${IsText} 1) (addClass hide left)
if (eq ${IsText} 1) (addClass hide right)
if (eq ${IsText} 1) (removeClass buttonShow Image)
if (eq ${IsText} 0) (removeClass opacity contentL)
if (eq ${IsText} 0) (removeClass opacity contentR)
if (eq ${IsText} 0) (removeClass hide left)
if (eq ${IsText} 0) (removeClass hide right)
if (eq ${IsText} 0) (removeClass buttonShow Text)
if (eq ${IsText} 1) (set IsText 0) (set IsText 1)
[/script]
Since on click, we know that it'll change the display, we'll also change the value of "IsText" as well. Here is what it looks likes.
[class=left2] background-color: var(--bg-color); width: 39.75%; height: 100%; border-right: 5px solid white; box-sizing: border-box; overflow:hidden; top:0; position: absolute; transform-origin: top right; transform: skewX(-30deg); transition: all 1.5s ease-in-out; [/class] [class=right2] background-color: var(--bg-color); width: 62%; height: 100%; border-left: 5px solid white; box-sizing: border-box; overflow:hidden; bottom: 0; right: 0; position: absolute; transform-origin: bottom left; transform: skewX(-30deg); transition: all 1.5s ease-in-out; [/class] [class=contentR2] bottom: 0; right: 0; position: absolute; width: 33.5%; height: 100%; padding: 5px; box-sizing: border-box; overflow:hidden; transition: all .5s ease-in-out 1s; [/class] [class=contentL2] top: 0; left: 0; position: absolute; height: 50%; width: 21%; padding: 5px; box-sizing: border-box; overflow:hidden; transition: all .5s ease-in-out 1s; [/class] [class=opacity2] opacity:0; transition: all .5s ease-in-out; [/class] [class=hide2] width: 0; [/class] [class=button2] color: white; position: absolute; bottom: 0; left: 0; padding: 5px; cursor: pointer; [/class] [class=Image2] opacity:0; position: absolute; display:inline; left:0 width: 0; transition: all .3s ease-in-out; white-space: nowrap; [/class] [class=Text2] opacity:0; position: absolute; display: inline; left:0 width: 0; transition: all .3s ease-in-out; white-space: nowrap; [/class] [class=buttonShow2] opacity: 1; width: 70px; [/class] [script=button2] set IsText2 1 [/script] [script class=button2 on=mouseenter] if (eq ${IsText2} 1) (addClass buttonShow2 Image2) (addClass buttonShow2 Text2) [/script] [script class=button2 on=mouseleave] removeClass buttonShow2 Image2 removeClass buttonShow2 Text2 [/script] [script class=button2 on=click] if (eq ${IsText2} 1) (addClass opacity2 contentL2) if (eq ${IsText2} 1) (addClass opacity2 contentR2) if (eq ${IsText2} 1) (addClass hide2 left2) if (eq ${IsText2} 1) (addClass hide2 right2) if (eq ${IsText2} 1) (removeClass buttonShow2 Image2) if (eq ${IsText2} 0) (removeClass opacity2 contentL2) if (eq ${IsText2} 0) (removeClass opacity2 contentR2) if (eq ${IsText2} 0) (removeClass hide2 left2) if (eq ${IsText2} 0) (removeClass hide2 right2) if (eq ${IsText2} 0) (removeClass buttonShow2 Text2) if (eq ${IsText2} 1) (set IsText2 0) (set IsText2 1) [/script] [div class=base][div class=container]
[div class="left2"][div class=titleL]User:
[/div]
[div class="right2"][div class=titleR]Name[/div][/div]
[div class="contentL2"][div class=scroll style=top:0;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie enim sapien, et dignissim massa pellentesque nec. Aenean eu ante eu nulla pellentesque molestie nec sed tortor. Morbi a risus sed turpis venenatis cursus et at nulla. Ut vel leo purus. Donec sit amet tempor erat. Nunc iaculis ipsum at posuere aliquet. Duis sit amet massa et lorem rutrum tempor non mattis nunc. Sed pulvinar at nisi non tempor. Phasellus ut pretium tortor, in ornare tortor. Morbi diam ante, pellentesque vitae venenatis non, ultrices ut metus. Nunc sit amet ante feugiat lorem ultrices blandit.
[/div][/div]
[div class="contentR2"][div class=scroll style=bottom:0;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie enim sapien, et dignissim massa pellentesque nec. Aenean eu ante eu nulla pellentesque molestie nec sed tortor. Morbi a risus sed turpis venenatis cursus et at nulla. Ut vel leo purus. Donec sit amet tempor erat. Nunc iaculis ipsum at posuere aliquet. Duis sit amet massa et lorem rutrum tempor non mattis nunc. Sed pulvinar at nisi non tempor. Phasellus ut pretium tortor, in ornare tortor. Morbi diam ante, pellentesque vitae venenatis non, ultrices ut metus. Nunc sit amet ante feugiat lorem ultrices blandit.

Nulla maximus facilisis nulla. Cras nunc mi, imperdiet ut consequat sed, eleifend ut justo. Curabitur non auctor quam. Nullam id est ac sapien sagittis tincidunt eu at nibh. Praesent aliquam, lorem et pulvinar mattis, lorem ante elementum velit, vel euismod mauris neque ac arcu. Quisque eget accumsan nisl. Pellentesque pulvinar dignissim leo sed varius. Curabitur maximus accumsan libero vel cursus. Praesent fringilla vestibulum est, vel vulputate odio blandit sit amet. Integer a semper justo. Curabitur efficitur tristique lacus, nec mollis tortor mollis at. Morbi vel leo ac enim consequat consectetur id eu odio. Morbi vitae ante nec lorem tincidunt dignissim. Proin tempus, justo a efficitur hendrerit, dolor dui dignissim magna, sed pretium lorem odio sit amet dui.

Fusce sagittis eu purus non mattis. Quisque ut aliquam mauris. Etiam iaculis dignissim dui quis fermentum. Duis efficitur sapien quis tincidunt sollicitudin. Praesent consectetur lacus ipsum, sit amet commodo metus tristique convallis. Curabitur blandit diam id dapibus bibendum. Donec id pulvinar tellus. Nunc suscipit, ipsum non tempus fringilla, ligula libero ultrices nisl, at lobortis ante turpis eget neque. Mauris venenatis pulvinar neque et elementum. Mauris est libero, pharetra ac metus venenatis, viverra consequat risus. Nunc neque lectus, mollis in est at, elementum viverra neque. Suspendisse semper posuere ullamcorper.

Suspendisse potenti. Quisque feugiat congue ornare. Morbi mollis, neque vitae sagittis sagittis, justo nunc posuere elit, quis suscipit odio dui eu quam. Fusce eu sapien augue. Ut lobortis tincidunt diam non posuere. Integer quis lobortis libero. Nam quis mi nisi. Morbi eget dictum nunc, sit amet porta libero. In a tristique nibh. Vivamus metus nulla, mollis nec volutpat ut, dignissim non tortor. Nulla facilisi. Ut consequat diam tempor quam rhoncus imperdiet. Sed molestie augue a odio imperdiet, a vehicula arcu feugiat.

Sed fermentum bibendum risus, vitae imperdiet mauris ornare ac. Aenean non placerat magna, at scelerisque erat. Quisque nec lectus in dolor mattis pharetra ac id erat. Fusce id tincidunt dolor. In consequat eleifend justo eget euismod. Nam varius felis sed tellus malesuada bibendum. Morbi id sapien eu leo ultricies lobortis. Nunc ut vulputate mauris, non congue erat.​
[/div][/div][div class=button2] [div class=options][div class=Image2]View Image[/div][div class=Text2]View Text[/div][/div][/div]
[/div][/div][/div]

And finally to make it slide in on load in, we'll place "removeClass opacity" and "removeClass hide" in our [script=] that its executed upon load in as explained before. However, in order for this to work, the divs must already have class "opacity" and "hide" in them, so we'll do that as well. So this is what the code will look like with their respective parts added/changed:
Code: 
[script=button]
set IsText 1
removeClass opacity contentL
removeClass opacity contentR
removeClass hide left
removeClass hide right
[/script]

[div class="left hide"][div class=titleL][font=Orbitron]User:[/font][/div][/div]
[div class="right hide"][div class=titleR][font=Orbitron]Name[/font][/div][/div]
[div class="contentL opacity"][div class=scroll style=top:0;][font=Lato][SIZE=5]

Left Side Content

[/font][/div][/div]
[div class="contentR opacity"][div class=scroll style=bottom:0;][font=Lato][RIGHT]

Right Side Content

[/RIGHT]
[/font][/div][/div][div class=button][font=Orbitron][fa]fa-image fa-fw fa-lg[/fa] [div class=options][div class=Image]View Image[/div][div class=Text]View Text[/div][/div][/font][/div]
[/div][/div]
And this is how it'll execute. In order to see the effect, reload the page.
[class=left3] background-color: var(--bg-color); width: 39.75%; height: 100%; border-right: 5px solid white; box-sizing: border-box; overflow:hidden; top:0; position: absolute; transform-origin: top right; transform: skewX(-30deg); transition: all 1.5s ease-in-out; [/class] [class=right3] background-color: var(--bg-color); width: 62%; height: 100%; border-left: 5px solid white; box-sizing: border-box; overflow:hidden; bottom: 0; right: 0; position: absolute; transform-origin: bottom left; transform: skewX(-30deg); transition: all 1.5s ease-in-out; [/class] [class=contentR3] bottom: 0; right: 0; position: absolute; width: 33.5%; height: 100%; padding: 5px; box-sizing: border-box; overflow:hidden; transition: all .5s ease-in-out 1s; [/class] [class=contentL3] top: 0; left: 0; position: absolute; height: 50%; width: 21%; padding: 5px; box-sizing: border-box; overflow:hidden; transition: all .5s ease-in-out 1s; [/class] [class=opacity3] opacity:0; transition: all .5s ease-in-out; [/class] [class=hide3] width: 0; [/class] [class=button3] color: white; position: absolute; bottom: 0; left: 0; padding: 5px; cursor: pointer; [/class] [class=Image3] opacity:0; position: absolute; display:inline; left:0 width: 0; transition: all .3s ease-in-out; white-space: nowrap; [/class] [class=Text3] opacity:0; position: absolute; display: inline; left:0 width: 0; transition: all .3s ease-in-out; white-space: nowrap; [/class] [class=buttonShow3] opacity: 1; width: 70px; [/class] [script=button3] set IsText3 1 removeClass opacity3 contentL3 removeClass opacity3 contentR3 removeClass hide3 left3 removeClass hide3 right3 [/script] [script class=button3 on=mouseenter] if (eq ${IsText3} 1) (addClass buttonShow3 Image3) (addClass buttonShow3 Text3) [/script] [script class=button3 on=mouseleave] removeClass buttonShow3 Image3 removeClass buttonShow3 Text3 [/script] [script class=button3 on=click] if (eq ${IsText3} 1) (addClass opacity3 contentL3) if (eq ${IsText3} 1) (addClass opacity3 contentR3) if (eq ${IsText3} 1) (addClass hide3 left3) if (eq ${IsText3} 1) (addClass hide3 right3) if (eq ${IsText3} 1) (removeClass buttonShow3 Image3) if (eq ${IsText3} 0) (removeClass opacity3 contentL3) if (eq ${IsText3} 0) (removeClass opacity3 contentR3) if (eq ${IsText3} 0) (removeClass hide3 left3) if (eq ${IsText3} 0) (removeClass hide3 right3) if (eq ${IsText3} 0) (removeClass buttonShow3 Text3) if (eq ${IsText3} 1) (set IsText3 0) (set IsText3 1) [/script] [div class=base][div class=container]
[div class="left3 hide3"][div class=titleL]User:
[/div]
[div class="right3 hide3"][div class=titleR]Name[/div][/div]
[div class="contentL3 opacity3"][div class=scroll style=top:0;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie enim sapien, et dignissim massa pellentesque nec. Aenean eu ante eu nulla pellentesque molestie nec sed tortor. Morbi a risus sed turpis venenatis cursus et at nulla. Ut vel leo purus. Donec sit amet tempor erat. Nunc iaculis ipsum at posuere aliquet. Duis sit amet massa et lorem rutrum tempor non mattis nunc. Sed pulvinar at nisi non tempor. Phasellus ut pretium tortor, in ornare tortor. Morbi diam ante, pellentesque vitae venenatis non, ultrices ut metus. Nunc sit amet ante feugiat lorem ultrices blandit.
[/div][/div]
[div class="contentR3 opacity3"][div class=scroll style=bottom:0;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie enim sapien, et dignissim massa pellentesque nec. Aenean eu ante eu nulla pellentesque molestie nec sed tortor. Morbi a risus sed turpis venenatis cursus et at nulla. Ut vel leo purus. Donec sit amet tempor erat. Nunc iaculis ipsum at posuere aliquet. Duis sit amet massa et lorem rutrum tempor non mattis nunc. Sed pulvinar at nisi non tempor. Phasellus ut pretium tortor, in ornare tortor. Morbi diam ante, pellentesque vitae venenatis non, ultrices ut metus. Nunc sit amet ante feugiat lorem ultrices blandit.

Nulla maximus facilisis nulla. Cras nunc mi, imperdiet ut consequat sed, eleifend ut justo. Curabitur non auctor quam. Nullam id est ac sapien sagittis tincidunt eu at nibh. Praesent aliquam, lorem et pulvinar mattis, lorem ante elementum velit, vel euismod mauris neque ac arcu. Quisque eget accumsan nisl. Pellentesque pulvinar dignissim leo sed varius. Curabitur maximus accumsan libero vel cursus. Praesent fringilla vestibulum est, vel vulputate odio blandit sit amet. Integer a semper justo. Curabitur efficitur tristique lacus, nec mollis tortor mollis at. Morbi vel leo ac enim consequat consectetur id eu odio. Morbi vitae ante nec lorem tincidunt dignissim. Proin tempus, justo a efficitur hendrerit, dolor dui dignissim magna, sed pretium lorem odio sit amet dui.

Fusce sagittis eu purus non mattis. Quisque ut aliquam mauris. Etiam iaculis dignissim dui quis fermentum. Duis efficitur sapien quis tincidunt sollicitudin. Praesent consectetur lacus ipsum, sit amet commodo metus tristique convallis. Curabitur blandit diam id dapibus bibendum. Donec id pulvinar tellus. Nunc suscipit, ipsum non tempus fringilla, ligula libero ultrices nisl, at lobortis ante turpis eget neque. Mauris venenatis pulvinar neque et elementum. Mauris est libero, pharetra ac metus venenatis, viverra consequat risus. Nunc neque lectus, mollis in est at, elementum viverra neque. Suspendisse semper posuere ullamcorper.

Suspendisse potenti. Quisque feugiat congue ornare. Morbi mollis, neque vitae sagittis sagittis, justo nunc posuere elit, quis suscipit odio dui eu quam. Fusce eu sapien augue. Ut lobortis tincidunt diam non posuere. Integer quis lobortis libero. Nam quis mi nisi. Morbi eget dictum nunc, sit amet porta libero. In a tristique nibh. Vivamus metus nulla, mollis nec volutpat ut, dignissim non tortor. Nulla facilisi. Ut consequat diam tempor quam rhoncus imperdiet. Sed molestie augue a odio imperdiet, a vehicula arcu feugiat.

Sed fermentum bibendum risus, vitae imperdiet mauris ornare ac. Aenean non placerat magna, at scelerisque erat. Quisque nec lectus in dolor mattis pharetra ac id erat. Fusce id tincidunt dolor. In consequat eleifend justo eget euismod. Nam varius felis sed tellus malesuada bibendum. Morbi id sapien eu leo ultricies lobortis. Nunc ut vulputate mauris, non congue erat.​
[/div][/div][div class=button3] [div class=options][div class=Image3]View Image[/div][div class=Text3]View Text[/div][/div][/div]
[/div][/div][/div]

That is a quick and brief example on using BBscript with CSS Transitions. The only thing being changed here is the width of the slides and the opacity of the text. Since transition has been explained before, we only focused on the logic of the BBscript here. If there are any questions regarding what I showed, or anything about animations using BBscript and CSS Transitions, feel free to ask. Here is the full code for the example we used here.
Code: 
[nobr]

[class=base]
--img-w: 3200;
--img-h: 1512;
--bg-color: rgba(182, 0, 48, 0.8);
width: 100%;
padding-top: calc( var(--img-h)/var(--img-w) * 100%);
margin: 0 auto;
box-sizing: border-box;
border: 5px solid black;
border-radius: 20px;
background-image: url('https://www.rpnation.com/media/58839975_p0_waifu2x_art_scale_tta_1-png.34526/full');
background-size: cover;
position: relative;
overflow: hidden;
[/class]

[class=container]
position: absolute;
top: 0;
width: 100%;
height: 100%;
color: white;
[/class]

[class=left]
background-color: var(--bg-color);
width: 39.75%;
height: 100%;
border-right: 5px solid white;
box-sizing: border-box;
overflow:hidden;
top:0;
position: absolute;
transform-origin: top right;
transform: skewX(-30deg);
transition: all 1.5s ease-in-out;
[/class]

[class=titleL]
height: auto;
right: 0;
position: absolute;
writing-mode: vertical-rl;
box-sizing: border-box;
text-align: right;
font-size: 5vw;
transform: skewX(30deg) rotate(-150deg);
[/class]

[class=right]
background-color: var(--bg-color);
width: 62%;
height: 100%;
border-left: 5px solid white;
box-sizing: border-box;
overflow:hidden;
bottom: 0;
right: 0;
position: absolute;
transform-origin: bottom left;
transform: skewX(-30deg);
transition: all 1.5s ease-in-out;
[/class]

[class=titleR]
height: auto;
left: 0;
bottom:0;
position: absolute;
writing-mode: vertical-rl;
box-sizing: border-box;
text-align: left;
font-size: 5vw;
transform: skewX(30deg) rotate(-150deg);
[/class]

[class=contentR]
bottom: 0;
right: 0;
position: absolute;
width: 33.5%;
height: 100%;
padding: 5px;
box-sizing: border-box;
overflow:hidden;
transition: all .5s ease-in-out 1s;
[/class]

[class=contentL]
top: 0;
left: 0;
position: absolute;
height: 50%;
width: 21%;
padding: 5px;
box-sizing: border-box;
overflow:hidden;
transition: all .5s ease-in-out 1s;
[/class]

[class=scroll]
width: 100%;
height: 100%;
padding-right: 150px;
overflow-y:scroll;
position: relative;
[/class]

[class=opacity]
opacity:0;
transition: all .5s ease-in-out;
[/class]

[class=hide]
width: 0;
[/class]

[class=button]
color: white;
position: absolute;
bottom: 0;
left: 0;
padding: 5px;
cursor: pointer;
[/class]

[class=options]
display: inline;
width: 100px;
[/class]

[class=Image]
opacity:0;
position: absolute;
display:inline;
left:0
width: 0;
transition: all .3s ease-in-out;
white-space: nowrap;
[/class]

[class=Text]
opacity:0;
position: absolute;
display: inline;
left:0
width: 0;
transition: all .3s ease-in-out;
white-space: nowrap;
[/class]

[class=buttonShow]
opacity: 1;
width: 70px;
[/class]

[script=button]
set IsText 1
removeClass opacity contentL
removeClass opacity contentR
removeClass hide left
removeClass hide right
[/script]

[script class=button on=mouseenter]
if (eq ${IsText} 1) (addClass buttonShow Image) (addClass buttonShow Text)
[/script]

[script class=button on=mouseleave]
removeClass buttonShow Image
removeClass buttonShow Text
[/script]

[script class=button on=click]
if (eq ${IsText} 1) (addClass opacity contentL)
if (eq ${IsText} 1) (addClass opacity contentR)
if (eq ${IsText} 1) (addClass hide left)
if (eq ${IsText} 1) (addClass hide right)
if (eq ${IsText} 1) (removeClass buttonShow Image)
if (eq ${IsText} 0) (removeClass opacity contentL)
if (eq ${IsText} 0) (removeClass opacity contentR)
if (eq ${IsText} 0) (removeClass hide left)
if (eq ${IsText} 0) (removeClass hide right)
if (eq ${IsText} 0) (removeClass buttonShow Text)
if (eq ${IsText} 1) (set IsText 0) (set IsText 1)
[/script]

[/nobr][div class=base][div class=container]
[div class="left hide"][div class=titleL][font=Orbitron]User:[/font][/div][/div]
[div class="right hide"][div class=titleR][font=Orbitron]Name[/font][/div][/div]
[div class="contentL opacity"][div class=scroll style=top:0;][font=Lato]

Left Side Content

[/font][/div][/div]
[div class="contentR opacity"][div class=scroll style=bottom:0;][font=Lato][RIGHT]

Right Side Content

[/RIGHT]
[/font][/div][/div][div class=button][font=Orbitron][fa]fa-image fa-fw fa-lg[/fa] [div class=options][div class=Image]View Image[/div][div class=Text]View Text[/div][/div][/font][/div]
[/div][/div]
[/div][/div]
 
Last edited:
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

Alteras
Resource Text Templater — a plain text template to form field generator
Replies
3
Views
217
A Murder Of Corviknight
A Murder Of Corviknight
JCKane
Help Tabs messing up due to too much text?
Replies
12
Views
94
JCKane
JCKane
arsensonfire
Help Anyone's shop still open?
Replies
1
Views
238
The Dark Wizard
The Dark Wizard
mizton
Help quote bubble codes?
Replies
1
Views
148
Uxie
Uxie
roxybirdie
Closed music player button [resolved]
Replies
2
Views
409
roxybirdie
roxybirdie
Back
Top