Text / Photos Animation

jialejl

Hi guys,

Is it possible for me to add animations to texts and photos with customized CSS in SM? Would really appreciate it if anyone could help!

Hikin' Mike

Yes. You can do any custom stuff you want using a HTML/CSS Block. Well, everything except Javascript.

jialejl

@"Hikin' Mike"
How can I choose the objects that I want to animate? I've found a CSS animation generator from another thread - http://www.theappguruz.com/tag-tools/web/CSSAnimations/

Hikin' Mike

Using a HTML/CSS Block add this to your HTML Section. You need to replace Your Animation to what ever you want to animate.

<div class="fadeInLeftBig">

  Your Animation

</div>

Add this to your CSS section:

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
          animation-name: fadeInLeftBig;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeftBig {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

}

@keyframes fadeInLeftBig {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
              ansform: none;
  }

} 

jialejl

Thank you so much! I managed to add some animations to my site it really looked better.

I have another question here: I couldn't find out how to animate the photos in galleries/ carousel. How can I do that?

Hikin' Mike

@jialejl said:
I have another question here: I couldn't find out how to animate the photos in galleries/ carousel. How can I do that?

I can't see a way to do that. The animation is for single photos or text, not galleries, unless you have an example.

jialejl

@Hikin' Mike said:

@jialejl said:
I have another question here: I couldn't find out how to animate the photos in galleries/ carousel. How can I do that?

I can't see a way to do that. The animation is for single photos or text, not galleries, unless you have an example.

I see. Thank you again for helping out. I am satisfied with my site now!