Can't get the kind of animation I need!!

[makros]

Hello all ,

I have created an animation combining with css3 and event but can't set up it the way I want it to work.
Please take a look at below and if anyone can help me to fix this.I spent a lot of time on this with no success.



For example:
when the on mouseover the top left black ractengular then phone hand will rotate towards it,
when clicking on the same black rectangular then the car moves from the phone towards the rectangular (slide-out-blurred-top Animation).

Event Set up for Retangular:
onmousemove >Rotate> target=layoutgrid5
onlick>Animatecss3>Target=layoutgrid7
onclick>timerstart>Timer1
onmouseleave>rotate.target=layoutgrid5
onmouseleave>animatecss3>target=image1

I have two issues with it:

1-The car gets blurred.
2-The car passes over rectangular.

I want the car to stop when it gets to rectangular and not pass it over and with no car getting blurred.
when the car gets to rectangular then the timer will redirect to the link I have set up .
I know that I have chosen the slide-out-blurred animation because I can not find any other close to what I wanted.

I know I am doing something wrong here and if someone can help me to fix this with a guide on how can I set it up correctly would be much appreciated.

Thanks in advance

[Pablo]

I am not sure if this can be done with the standard tools. This may require a custom script, because this a very specific requirement.

[makros]

I am not sure if this can be done with the standard tools. This may require a custom script because this a very specific requirement.

Thanks for your reply back.

All I needed is just to move 50px the car move forward after clicking the shape but It seems not possible to achieve that.

Anyway, thanks.

[makros]

Now let's say I send the HTML and other related files to a developer and I get it done and send it back to me.

Now how I can continue to work on the page as it is not a project page anymore and I read from the help tutorial that If I import the HTML with the builder then everything will mess up.

Any solution for this?

Thank you

[makros]

Sorry for asking multiple questions as I am new to this builder .

Another issue I am having is with this card which I am trying to make an event for it to target an image with animation but it does not work.
I test with an image and it is working fine ...but not working with the card and I need this with the card.

I have no clue what is wrong.
I wonder if any other one has encountered the same problem or help to fix this.

Thanks in advance.

[Pablo]

Now let's say I send the HTML and other related files to a developer and I get it done and send it back to me.
Now how I can continue to work on the page as it is not a project page anymore and I read from the help tutorial that If I import the HTML with the builder then everything will mess up.

You can use the HTML object to add custom HTML code to the page.

If you need further assistance then please share a demo project so we can see what you have done.
Before you share the project, remove all content from the project that is not relevant to your question so it's immediately clear what you are trying to do.

See this FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134

[makros]

Thanks for feed back.

Below is the project file.



as mentioned earlier ,the event is not working when I want to give an event to the top left black rectangular targeting the layoutgrid5 or image1 with rotate 50 or any number.

Thank you for taking look at this.

[Pablo]

Thanks for the project, but can you please remove everything that is not relevant to your question? There is too much content, I have no idea where to start looking.
Also, can you include the images?

[makros]

Here is the zip files with images, project file and HTML page too.
I have deleted all other objects and layouts.

There are two objects as two-card and two images only.

I have saved the open page as a project.

Is that the correct way to save as the project?
please let me know if the above is not convenient for you.

thank you

[Pablo]

Here are the steps to prepare your project for support:

- in your project select 'Save As -> Web Builder project',
- save the project under a different name
- remove all pages, except the one that your question is about.
- on that page remove all elements that are not relevant to your question.
- so, basically your project should have one page and one object unless other object are needed to demonstrate what you are trying to do.

[makros]

Here are the steps to prepare your project for support:

- in your project select 'Save As -> Web Builder project',
- save the project under a different name
- remove all pages, except the one that your question is about.
- on that page remove all elements that are not relevant to your question.
- so, basically your project should have one page and one object unless other object are needed to demonstrate what you are trying to do.

Thanks for the instructions.

I think I have done with your instruction.

Thanks

[Pablo]

Thank you for the updated project.

Now can you please describe what you would like to change about the current behavior?

[makros]

Thank you for the updated project.

Now can you please describe what you would like to change about the current behavior?

I want when mouse over the card then the handphone rotates towards the card and when the mouse leaves then return back.
when click on the card then the car only moves towards the direction and stops just before the card or at the above center middle of the card.

The main issue for me is that making events for the card is not working at least for me now.
Thanks

[Pablo]

I'm sorry, this can only be done with a script. This cannot be done with CSS or events only.
The reason for this is because events use JavaScript and animations use CSS, so if you try to combine these two this will cause a conflict.
CSS is not aware of the changes made by the JavaScript and vise versa.

[makros]

I'm sorry, this can only be done with a script. This cannot be done with CSS or events only.

I see .

I think then its better to take the event tab from the card object if it is not working as I spent hours and hours trying to figure out why it is not working.
or this can be fixed in the next update/

Thanks for taking your time on this.

[Pablo]

Events are working, but not in this case.

The reason for this is because events use JavaScript and animations use CSS, so if you try to combine these two this will cause a conflict.
CSS is not aware of the changes made by the JavaScript and vise versa.

[makros]

Events are working, but not in this case.

The reason for this is because events use JavaScript and animations use CSS, so if you try to combine these two this will cause a conflict.
CSS is not aware of the changes made by the JavaScript and vise versa.

I am not a coder but why is that it is working with an image?

[Pablo]

An image is a single HTML element, a card is made up from many different HTML elements.

[makros]

An image is a single HTML element, a card is made up from many different HTML elements.

OK ,Got it.

Thank You

[makros]

Pablo ,

Is that possible to help me to achieve and fix this issue for my project since I need this.

I include the project here so you can take a look at it and I will pay for this.
Please let me know.

Description;
After clicking the top left and right banner button then the car comes out and move towards the button.

I want this not to move out slow in a normal and without blurry.

www.******.com/carsa/speed-car.wbs

Thanks for your time

[Pablo]

I'm sorry, this is very specific so I do not have a standard solution for this.
You will either need to write a script for this or create your own animation (with the Animation Manager).
For me, this may also take a lot of time to implement this, so this is not something I can help you with.

[makros]

Thanks, Pablo for your feedback and time.

Cheers!

[makros]

Please let me get back to this issue again.

I have managed to fix this animation issue by a coder editing the CSS file.

As I have set up from tools>option to generate the external CSS file for the pages, so I need to put this new code into css file.
The code is not a newly generated code by the coder but the existing one has been edited.

my question is how I can do this as there is no direct access to the code from the builder.

It would be great if there would be an easy outline for me to get this done.

Thanks again

[Pablo]

Which modifications were made to the code?
If only the animation was changed then you may be able to make the changes it the Animation Manager.

Or else you can add custom code via the Page HTML or the HTML object.

[makros]

Which modifications were made to the code?
If only the animation was changed then you may be able to put make the changes it he Animation Manager.

Or else you can add custom code via the Page HTML or the HTML object.

Thanks for your guideline.

I will do and see what I can do.