Version 2.5.1 is out!

Announcements
1

Hey folks, I am happy to report that version 2.5.1 was just released, and you can upgrade to it right now! This release is dedicated to animations:

  • CSS animations are now paused by default and we added a "Play" button in the CSS editor to start them. This was a much needed improvement, as until now CSS animations were started immediately in the app, making it difficult to select components and use drag and drop.
  • Components can now be animated from the new Animation section in the Options panel. You can choose from a number of eye-catching scroll and hover animations. This feature uses the AOS (animate on scroll) and Animate.css libraries behind the scenes, which are both very popular libraries with great cross browser support.

With these features, you can easily create fancy animated web pages without dealing with libraries and writing JS. We will continue exploring animations in the next releases when we create a new "Parallax" block.

Looking forward to your feedback!

2

Bravo gents, AOS is great and welcomed edition to the tool kit ?

3

Interesting, nice additions, I like the concept and ability to input in the sidebar.

A few quick observations.

1.) I figured the animations would be allowed to be turned on and off (toggled) for the entire page? But from what I see and understand, you have to directly select something with animation applied to it and press play individually. Unless I missed something?

2.) There seems to be no way to set the number of times an animation occurs. For instance, if you want to do something twice to call action / attention, for instance say bounce a button. Or is there?

3.) With the the onScroll duration and delay why not allow direct user input and just append the “ms” to the input?

4.) Am I correct in seeing that the animation references do not appear in the HTML code window and are only available on Preview or Exporting ?

<hr />

— Again I think the user input on the side panel is a nice approach. Do you ever forsee allowing the same for CSS in general from a more graphic point of view in the app? I have posted a formal question here: - https://bootstrapstudio.io/forums/topic/css-gui-suggestion/

— Any further response to the following discussion about JS? - https://bootstrapstudio.io/forums/topic/version-2-4-5-is-here/#post-2551

4

Awesome addition, thanks!

5

Looking forward to the parallax block. Hoping for blocks like Mobirise has.

6

Thank you for the feedback!

@BSS_User

1.) I figured the animations would be allowed to be turned on and off (toggled) for the entire page? But from what I see and understand, you have to directly select something with animation applied to it and press play individually. Unless I missed something?

We added support only for playing individual CSS animations by clicking the "Play" button next to the animation property in the CSS editor. Enabling all animations could be added in the next releases as some kind of mode switch. This mode could allow you to interact with the page so that you can try out hover styles, animations and transitions, without selecting components and dragging and dropping.

2.) There seems to be no way to set the number of times an animation occurs. For instance, if you want to do something twice to call action / attention, for instance say bounce a button. Or is there?

We added support only for the most common/basic animation use cases. A graphical interface is a poor fit for more complex cases, and you will need to write code for that. The scroll animations use AOS behind the scenes, and it doesn't support running animations multiple times. Maybe custom coded CSS animations are the way to achieve this.

3.) With the the onScroll duration and delay why not allow direct user input and just append the “ms” to the input?

This is a limitation of the AOS library. It only supports a limited set of durations, as they are hardcoded in the library's CSS file directly. Maybe a slider would be a better UI than the dropdown we currently use.

4.) Am I correct in seeing that the animation references do not appear in the HTML code window and are only available on Preview or Exporting ?

You are correct. Animation attributes and classes aren't added in the app itself, only when previewing and exporting.

Any further response to the following discussion about JS?

JS can't be added to the application, sorry. It is not technically possible to do safely, and it will be catastrophic to expect people to never screw up their code. It can only be done in a new process with its own window, but by that point you have an alternative to the current Preview, which you can already use to test your code.

@Ricksworks more blocks and themes are coming in the next releases :)

7

Hi @martin, you're welcome, thanks for responding.

1.) Adding a toggle for all animation would be a great addition, I hope to see it added.

2.) I was thinking of Animate.css (super popular) which has "animLoop", so animLoop02 = 2x , as well as "animLoopInfinite", via simple class assignments

3.) Ah, ok. Yes perhaps a slider would be cleaner UI.

4.) Ok, just making sure I was not missing something.

5.) I have a hard time accepting this ideal and inability, but um.. ok. ;-)

8

Hello Martin, first of all thanks for this great tool, i am using aos quite a while, but now as builtin: awesome! I am looking forward to the parallax implementation. Some thoughts about this: What about animating lets say "three Layers". The Background will move very slowly, while the midlayer moves a little bit faster and the content in the frontlayer moves fast. And last but not least; the animation speed is adjustable.

Some interesting implementations are: http://keithclark.co.uk/articles/pure-css-parallax-websites/ http://callmenick.com/post/advanced-parallax-scrolling-effect

Regards, AG

9

bumping this to ask that you build in an animation option to control if users wants to repeat animation when scrolling up and down or only once per page load.

question came up in this topic - https://bootstrapstudio.io/forums/topic/animation-on-scroll/#post-3351