Using the animations?

Can I use the animations on image elements inside a normal joomla article or an custom html module?

What do I need to do to make a image animate in like in your demo http://demo.gavick.com/joomla25/creativity/ ?

Is it only possible with your special module for this or can I call the animations from anywhere?

You are writting in Creativity forum nd asking about creativity animations.
Please specify exactly what animations, from which template You would like to bring to post images.

Oh, I thought this was in the forum for the template: Creativity.

That is the one I am talking about.

I would like to animate images/blocks/divs as you scroll down as seen in your DEMO for the template Creativity.

I can't find any real documentation about these classes/javascripts: .animate .animate_queue and such? Are these classes possible to use inside normal articles and custom html modules? ..

Say I make a few divs with some images and want them to fade in as I scroll down (as seen in you demo) what can I do? How can I call these effects/animations?

Or are they only possible to use in your own components modules the GK News and GK Image module?

CSS3 knowledge needed

What You need is a set of elements:

Code: Select all

<div class="myelement animate">
<img src="..." alt="" />
</div>


first is class of your specific element, second makes it animate (well not quite yet). This way element will show as soon as it is on screen.

The other way:

Code: Select all

<div class="myelement animate_queue">
<img class="animate_queue_element" src="..." alt="" />
<img class="animate_queue_element" src="..." alt="" />
<img class="animate_queue_element" src="..." alt="" />
</div>


This type of code is used to create queue of animations.

Now all the magic happends when You scroll down through the page, and Javascript detects that element is now "visible". It adds loaded class to it.
Now with this knowledge there is just one step to do - You need css3 classes that transform css parameters between element without loaded class and with:

Code: Select all

/* Portfolio - animation */
.gkNspPM-Portfolio .animate_queue_element {
   opacity: 0; filter: alpha(opacity=0);
   position: relative;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all .4s ease-out!important;
   -moz-transition: all .4s ease-out!important;
   -ms-transition: all .4s ease-out!important;
   -o-transition: all .4s ease-out!important;
   transition: all .4s ease-out!important;   
}

.gkNspPM-Portfolio .animate_queue_element.loaded {
   opacity: 1; filter: alpha(opacity=100);
   top: 0;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}


This part works with portfolio. What it does is set default scale and opacity of elements to 0 (1rst block of declarations), adds transition type speed and kind ( .4s ease-out) and then, if element gets class loaded, opacity and scale is changed to normal state. This way animation happends.

Code: Select all

.gkTestimonial.animate {
   opacity: 0; filter: alpha(opacity=0);
   position: relative;
   -webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
   -ms-transition: all .4s ease-out;
   -o-transition: all .4s ease-out;
   transition: all .4s ease-out;
}

.gkTestimonial.animate.loaded {
   opacity: 1; filter: alpha(opacity=100);
}


This way You animate only opacity.

You can animate also potision, width, height, and quite all numerical values.

Thanks very much for this explanation!

So this .loaded class is part of all web browsers? part of CSS3? (like :hover?) and can be used in this way?

When something comes into the viewport of the browser it gets a .loaded class right?

No, the loaded class is added by our javascript file - it watches when user scrolls page, checks if any of "watched" elements comes to viewport, and if so, adds .loaded class to it. Its done in this script:
templates/gk_creativity/js/gk.scripts.js
with this part of code:

Code: Select all

window.addEvent('scroll', function() {
   // animate all right sliders
   if(elementsToAnimate.length > 0) {      
      // get the necessary values and positions
      var currentPosition = window.getScroll().y;
      var windowHeight = window.getSize().y;
      // iterate throught the elements to animate
      if(elementsToAnimate.length) {
         for(var i = 0; i < elementsToAnimate.length; i++) {
            if(elementsToAnimate[i][2] < currentPosition + (windowHeight / 1.75)) {
               // create a handle to the element
               var element = elementsToAnimate[i][1];
               // check the animation type
               if(elementsToAnimate[i][0] == 'animation') {
                  gkAddClass(element, 'loaded', false);
                  // clean the array element
                  elementsToAnimate[i] = null;
               }
               // if there is a queue animation
               else if(elementsToAnimate[i][0] == 'queue_anim') {
                  element.getElements('.animate_queue_element').each(function(item, j) {
                     gkAddClass(item, 'loaded', j);
                  });
                  // clean the array element
                  elementsToAnimate[i] = null;
               }
            }
         }
         // clean the array
         elementsToAnimate = elementsToAnimate.clean();
      }
   }
});


Great! Thanks again!

Hi,

I would also like to know, I'm running the Creativity Template. I would like to animate new content on the frontpage, like a series of paragraphe and images ...

I might have some UL too

Where do we know what animation does what ? (From the template, like fades, slides, etc) and how can we apply them to knew content using the current styles / class

Thanks !

@fredetco - I have described all above - You need at lest modern css3 knowledge to do your own animations (or animate new elements).
To get the knowledge, search for good tutorials about css3 animations.

I have successfully made some great animations. I have one minor problem though I can't seem to figure out a solution to (if there is one at all)...

When I aniamte an object -300px left to 0 in my mobile phone I get a horizontal scroll. Its like my website is 300px wider (because of the aniamted obejcts left/right).

Is there a way to make these objects not take any width from start?

You could put on animating objects parent element overflow:hidden - it should prevent it from stretching outside viewport.

I am not quite sure where to put it on this site here: http://www.joomlaproffs.se/ .. I do get an horisontal scroll here. Do you have a suggestion on which element to put overflow hidden on?

Could You tell me which element exactly makes scroll bar show on Your desktop?
I have tested on Mac Chrome and everything seems looking fine.