fancoolo-fx 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/release.yml +27 -0
- package/README.md +1 -1
- package/package.json +1 -1
- package/src/fx.js +154 -6
- package/wp-plugin/fancoolo-fx/assets/ScrollTrigger.min.js +11 -0
- package/wp-plugin/fancoolo-fx/assets/SplitText.min.js +11 -0
- package/wp-plugin/fancoolo-fx/assets/fx.js +534 -0
- package/wp-plugin/fancoolo-fx/assets/gsap.min.js +11 -0
- package/wp-plugin/fancoolo-fx/fancoolo-fx.php +439 -0
- package/wp-plugin/fancoolo-fx/readme.txt +77 -0
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
=== Fancoolo FX ===
|
|
2
|
+
Contributors: krstivoja
|
|
3
|
+
Tags: animation, gsap, scroll, gutenberg, blocks
|
|
4
|
+
Requires at least: 5.8
|
|
5
|
+
Tested up to: 6.8
|
|
6
|
+
Requires PHP: 7.4
|
|
7
|
+
Stable tag: 1.0.0
|
|
8
|
+
License: ISC
|
|
9
|
+
|
|
10
|
+
A class-driven GSAP animation wrapper. Add CSS classes in Gutenberg and get animations.
|
|
11
|
+
|
|
12
|
+
== Description ==
|
|
13
|
+
|
|
14
|
+
Fancoolo FX wraps GSAP, ScrollTrigger, and SplitText into a simple class-based animation system designed for WordPress and Gutenberg.
|
|
15
|
+
|
|
16
|
+
**How it works:**
|
|
17
|
+
|
|
18
|
+
1. Activate the plugin
|
|
19
|
+
2. Edit any block in Gutenberg
|
|
20
|
+
3. Add a class like `fx-text-reveal-st` in the "Additional CSS classes" field
|
|
21
|
+
4. The block animates on scroll
|
|
22
|
+
|
|
23
|
+
**5 Built-in Effects:**
|
|
24
|
+
|
|
25
|
+
* **Text Reveal** (`fx-text-reveal`) — Split text into lines with masked reveal
|
|
26
|
+
* **Reveal** (`fx-reveal`) — Slide up with fade
|
|
27
|
+
* **Spin Reveal** (`fx-spin-reveal`) — Rotate and scale in
|
|
28
|
+
* **BG Reveal** (`fx-bg-reveal`) — Background slide up
|
|
29
|
+
* **Scale In** (`fx-scale-in`) — Scale up with fade
|
|
30
|
+
|
|
31
|
+
**Trigger Modes:**
|
|
32
|
+
|
|
33
|
+
* `-pl` suffix — Animate on page load
|
|
34
|
+
* `-st` suffix — Animate on scroll
|
|
35
|
+
* No suffix inside a `<section>` — Auto scroll-triggered
|
|
36
|
+
|
|
37
|
+
**Modifier Classes:**
|
|
38
|
+
|
|
39
|
+
* `fx-duration-[2]` — Custom duration
|
|
40
|
+
* `fx-delay-[0.3]` — Custom delay
|
|
41
|
+
* `fx-stagger-[0.25]` — Custom stagger
|
|
42
|
+
* `fx-ease-[power2.inOut]` — Custom easing
|
|
43
|
+
* `fx-start-[top center]` — Custom scroll trigger position
|
|
44
|
+
|
|
45
|
+
**Custom JavaScript Editor:**
|
|
46
|
+
|
|
47
|
+
Go to Appearance > Fancoolo FX to write custom animation sequences or configure tagMap for zero-class auto-animation.
|
|
48
|
+
|
|
49
|
+
== Installation ==
|
|
50
|
+
|
|
51
|
+
1. Upload the `fancoolo-fx` folder to `/wp-content/plugins/`
|
|
52
|
+
2. Activate through the Plugins menu
|
|
53
|
+
3. Add `.fx-*` classes to blocks in Gutenberg
|
|
54
|
+
|
|
55
|
+
== Frequently Asked Questions ==
|
|
56
|
+
|
|
57
|
+
= Do I need to write any JavaScript? =
|
|
58
|
+
|
|
59
|
+
No. Just add CSS classes to blocks in Gutenberg. For advanced use, the plugin includes a JavaScript editor under Appearance > Fancoolo FX.
|
|
60
|
+
|
|
61
|
+
= Does it work with any theme? =
|
|
62
|
+
|
|
63
|
+
Yes. The plugin loads GSAP and the animation wrapper on the frontend regardless of theme.
|
|
64
|
+
|
|
65
|
+
= Can I customize the scroll trigger position? =
|
|
66
|
+
|
|
67
|
+
Yes. Use the `fx-start-[top center]` modifier class, or set `scrollStart` in the custom JavaScript editor.
|
|
68
|
+
|
|
69
|
+
== Changelog ==
|
|
70
|
+
|
|
71
|
+
= 1.0.0 =
|
|
72
|
+
* Initial release
|
|
73
|
+
* 5 animation effects
|
|
74
|
+
* Page load, scroll trigger, and section trigger modes
|
|
75
|
+
* Modifier classes for timing overrides
|
|
76
|
+
* Custom JavaScript editor with CodeMirror
|
|
77
|
+
* Built-in quick reference table
|