refs#31135 - parallax animation paragraph

modules/edw_paragraphs_parallax_component/README.md

@@ -0,0 +1,81 @@
+EDW Paragraphs Parallax Component
+=============================================
+
+Provides a Parallax paragraph that displays layered content with GSAP-powered scrolling animations.
+
+#### Parallax Component
+| Field label          | Field name                | Description                                                        | Field type             | Cardinality | Required | Translatable | Widget         |
+|----------------------|-------------------------  |--------------------------------------------------------------------|------------------------|-------------|----------|--------------|----------------|
+| Title                | field_title               | Text title displayed in the section                                | Text (plain)           | Single      | No       | Yes          | Text field     |
+| Text                 | field_text                | Paragraph text content                                             | Text (plain, long)     | Single      | No       | Yes          | Text area      |
+| Image                | field_media               | Image displayed in the parallax section                            | Media entity reference | Single      | No       | No           | Media library  |
+| Animation for Title  | field_animation_for_title | Defines GSAP animation type for the title (e.g. slide-up)          | List (text)            | Single      | No       | No           | Select list    |
+| Animation for Text   | field_animation_for_text  | Defines GSAP animation type for the text (e.g. slide-right)        | List (text)            | Single      | No       | No           | Select list    |
+| Animation for Image  | field_animation_for_image | Defines GSAP animation type for the image (e.g. slide-up)          | List (text)            | Single      | No       | No           | Select list    |
+| Vertical Layout      | field_vertical_layout     | Check to display image and text vertically                         | Boolean                | Single      | No       | No           | Checkbox       |
+| Reverse Layout       | field_reverse_layout      | Check to display text first and image after                        | Boolean                | Single      | No       | No           | Checkbox       |
+| Full-width           | field_full_width          | Makes the parallax section full-width                              | Boolean                | Single      | No       | No           | Checkbox       |
+| Background Color     | field_background_color    | Selects background color variant (e.g. Navy)                       | List (text)            | Single      | No       | No           | Select list    |
+| Text Color           | field_text_color          | Selects text color variant (e.g. White)                            | List (text)            | Single      | No       | No           | Select list    |
+
+---
+
+GSAP Library Integration
+
+This module uses GSAP (GreenSock Animation Platform) for parallax and scroll animations.
+
+Step 1: Add the GSAP package to your composer.json
+
+Add the following repository entry under "repositories":
+
+{
+    "type": "package",
+    "package": {
+        "name": "greensock/gsap",
+        "version": "3.12.5",
+        "type": "drupal-library",
+        "dist": {
+            "url": "https://github.com/greensock/GSAP/archive/refs/tags/3.12.5.zip",
+            "type": "zip"
+        }
+    }
+}
+
+
+Step 2: Install GSAP
+
+composer require greensock/gsap
+
+
+Step 3: Verify installation
+
+After installation, GSAP will be available under:
+libraries/gsap/
+
+Then, update the library definition in:
+edw_paragraphs_parallax_component.libraries.yml
+to
+
+parallax_gsap:
+  css:
+    theme:
+      css/parallax-component.css: {}
+  js:
+    libraries/gsap/gsap.min.js: {}
+
+
+Usage
+
+Once enabled, this module provides a Parallax component paragraph type.
+
+Editors can:
+
+Add an image, title, and text content.
+
+Control animation direction for each element (title, text, image).
+
+Toggle vertical or reverse layout.
+
+Choose background and text color styles.
+
+Make the section full-width if needed.

modules/edw_paragraphs_parallax_component/config/optional/core.entity_form_display.paragraph.parallax_component.default.yml

@@ -0,0 +1,100 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.field.paragraph.parallax_component.field_animation_for_image
+    - field.field.paragraph.parallax_component.field_animation_for_text
+    - field.field.paragraph.parallax_component.field_animation_for_title
+    - field.field.paragraph.parallax_component.field_background_color
+    - field.field.paragraph.parallax_component.field_full_width
+    - field.field.paragraph.parallax_component.field_media
+    - field.field.paragraph.parallax_component.field_reverse_layout
+    - field.field.paragraph.parallax_component.field_text
+    - field.field.paragraph.parallax_component.field_text_color
+    - field.field.paragraph.parallax_component.field_title
+    - field.field.paragraph.parallax_component.field_vertical_layout
+    - paragraphs.paragraphs_type.parallax_component
+  module:
+    - media_library
+id: paragraph.parallax_component.default
+targetEntityType: paragraph
+bundle: parallax_component
+mode: default
+content:
+  field_animation_for_image:
+    type: options_select
+    weight: 4
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_animation_for_text:
+    type: options_select
+    weight: 5
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_animation_for_title:
+    type: options_select
+    weight: 6
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_background_color:
+    type: options_select
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_full_width:
+    type: boolean_checkbox
+    weight: 9
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  field_media:
+    type: media_library_widget
+    weight: 12
+    region: content
+    settings:
+      media_types: {  }
+    third_party_settings: {  }
+  field_reverse_layout:
+    type: boolean_checkbox
+    weight: 7
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  field_text:
+    type: string_textarea
+    weight: 1
+    region: content
+    settings:
+      rows: 5
+      placeholder: ''
+    third_party_settings: {  }
+  field_text_color:
+    type: options_select
+    weight: 11
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_title:
+    type: string_textfield
+    weight: 0
+    region: content
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+  field_vertical_layout:
+    type: boolean_checkbox
+    weight: 8
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true

modules/edw_paragraphs_parallax_component/config/optional/core.entity_view_display.paragraph.parallax_component.default.yml

@@ -0,0 +1,114 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.field.paragraph.parallax_component.field_animation_for_image
+    - field.field.paragraph.parallax_component.field_animation_for_text
+    - field.field.paragraph.parallax_component.field_animation_for_title
+    - field.field.paragraph.parallax_component.field_background_color
+    - field.field.paragraph.parallax_component.field_full_width
+    - field.field.paragraph.parallax_component.field_media
+    - field.field.paragraph.parallax_component.field_reverse_layout
+    - field.field.paragraph.parallax_component.field_text
+    - field.field.paragraph.parallax_component.field_text_color
+    - field.field.paragraph.parallax_component.field_title
+    - field.field.paragraph.parallax_component.field_vertical_layout
+    - paragraphs.paragraphs_type.parallax_component
+  module:
+    - options
+id: paragraph.parallax_component.default
+targetEntityType: paragraph
+bundle: parallax_component
+mode: default
+content:
+  field_animation_for_image:
+    type: list_default
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    weight: 6
+    region: content
+  field_animation_for_text:
+    type: list_default
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    weight: 5
+    region: content
+  field_animation_for_title:
+    type: list_default
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    weight: 4
+    region: content
+  field_background_color:
+    type: list_default
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    weight: 10
+    region: content
+  field_full_width:
+    type: boolean
+    label: above
+    settings:
+      format: default
+      format_custom_false: ''
+      format_custom_true: ''
+    third_party_settings: {  }
+    weight: 9
+    region: content
+  field_media:
+    type: entity_reference_entity_view
+    label: hidden
+    settings:
+      view_mode: default
+      link: false
+    third_party_settings: {  }
+    weight: 12
+    region: content
+  field_reverse_layout:
+    type: boolean
+    label: above
+    settings:
+      format: default
+      format_custom_false: ''
+      format_custom_true: ''
+    third_party_settings: {  }
+    weight: 7
+    region: content
+  field_text:
+    type: basic_string
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    weight: 1
+    region: content
+  field_text_color:
+    type: list_default
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    weight: 11
+    region: content
+  field_title:
+    type: string
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    weight: 0
+    region: content
+  field_vertical_layout:
+    type: boolean
+    label: above
+    settings:
+      format: default
+      format_custom_false: ''
+      format_custom_true: ''
+    third_party_settings: {  }
+    weight: 8
+    region: content
+hidden:
+  search_api_excerpt: true

modules/edw_paragraphs_parallax_component/config/optional/core.entity_view_mode.paragraph.preview.yml

@@ -0,0 +1,12 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - paragraphs
+_core:
+  default_config_hash: h3BeHVei4Lnyqbkao3YiF4KqoY-DhRvUNfEgKG8Rgjg
+id: paragraph.preview
+label: Preview
+description: ''
+targetEntityType: paragraph
+cache: true

modules/edw_paragraphs_parallax_component/config/optional/field.field.paragraph.parallax_component.field_animation_for_image.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_animation_for_image
+    - paragraphs.paragraphs_type.parallax_component
+  module:
+    - options
+id: paragraph.parallax_component.field_animation_for_image
+field_name: field_animation_for_image
+entity_type: paragraph
+bundle: parallax_component
+label: 'Animation for Image'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: list_string

modules/edw_paragraphs_parallax_component/config/optional/field.field.paragraph.parallax_component.field_animation_for_text.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_animation_for_text
+    - paragraphs.paragraphs_type.parallax_component
+  module:
+    - options
+id: paragraph.parallax_component.field_animation_for_text
+field_name: field_animation_for_text
+entity_type: paragraph
+bundle: parallax_component
+label: 'Animation for Text'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: list_string

modules/edw_paragraphs_parallax_component/config/optional/field.field.paragraph.parallax_component.field_animation_for_title.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_animation_for_title
+    - paragraphs.paragraphs_type.parallax_component
+  module:
+    - options
+id: paragraph.parallax_component.field_animation_for_title
+field_name: field_animation_for_title
+entity_type: paragraph
+bundle: parallax_component
+label: 'Animation for Title'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: list_string

modules/edw_paragraphs_parallax_component/config/optional/field.field.paragraph.parallax_component.field_background_color.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_background_color
+    - paragraphs.paragraphs_type.parallax_component
+  module:
+    - options
+id: paragraph.parallax_component.field_background_color
+field_name: field_background_color
+entity_type: paragraph
+bundle: parallax_component
+label: 'Background Color'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: list_string