Hi!
Is it possible to make two images rotate around the Y axis like this only using javascript?
This would involve having two pngs in the same position, changing the width of each one in a loop.
WixCode understands all of Javascript, except for anything that accesses the DOM. This keeps the user from inadvertently “breaking” something. Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w.
This means that it’s not possible to manipulate the size/placement of an element in code.
One exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You can embed your rotating image(s) in an HtmlComponent using whatever Javascript (and HTML) that you want. You just can’t try to trick it by using parent, window, top, etc. Same goes with the Javascript evaluate() function. It is sandboxed and does not allow access to the DOM.
You can also use Wix Animations for some animation effects, and Wix Code also supports SVG .
Hi Yisrael!
Thanks for your answer.
-
It’s not possible with SVG because you can’t do perspective transforms (or fake them with Skew)
-
It’s not possible with CSS because wix doesn’t allow CSS.
So I’m still wondering how best to do this. I know that this is theoretically possible within wix because the “flip” animation within the wix editor is exactly what i want to do; however there is some easing or possibly a delay which make smooth rotation impossible.
Because Wix does not allow access to the DOM, certain actions will be impossible. It could very well be that you won’t be able to do what you want with Wix Code.
@ Josh Rackstraw
what you are wanting to do can be achieved by creating a animated .gif
upload your images to a gif generator online then upload the animated gif onto your wix website
@mikemoynihan99 That’s not what he wants to do. It’s not as much fun. Believe me - I know.
In the end I used CSS and a HTML iframe. It works fine, I will have to test compatibility on other devices.
Okay, there is a problem with iframes: you can’t do onClick events. Is there anyway i can put an onClick event in the HTML and have it do a function in the page?
I am really crossing my fingers on this one…
You can handle the onClick events (standard HTML/Javascript) in the code that’s embedded in the HtmlComponent. The onClick event handlers would then send a message to the page code for handling. See the article Wix Code: Working with the HTML Element for details.