Animate CSS Properties in V3D

This topic has 5 replies, 2 voices, and was last updated 2 years, 9 months ago by xeon.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
2021-07-20 at 6:09 pm #43057

jdhutchinson
Customer

Hi,

Is there any puzzle to animate a CSS poperty, for example onclick <element> amend properry (eg opacity) transition 2s?

2021-07-20 at 10:12 pm #43067

xeon
Customer

You could use the javascript puzzle.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2021-07-21 at 12:04 am #43071

jdhutchinson
Customer

What I found is that I can animate HTML elements using on click and simply setting the properties with puzzles.

It wasn’t easy… I was trying to fade in and out a particular element depending on selection of something else.

2021-07-21 at 4:06 am #43075

xeon
Customer

Glad it worked out. I dont use puzzles to control CSS or HTML using that method so good to know.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2021-07-21 at 6:12 pm #43100

jdhutchinson
Customer

My method is kinda not so elegant. See the attached. Essentially I do the transition, and then disable click through my specifying after a certain amount of time elapses. It’s kind of strange, because you might think the puzzles areinterpreted line by line, but they’re sort of more in parallel.

I’m on the lookout for a more elegant solution, because strong arming the display:none to just do it after the animation elapses via my manual input isn’t so great I don’t think.

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

2021-07-21 at 6:39 pm #43103

xeon
Customer

Nice… any chance of a link to see it in action?

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com
Author

Posts