Animation over embedded interactive element

Discussion Ask a question
, ,
1

Question:
Hello,
I want to embed a 3d object (by iframe) which visitors can turn 360 degrees. As many users don’t realize that the “image” can be turned by swiping, I want to add on top of the object a apng or lottie animation of a finger swiping left and right, to hint about the fact that the object is interactive. However, in this case if the users swipe on the surface of the apng/lottie, nothing will happen as this is on top of the interactive element and the swipe will not have an impact on the 360 element. Is there any way to keep the animation, apng or lottie, on top of the 3d element from visibility point of view, but make the object under it respond to the swipes?

Product:
Wix studio

2

2-Options for you:

  1. controlling the opacity of the HTML-Component (iFrame)
    In this case your HTML-Component will be in front (layer).
    As soon as user swipes → sending data to html-comp. telling it to control opacity → HTML-Comp. gets visible and cover the swipe gif/lottie-anim.

  2. Including lottie anim inside the HTML-comp.
    But i think → lot of coding.

1 Like