8000 Add animation by khanh-devos · Pull Request #7 · google/typograms · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
This repository was archived by the owner on Jan 21, 2025. It is now read-only.

Add animation #7

8000 Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Conversation

khanh-devos
Copy link
@khanh-devos khanh-devos commented Aug 23, 2023

Good morning Samuel Goto,
I am Khanh. I am happy to make this contribution to your repo to add an animation feature. Below is its description.

  • Create a new file animate.
  • Keep the origin file unchanged except the browser file (but the concept is the same).
  • Set the format below as a frame to declare a new animation (toggle from item 1 to item n)
    @(animate:{time:1000, repeat:true, width:2000, height:100})
    (
    animated_item_0 ... item_n
    )@{className}
  • "className" is used to define different animations
  • "time:1000" is an interval while animating.
  • "width" and "height" are properties of a parent SVG to contain the animated child svgs.
  • Without the first line and the frame ( ... )@{className}, the app will run normally.
  • This is my GitHub repo (vite config) to show this

Passion: support writers to have more power to describe some key cases in their e-books.
My sixth sense told me that the code is not professional enough. If you have any ideas, please tell me. I am very happy to learn from you.

- Create a new file animate.
- Keep the origin file unchanged except the browser file.
- Set the format below a frame to declare the animation.
	@(animate:{time:1000, repeat:true, width:2000, height:100})
	(
		animated_item_0 ... item_n
	)@{className}
- Without the first line and the frame ()@{className}, the app will run normally.
- Width and height is properties of a parent SVG to contain the animated child svg.
@piranna
Copy link
piranna commented Dec 29, 2023

An example or a test showing what's the actual animation format would help a lot to understand the code.

@seppestas
Copy link

@piranna, a demo of this feature is here: https://www.loom.com/share/a6e1bde3acfa41268aa37bad186e0312

I am personally not a fan of this animation feature because it makes typograms no longer "WYSIWYG", but I guess you always have the option to just not use it :).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants
0