How to get nice animations

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
mrwillow
 
 
Posts: 34
Joined: Mon Jun 11, 2012 8:29 pm

How to get nice animations

Post by mrwillow » Wed May 23, 2018 3:26 pm

Hi,

I would like to animate a logo, it is a mandala consisting of three concentric circles. Two points. One, what appears to be the options in the CSS3 Animation tab seem pretty limited, first and foremost they whizz around too fast. In my mind's eye I would like a slow turning of each concentric circle, from 0 thickness swinging around to present face-on the full circle, and then the slow spin (I may have terms "turn" and "rotate" mixed up). Two, each of the three concentric circles is on its on file/layer, and therefore I am hoping to introduce each one, plus its animation, with c.1 second's difference between them.

Any ideas?

DC

User avatar
Pablo
 
Posts: 13012
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to get nice animations

Post by Pablo » Wed May 23, 2018 3:33 pm

The speed of the animation can be controlled with the 'Duration' property.
If you do not like the included animations then you can create your own animations in the Animation Manager.
http://www.wysiwygwebbuilder.com/animation.html

mrwillow
 
 
Posts: 34
Joined: Mon Jun 11, 2012 8:29 pm

Re: How to get nice animations

Post by mrwillow » Wed May 23, 2018 3:43 pm

Thank you

mrwillow
 
 
Posts: 34
Joined: Mon Jun 11, 2012 8:29 pm

Re: How to get nice animations

Post by mrwillow » Thu May 24, 2018 10:54 am

Hi Pablo,

There is another issue. My graphic designer friend came up with a mandala design, and I cannot get it to rotate 360 smoothly in WB12 - it kinda wobbles about its axis, and no matter how much fine-tweaking height or width it just will not rotate as if a perfect circle around its centre-point. My friend is not the kind of person to get a circle wrong, indeed he has animated it in After Effects, for a different purpose.

What to do, as the "transform-rotate" presently looks messy and unprofessional in WB12 ?

Please advise,

DC

User avatar
Pablo
 
Posts: 13012
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to get nice animations

Post by Pablo » Thu May 24, 2018 11:15 am

This has nothing to do with WB12. Animations are a standard HTML feature.
WWB only provides an easier way to add the animations to your website.
The functionality is implemented in the browser.

if the animation wobbles then you may need to change the transform origin.

mrwillow
 
 
Posts: 34
Joined: Mon Jun 11, 2012 8:29 pm

Re: How to get nice animations

Post by mrwillow » Thu May 24, 2018 2:18 pm

What does "transform origin" mean?

User avatar
Pablo
 
Posts: 13012
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to get nice animations

Post by Pablo » Thu May 24, 2018 2:42 pm

It specifies the center of the transformation
https://developer.mozilla.org/en-US/doc ... orm-origin

If you study the included animations then you will notice that some of them also use this property.

mrwillow
 
 
Posts: 34
Joined: Mon Jun 11, 2012 8:29 pm

Re: How to get nice animations

Post by mrwillow » Thu May 24, 2018 2:52 pm

Thank you. I get the idea of this, but not being a coder the technicalities kinda pass me by. In short, how do I specify that the transform origin of my circle is 0,0 ? Also, while I can definitely say that my friend produced a perfect circle, there is no need to assume that he provided a perfectly square PNG file in which the circle is placed. Could this have anything to do with the issue? And if so, how would I measure and crop appropriately ?

mrwillow
 
 
Posts: 34
Joined: Mon Jun 11, 2012 8:29 pm

Re: How to get nice animations

Post by mrwillow » Thu May 24, 2018 3:05 pm

Is there some code I can c&p into the object's HTML to alter its transform origin ? Or is there a software program that allows you to alter this ? How would I specify where the very centre of the circle is ?

User avatar
Pablo
 
Posts: 13012
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to get nice animations

Post by Pablo » Thu May 24, 2018 3:33 pm

I'm sorry , but without seeing what you have done it will be difficult to help you.
Please share your project file and describe exactly where what you want to do.

mrwillow
 
 
Posts: 34
Joined: Mon Jun 11, 2012 8:29 pm

Re: How to get nice animations

Post by mrwillow » Fri May 25, 2018 10:16 am

Hi,

I asked my graphic designer to redo, moving the transform origin. This solved it. Another little thing learned, thank you.

D.

Post Reply

Who is online

Users browsing this forum: Google [Bot] and 8 guests