Image Animation on Scroll

Is it possible to animate on scroll image for example like below from left? http://codepen.io/SitePoint/pen/MwEaQM

Yes you can that exact code. However you will have to copy the js from codepen and create your own js file with BSS, then create your html elements using drag and drop, and add replicate the CSS that you see with codepen.

It will take you time to manually do it yourself but you can then create your own component to use on as many projects as you want.

or.....

You can do the quick and easy way by using and creating custom code components, but you will be required to edit the code manually.

@tasost, Chris is right you should be able to do this it's pretty easy.

Here is the bare minimum to get it working.

You need the JS code, that's a given :)

Here is the CSS you need, anything else is purely styling for your content.

.animation-element {
  opacity:0;
  position:relative;
}

.animation-element.slide-left {
  opacity:0;
  -moz-transition:all 500ms linear;
  -webkit-transition:all 500ms linear;
  -o-transition:all 500ms linear;
  transition:all 500ms linear;
  -moz-transform:translate3d(-100px, 0px, 0px);
  -webkit-transform:translate3d(-100px, 0px, 0px);
  -o-transform:translate(-100px, 0px);
  -ms-transform:translate(-100px, 0px);
  transform:translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity:1;
  -moz-transform:translate3d(0px, 0px, 0px);
  -webkit-transform:translate3d(0px, 0px, 0px);
  -o-transform:translate(0px, 0px);
  -ms-transform:translate(0px, 0px);
  transform:translate3d(0px, 0px, 0px);
}

I say that because since your using the BSS app you should be using the row/column drag/drop HTML from the components pane to construct your content. This removes your need for a bunch of the other CSS from that codepen example because bootstrap handles all the spacing and media queries for you.

You just need to add the following classes to your columns that you will be having this applied to animation-element slide-left.

Here is what I did to test and figure this out.

I created a new project then right clicked on Javascript menu in the Design pane and selected "Create JS". Double clicked on untitled.js and copy/pasted the JS into it and clicked APPLY.

Then I wanted something easy to fill up the top part of the project so I drag/dropped the "Hero Technology" component to my project.

I then drag/dropped a container component to my project and then I wanted some easy predefined content so I drag/dropped the "Pretty Product List" component to my product.

Then I expanded the HTML pane and then the ATTRIBUTE pane and copy/pasted the 2 classes to each column and duplicated a column a few more times to get more items.

Opened up a Preview window and it just worked.

I think I'm actually going to use this in my current project, thanks :)

I actually made an Online component of it "Animated Pretty Product List", of course I screwed up the first time, the JS and some of the CSS wasn't included which means it didn't work so I have a second version up that says bug fixed in the description because I can't delete my failed first version.

Saj

Thank you both.

Saj.. amazing the component works like a charm!

Fantastic.

Just what I was looking for. Excellent forum!

FYI Greazy - animation on scroll is now support within the app direct - if you select an element or section you want to animate you can click the 3rd icon in the right hand nav menu and use drop downs to control how to animate your content.

Hope this helps

Hi

Totally newbie here :)

@saj Can I use the "Animated Pretty Product List" to create the animation on scroll? If so, I just need to use it? Could please tell me how? Can I change the animation direction or use a fade instead of the movement?

Thanks in advance for any help.

@rbuster

  • Absolutely
  • Yes
  • Drag/Drop to your project, to edit the list items, in the CSS uncheck the opacity:0 and the translate CSS properties. Recheck them to use
  • You can, it's just more complicated to do

At this point in time it would probably be easier to us the Animation Settings in the Options pane. It's located at the top right of the BSS app, just click on the Star icon. Select your element you want to animate and set the settings in the Animation Setting options.

Saj

Yes! It's exactly what I need. Thank you!

Even though I'm sure your using the Animation settings. I just posted v1.2 of Animated Pretty Product List. Removed the Hero, by default I have it in edit mode with the addition of the class dev (i.e. class="row product-list dev"). Just delete the dev class to use the animations, re-add it to go back into edit mode. Added fade/flip/rotate/[top left/right]/[bottom left/right].

It's for those that want more CSS than JS controlling it all :)

Saj