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
particle video and source
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.
0
10
20
90
100