Goldlight Animations

Goldlight animations
for Gold Eyes Studio items

Goldlight is not linked to any other library. But they were developed in conjunction with Goldman and they are fully compatible.

Documentation

Goldlight css animations are specially designed for use on high quality websites. Extremely easy to use, Goldlight CSS is fully compatible with Goldman CSS and works very efficiently together. You can use interactive animations with scrolldown or mouseover. You can change the durations, delays and animation types of each individually. 

<!-- Animated item with mouse over on container -->
<div class="animated" data-animation="fadeInUp" data-animation-delay="300" data-animation-duration="250">
     Some great content
</div>

<!-- Animated item with mouse over on container -->
<div class="animated" data-animation="rotateIn" data-animation-delay="415" data-animation-duration="510">
     Some great content
</div>

<!-- Animated item with mouse over on container -->
<div class="animated" data-animation="zoomIn" data-animation-delay="530" data-animation-duration="725">
     Some great content
</div>

With the scroll trigger, it performs the animation as soon as each item enters the screen. You can also add a delay to these animated items. However, in long-height containers, this can create an uneven display depending on the scroll speed. So you can use the .animated-container class. If you give the parent .group element the .animated-group class, the child .animated elements will animate automatically when the .animated-group parent element in the screen.

This container has the class .animated-group and has a photo as a background or object.

rotateIn
blurIn
flipInX
zoomIn
rotateInRight

These animations can be used on unlimited elements. And each element can have its own animation, delay and duration.

All animations will be removed on mobile devices for save performance.

This page is developed with pure Goldman CSS. Goldlight and Goldman are fully compatible. Using them together is more efficient for performance and usability. 

<!-- Some group item -->
<div class="some-goldman-classes animated-group">

     <!-- Animated item with mouse over on container -->
     <div class="animated" data-animation="fadeInUp" data-animation-delay="300" data-animation-duration="250">
          Some great content
     </div>

     <!-- Animated item with mouse over on container -->
     <div class="animated" data-animation="rotateIn" data-animation-delay="415" data-animation-duration="510">
          Some great content
     </div>

     <!-- Animated item with mouse over on container -->
     <div class="animated" data-animation="zoomIn" data-animation-delay="530" data-animation-duration="725">
          Some great content
     </div>

</div>
<!-- End some group item -->

You can also use these animations with a mouseover trigger. Just give the container class .group and element .group-hover-anyAnimation class. With Classes you can add speed and delay. Like .animation-delay-400 or .animation-duration-600. 

<!-- Some group item -->
<div class="some-goldman-classes group">

     <!-- Animated item with mouse over on container -->
     <div class="group-hover-fadeIn animation-delay-0 animation-duration-500">
          Some great content
     </div>

     <!-- Animated item with mouse over on container -->
     <div class="group-hover-rotateInLeft animation-delay-400 animation-duration-400">
          Some great content
     </div>

     <!-- Animated item with mouse over on container -->
     <div class="group-hover-blurInReverse animation-delay-800 animation-duration-700">
          Some great content
     </div>

</div>
<!-- End some group item -->

You can find detailed documentation here. You can follow Gold Eyes Link Bundle for themes & templates developed with Goldman CSS and Goldlight CSS.