Join the Webstudio community

Updated 7 months ago

Transition is out in ui panel

At a glance

The post announces that the transition feature is now available in the UI Panel, and the community members discuss how to use it to change the opacity of an image on hover. One community member suggests that transitions should be defined without state to work consistently, and provides a link to the Mozilla Developer documentation. Another community member shares a project link to demonstrate the issue, and the discussion focuses on how to properly implement the transition effect using separate elements for the images.

Useful resources
Ooooh nice ! Transition is out in UI Panel ❀️ Thanks and congrats! πŸ™
Attachment
SCR-20240612-kvua.png
M
B
18 comments
Did you define it without state or on hover state?
on hover state. I'm trying to change image on hover and I'd like to achieve this with an opacity transition
This means the transition is supported only while cursor hovers instance. When not hovers browser just switches styles.
So you need to define transition without state to make it always work.
hmm sorry not sure to understand.

Transition are define not on my hover state but on default state and it should work but seems not...
Please share the project
Moreover the transition is not accessible on hover (perfect)
Attachment
SCR-20240612-lggr.png
where to look?
Do you expect images to morph into each other on hover?
Transitions animate only computable values like colors, sizes, opacity, transform
I'd like that when I hover the image it change to the other but with opacity. Thought transition was ok?
It is ok but images should be defined on different elements. So when top one gets opacity 0 the other one reveals
discrete values like image url are just switched without any transition
ok I gonna try this! thanks Bogdan πŸ™‚
Add a reply
Sign up and join the conversation on Discord