[css-round-display][motion-path] Integrate polar positioning of CSS Round Display to Motion Path · Issue #214 · w3c/csswg-drafts (original) (raw)

Skip to content

Navigation Menu

• • GitHub Copilot Write better code with AI
  • GitHub Advanced Security Find and fix vulnerabilities
  • Actions Automate any workflow
  • Codespaces Instant dev environments
  • Issues Plan and track work
  • Code Review Manage code changes
  • Discussions Collaborate outside of code
  • Code Search Find more, search less
• Explore
  • Learning Pathways
  • Events & Webinars
  • Ebooks & Whitepapers
  • Customer Stories
  • Partners
  • Executive Insights
• • GitHub Sponsors Fund open source developers
  • The ReadME Project GitHub community articles
• • Enterprise platform AI-powered developer platform
• Pricing

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sign up

Description

At the SF f2f, there was an resolution [1][2] to integrate polar positioning to Motion Path [3].
Some properties from CSS Round Display are merged into Motion Path:

• polar-angle + motion-path => offset-path (add < angle > as value)
• polar-distance + motion-offset => offset-distance
• polar-origin => offset-position
• polar-anchor => offset-anchor

My extra proposal(Not included in the resolution):

• 2d rotation transform extension + motion-rotation => offset-rotation

I wrote the draft [4] about that to discharge the resolution.
Are there any missing parts or incorrect things?

Properties have the following meanings:

• offset-path: define the path that an element can move along
• offset-position: define the initial position of the path
  • initial position: the position when "offset-distance: 0"
• offset-distance: set the position along the path
• offset-anchor: specify the origin of the element

There are some issues that I would like to discuss:

• Need for 'offset-position'
• Initial value of 'offset-rotation'

[1] https://lists.w3.org/Archives/Public/www-style/2016May/0233.html
[2] https://lists.w3.org/Archives/Public/www-archive/2016May/att-0000/whiteboard.jpg
[3] https://drafts.fxtf.org/motion-1/
[4] https://drafts.csswg.org/css-round-display/#positioning-content