{"id":21937,"date":"2024-06-20T08:55:17","date_gmt":"2024-06-19T23:55:17","guid":{"rendered":"http:\/\/localhost\/blog\/?page_id=21937"},"modified":"2024-09-24T11:35:22","modified_gmt":"2024-09-24T11:35:22","slug":"guide-en-animation","status":"publish","type":"post","link":"https:\/\/wordpress.pandassi.com\/hellopanda\/guide-en-animation\/","title":{"rendered":"Scroll animation\u00a0settings"},"content":{"rendered":"\n
<\/span>\"\"
\n
\n

HELLOPANDA MANUAL<\/p>\n\n\n\n

Scroll animation<\/strong> settings<\/p>\n\n\n\n

<\/rect><\/svg><\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n
\n
\n
<\/span>\"\"
\n
\n
\n

Security while<\/strong><\/p>\n\n\n\n

<\/path><\/svg><\/div><\/div>\n\n\n\n

Cuts; about a third of the US’s estimated annual 400,000 knife injuries are kitchen-related.<\/p>\n<\/div>\n\n\n\n

\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n
<\/span>\"\"
\n
\n
\n

delicious pizza<\/strong><\/strong><\/p>\n\n\n\n

<\/path><\/svg><\/div><\/div>\n\n\n\n

Design when entering Hangul. Since the width is fixed, it is good to adjust it appropriately.<\/p>\n<\/div>\n\n\n\n

\n<\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n

01<\/strong><\/p>\n<\/div>\n\n\n\n

\n
\n

Setting up scroll animation<\/p>\n\n\n\n

hellopanda WP manual<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n
\n
\n
\n
\n

Animate On Scroll Library<\/p>\n\n\n\n

<\/rect><\/svg><\/div><\/div>\n\n\n\n

The Hellopanda theme adopts and uses the AOS scroll library. This is a feature implemented in the block theme style to make it easier to use the AOS library, so check the AOS site for more information.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
<\/path><\/path><\/svg><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

1.<\/p>\n\n\n\n

\n

Run the block editor.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

2.<\/p>\n\n\n\n

\n

Select the Block Inserter toggle.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

3.<\/p>\n\n\n\n

\n

Select and insert one of several blocks to which scroll animation can be applied.<\/p>\n\n\n\n

\n

Quotation<\/p>\n\n\n\n

Internal quote<\/p>\n\n\n\n

group<\/p>\n\n\n\n

column<\/p>\n\n\n\n

cover<\/p>\n\n\n\n

image<\/p>\n\n\n\n

More information<\/p>\n<\/div>\n\n\n\n

Animation can only be applied to image or box-type content.
I hope you don’t give too many effects at similar timing. This may be a heavy script for some users.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

4.<\/p>\n\n\n\n

\n

Select the inserted block to open the style panel on the right side of the screen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Open the Scroll Animations tab and turn on the Enable toggle.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

5.<\/p>\n\n\n\n

\n

Check the two options and toggle them on or off depending on your situation.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

( Activated only once<\/strong> ) If the animation was executed after the screen was scrolled, the animation will no longer be executed.<\/p>\n\n\n\n

( Activates even in reverse scrolling<\/strong> ) The animation runs even when content is encountered when the screen is raised to the top.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

6.<\/p>\n\n\n\n

\n

Set the animation effect.<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n

7.<\/p>\n\n\n\n

\n

Set the animation’s time-related properties.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Activation Delay<\/strong> ) You can set the time to pause for a certain period of time when encountering content to scroll. (unit of ms, 1 second = 1000)<\/p>\n\n\n\n

Play Time<\/strong> ) You can set the time the animation runs. (unit of ms, 1 second = 1000)<\/p>\n\n\n\n

Activation time<\/strong> ) You can decide whether the animation will start earlier or later from the center point of the content when scrolling.
For example, if you want the animation to start faster when scrolling down the screen, write a negative number like this (-500). Then it starts 500px early.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n\n\n\n
\n
GUIDE HOME<\/a><\/div>\n<\/div>\n\n\n\n
<\/div>\n","protected":false},"excerpt":{"rendered":"

1. Run the block editor. 2. Select the Block Inserter toggle. 3. Select and insert one of several blocks to which scroll animation can be applied. Quotation Internal quote group column cover image More information Animation can only be applied to image or box-type content. I hope you don’t give too many effects at similar […]<\/p>\n","protected":false},"author":1,"featured_media":23010,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,6],"tags":[],"class_list":["post-21937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guide-en","category-guide"],"_links":{"self":[{"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/posts\/21937"}],"collection":[{"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/comments?post=21937"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/posts\/21937\/revisions"}],"predecessor-version":[{"id":22621,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/posts\/21937\/revisions\/22621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/media\/23010"}],"wp:attachment":[{"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/media?parent=21937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/categories?post=21937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.pandassi.com\/hellopanda\/wp-json\/wp\/v2\/tags?post=21937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}