Animate an object with "animate class" from "a" to "b" position

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Take a look at some frequently asked questions about us and our products!

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

Eduardo Alfaro

Hello David,

I am learning a lot with your software, thank you so much!!! I think it is really fantastic framework to develop mobile apps. Right know, I am learning because develop my own app, and I would like to animate a container from "a" position to "b" position when "swipe" event. I have tried the "animated class", and it is working as you told me in another post, but I do not know how to animate from "a" position to "b" position with "animated class" and keeping the cointainer on screen (do not want "in" or "out", just move from "a" to "b"). I can move the container with (for example): SetStyle "Container1" "left" "20px" , but I really do not know if I can animate the movement with "animated class".

Do you have any suggestion, idea, help... about how to accomplish this issue?

Thank you soooooooooo much!!!

Eduardo.

Samuel Vanneste

Hello Eduardo,
Perhaps could that example provide some idea ? http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_delay
and the related CSS tutorial http://www.w3schools.com/css/css3_animations.asp

DecSoft

Hello Eduardo,

First of all, honestly, I am not and expert in animations nor transitions effects. Animate.css, used in App Builder, is a more or less easy way to perform controls' animations just by using some prefedined CSS classes/animations, which is very good.

Taking a look at this "transform CSS" article in the Mozilla Developer Network we can view how the "transform" CSS property can help us at least in some particular cases, for example:

The above "animation" (in fact "transformation") is made by using the "SetStyle" action. Below we can view the "Click" event code of the "Transform it!" button:

SetStyle "Button1" "transition" "500ms"<br>SetStyle "Button1" "transform" "translateX(50px) rotate(10deg) translateY(5px)"

And, to reset the transformation we can simply do the following:

SetStyle "Button1" "transform" ""

We can enter in some problems when try to use transformations on hidden controls. However, I am prepare a couple of new application samples: "SwipeMenu2" and "SwipeMenu3". Both of them uses CSS transformations instead of CSS animations. And, additionally, the "SwipeMenu3" show how we can prepare a non scale swipe menu, which can be good, not only better (and easy) to apply the CSS transformations.

Update your App Builder copy guys in order to be ready with these new samples in addition with other minor fixes. And please, let me know if these all can help you in some way.

Purchase one or more licenses of our products if they are useful to you!

Eduardo Alfaro

No words to say!!! THANK YOU AGAIN!!!

Svanneste, I am learning... so your answer is priceless for me... thank you so much!!!
David, as usually, you are giving a great support!!! thank you again!!! Hope this kind of issues do not bored you... just wanted how to do things within your software!!! and maybe, helping to improve it for others!!!

BTW... Both answers are working like charm!!!! ;-D

DecSoft

Hello,

You're welcome Eduardo. And thanks to Samuel too. :)

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.