Animated backgrounds, dividers
Two columns

Animated shape dividers

Turns off on mobile (in CSS) 

All margins and padding set in pixels. Section has been set to have padding when collapsed down. Spacing is base 16. 

Default widgets space is 0 

Column has 30px padding on right side. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Two columns

Add Your Heading Text Here

All margins and padding set in pixels. Section has been set to have padding when collapsed down. Spacing is base 16. 

Default widgets space is 0 

Column has 30px padding on right side. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Two columns

Animated shape dividers

Turns off on mobile (in CSS) 

All margins and padding set in pixels. Section has been set to have padding when collapsed down. Spacing is base 16. 

Default widgets space is 0 

Column has 30px padding on right side. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Two columns

Add Your Heading Text Here

All margins and padding set in pixels. Section has been set to have padding when collapsed down. Spacing is base 16. 

Default widgets space is 0 

Column has 30px padding on right side. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

column assigned to #particles-js
call script in html below

particles appear in ele, but not on live site 

Animated gradient background, 9 seconds

https://www.gradient-animator.com/

for settings and config 

Rotating animation, 3 times
Set at column level

Sliding and fade in

Sliding col and fade in on entry

Infinite spin, set at icon

Line going across, slowly, infinte

Image set to animate across. Column set to clip overflow.

On hover, animate Set colour in CSS

Add Your Heading Text Here

On hover, go sideways

Add Your Heading Text Here

use css transitions for buttons (work better than animations)

Need a website?

Repeating element

The container’s 0, starts from the corner of the container its in
Absolute positioning
The animation is in css in the element

Image – has css applied to it 
For elements to appear in sequence, the timing of each is the same (4 seconds). 
Add a delay in each, so the loop doesnt start again too quickly (2 sec)  
The pause difference between elements is added in the percent timings in the animation.

10
20
90
100

Fade in up 

Column container is assigned class. Customize CSS has code. 
The class can be assigned to any element. 
Hover effect is on the element itself. 
To fire in view class is assigned: .in-view 
JS to control this is in snippets 

Fade in up 

Column container is assigned class. Customize CSS has code. 
The class can be assigned to any element.