We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

Addressing html transitions for PopUp Windows

Home › Forums › General Questions › Addressing html transitions for PopUp Windows

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • 2023-05-10 at 8:49 am #63626
    vjecht169
    Customer

    Hello,

    it’s me again :)

    I have been working with Webflow in the meantime and also managed to link Verge3D and Webflow.

    The goal is that I click on a 3D object and a window pops up that has a transition animation (scale, opacity etc).

    Now I have a concrete problem that I do not know how to design transitions when opening windows within puzzles.
    Attached is an attempt of a puzzle where I tried to copy Html from Webflow, but it didn’t work.

    Here is the example of how I want it and what currently works :)

    https://v3d.net/jcs

    Thanks for help :)

    • This topic was modified 11 months, 1 week ago by vjecht169.
    Attachments:
    You must be logged in to view attached files.
    2023-05-10 at 11:40 am #63643
    Yuri Kovelenov
    Staff

    Hi vjecht169,

    Here is one of possible ways how to implement CSS animation with Verge3D Puzzles:

    Attachments:
    You must be logged in to view attached files.

    Chief 3D Verger | LinkedIn | Twitter

    2023-05-10 at 4:04 pm #63652
    vjecht169
    Customer

    Hey,
    thank you for your reply…

    I tried to adapt your puzzle, but unfortunately it didn’t work …

    Attached you´ll find my puzzle and a screenshot of the html (with F12)
    Here you see, that Section02 is grey…

    What am I doing wrong? :cry:

    Best :bye:

    Attachments:
    You must be logged in to view attached files.
    2023-05-10 at 11:12 pm #63655
    kdv
    Participant
    vjecht169 wrote:

    What am I doing wrong?

    you’re making mistakes

    remove spaces between scale3d and arguments. And in your case Section02 is not a class name. Use .section-2 instead of .Section02 when creating your CSS rule.

    And you should use this puzzle before starting the animation to show the window

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

    2023-05-12 at 10:23 am #63712
    vjecht169
    Customer

    Hello,
    I have implemented your suggestions and everything went wonderfully so far.
    Thanks again. :good:

    But now I have the problem that when opening the window via the green area the first time everything works wonderfully. The window remains until I click on X.

    The 2nd time I click, the window opens, but does not remain and closes again immediately ?
    I have tried many things – also in Webflow – but unfortunately have not come to a result?

    https://v3d.net/jcs

    I hope you can help me -again- ;-)

    • This reply was modified 11 months, 1 week ago by vjecht169.
    Attachments:
    You must be logged in to view attached files.
    2023-05-12 at 11:04 am #63714
    kdv
    Participant

    The window doesn’t disappear, it just scales to 0 when the animation ends.

    When you click for the first time the default scale is 1. When the animation ends the scale is set to the default value and you see the window as expected.

    When you click X the default scale is set to 0 (but the window is still visible).

    As a result at the end of the second animation the scale is set to 0 and the window “disappears”.

    You need to set the scale back to 1 and hide the window after clicking X.

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

    2023-05-12 at 11:39 am #63720
    vjecht169
    Customer

    Wow it works…

    thanks a lot – you´re great :good:

    2023-05-19 at 10:44 pm #63886
    tlaloco
    Participant

    How can I display a menu when I press a volume button like this?

    • This reply was modified 11 months, 1 week ago by tlaloco.
    Attachments:
    You must be logged in to view attached files.
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.