Design Synth

Facebook Pinterest Youtube
Menu

WordPress + GSAP ScrollTrigger Animation Tutorial | Elementor Website Design

by

WordPress + GSAP ScrollTrigger Animation Tutorial | Elementor Website Design

WordPress + GSAP ScrollTrigger Animation Tutorial | Elementor Website Design

WordPress + GSAP ScrollTrigger Animation Tutorial | Elementor Website Design

Explore the World→ Discover The Best Destination In The World It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. (9)

Overview

This tutorial covers how to build a stylish WordPress website with the Elementor page builder and GSAP ScrollTrigger animations, in addition we will be creating a professional, simple design for our website’s header section.

 

Created a shoe store website containing the following sections:

 

A header section, containing: logo, navigation menu, and an Order Now button

A hero section containing: large title and product picture

Product section containing: four cards displaying shoe products

Featured section featuring: a grid layout, displaying featured items

 

Additionally, we created a scroll animation using GSAP & ScrollTrigger, animating our shoe image to different locations in relation to scrolling down the page.

🧱 Step 1: Theme Setup

For our project, we selected Astra, because it is fast, lightweight, and works extremely well with Elementor.

To install Astra:

  1. Log-in to your WordPress Dashboard
  2. Click on Appearance → Themes
  3. Click on Add New
  4. Search for Astra
  5. Install and activate Astra

The Astra theme is beginner friendly and allows you complete design control when using Elementor to build a website.

This will make the overall design easy to manage and perfectly consistent throughout all pages of the site.

🧱 Step 2: Install Required Plugins

You will need these plugins:

1: Elementor
  1. Elementor (Free Page Builder)
  2. ULTIMATE ADDONS FOR ELEMENTOR (Lite Version) – A library of additional widgets for use with Elementor.
1: Essential Plugins:

  1. WordPress Dashboard

  2. Go to Plugins → Add New

  3. Search each plugin by name

  4. Install and activate

This gives a very premium quality look and feel of winter fashion.

🧱 Step 3: Create Your Header

We created a custom header with Elementor Header & Footer Builder.

Step-by-Step:
1. Create the Header Template:

  • Go to UAE → Header & Footer Builder

  • Click Add New

  • Enter a name (example: Header)

  • Select Type of Template → Header

  • Set Display On → Entire Website

2. Main Container Settings:
  • Direction: Row
  • Gap: 20px
  • Width: 100%
  • Minimum Height: 90px
  • Center aligned
  • Background: Light gradient colour #F4F4F4
  • Top/Bot Padding: 0px, left and right 90px
3. The three-column layout for the Header:
Left Column (15%)
  • Logo
  • Center aligned
  • Logo Width: 50%
Centre Column (65%)
  • Add Navigation Menu widget
  • Typography: Roboto, 18px, 600 weight
  • Navigation colour: black
  • Hover Colour: Purple colour #9c6ea0
  • Menu Name: top-menu
Right Column (20%)
  • Add “Order Now” button
  • Icon: Arrow Circle Right
  • Typography: Roboto, 20px, 500 weight
  • Background: Purple colour (#9C6EA0)
  • Border Radius: 30px
4. Create Your WordPress Menu:
  • Go to Appearance → Menus
  • Create A New Menu Named: Top-Menu
  • Add “Home”, “Products”, “About”, “Contact” etc.
  • Save
5. Publish Your Header:
  • Click Publish
  • Display Conditions → Entire Site
  • Save

🧱 Step 4: The Creation of the Hero Section

Step-by-Step:
1. Make a New Page:
  • Go to Pages → Add New
  • Name it “Home”
  • Click Edit with Elementor
2. Hero Section How-to:
  • Class: hero
  • Height: 100 vh
  • Padding: 0-90 px
  • Layout: Row
  • Center structure.
3. Three-Column Hero Layout::
Left Column (20%)
  • Column height: 80vh.
  • Column orientation: column.
  • Column pads: space between above and below each column.
  • Add to column: three colored dots; heading (rotated)reads “Colors,” (-90°).
Centre Column (60%)
  • “Shose” — 38 px
  • “Fitville” — 200 px. Button, purple, with 30 px border radius.
Right Column (20%)

  • Add rotated text: “Follow Us” (90°)

  • Divider

  • Social icons (Facebook, Twitter, YouTube)

Add the Animated Shose Image:

  • Add Image widget

  • ID: shose

  • Position: Absolute

  • X offset: 221px

  • Y offset: 23px

  • Rotation: -35°

  • Width: 80%

🧱 Step 5: The Creation Of the Product Section

Product Section Settings:

  • Class: product

  • Height: 100vh

  • Padding: 0 90px

Section Layout:
  • “FITVILLE” – 150px
  • “Product” – 50px, absolute
  • “Sale” – 25px, absolute

  • Row layout

  • Four product cards with image, title, price

🧱 Step 6: Featured Area

Featured Section Settings:

  • Class: featured

  • Height: 100vh

  • Padding: 0 90px

Layout:
Left Column (50%):

  • One large product image

Right Column (50%):
  • Grid layout with six product images

🧱 Step 7: GSAP Scroll Animation

We have incorporated an HTML widget where we wrote GSAP code.

What is this Animation doing?:

  • Shoe moves down to 145%

  • Moves to center (50% left)

  • Shrinks to 25% width

  • Rotation becomes 0°

What is this Animation doing?:
  • Shoe moves further to 235%
  • Moves slightly left (-2%)
  • Width increases to 40%
  • Rotates to -45°

✨ Remember the following:

  • The Elementor header builder allows for easy header creation

  • A good header will have a logo, menu, and clear calls to action

  • GSAP gives nice smooth animations to help you create an animated experience on your website

  • Clearly organize the sections of your website

  • Make sure you have a responsive website

  • Keep your website lightweight so that it performs well

     

     

Previous Post

WordPress + GSAP ScrollTrigger Animation Tutorial | Elementor Website Design

Related Post

Luxury Perfume Website Animation with GSAP

Design Synth

Welcome to Design Synth! Enter the world of web design, where art meets code. Find awesome designs, practice new techniques, and churn out stunning digital experiences that excite and engage an audience.

Facebook Pinterest Youtube

Popular Posts

4 (1)
No posts found

Explore Topics

4 (1)

Tag Clouds

4 (1)
Explore the World→ Discover The Best Destination In The World It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. (9)

Overview

This tutorial covers how to build a stylish WordPress website with the Elementor page builder and GSAP ScrollTrigger animations, in addition we will be creating a professional, simple design for our website’s header section.

 

Created a shoe store website containing the following sections:

 

A header section, containing: logo, navigation menu, and an Order Now button

A hero section containing: large title and product picture

Product section containing: four cards displaying shoe products

Featured section featuring: a grid layout, displaying featured items

 

Additionally, we created a scroll animation using GSAP & ScrollTrigger, animating our shoe image to different locations in relation to scrolling down the page.

🧱 Step 1: Theme Setup

For our project, we selected Astra, because it is fast, lightweight, and works extremely well with Elementor.

To install Astra:

  1. Log-in to your WordPress Dashboard
  2. Click on Appearance → Themes
  3. Click on Add New
  4. Search for Astra
  5. Install and activate Astra

The Astra theme is beginner friendly and allows you complete design control when using Elementor to build a website.

This will make the overall design easy to manage and perfectly consistent throughout all pages of the site.

🧱 Step 2: Install Required Plugins

You will need these plugins:

1: Elementor
  1. Elementor (Free Page Builder)
  2. ULTIMATE ADDONS FOR ELEMENTOR (Lite Version) – A library of additional widgets for use with Elementor.
1: Essential Plugins:

  1. WordPress Dashboard

  2. Go to Plugins → Add New

  3. Search each plugin by name

  4. Install and activate

This gives a very premium quality look and feel of winter fashion.

🧱 Step 3: Create Your Header

We created a custom header with Elementor Header & Footer Builder.

Step-by-Step:
1. Create the Header Template:

  • Go to UAE → Header & Footer Builder

  • Click Add New

  • Enter a name (example: Header)

  • Select Type of Template → Header

  • Set Display On → Entire Website

2. Main Container Settings:
  • Direction: Row
  • Gap: 20px
  • Width: 100%
  • Minimum Height: 90px
  • Center aligned
  • Background: Light gradient colour #F4F4F4
  • Top/Bot Padding: 0px, left and right 90px
3. The three-column layout for the Header:
Left Column (15%)
  • Logo
  • Center aligned
  • Logo Width: 50%
Centre Column (65%)
  • Add Navigation Menu widget
  • Typography: Roboto, 18px, 600 weight
  • Navigation colour: black
  • Hover Colour: Purple colour #9c6ea0
  • Menu Name: top-menu
Right Column (20%)
  • Add “Order Now” button
  • Icon: Arrow Circle Right
  • Typography: Roboto, 20px, 500 weight
  • Background: Purple colour (#9C6EA0)
  • Border Radius: 30px
4. Create Your WordPress Menu:
  • Go to Appearance → Menus
  • Create A New Menu Named: Top-Menu
  • Add “Home”, “Products”, “About”, “Contact” etc.
  • Save
5. Publish Your Header:
  • Click Publish
  • Display Conditions → Entire Site
  • Save

🧱 Step 4: The Creation of the Hero Section

Step-by-Step:
1. Make a New Page:
  • Go to Pages → Add New
  • Name it “Home”
  • Click Edit with Elementor
2. Hero Section How-to:
  • Class: hero
  • Height: 100 vh
  • Padding: 0-90 px
  • Layout: Row
  • Center structure.
3. Three-Column Hero Layout::
Left Column (20%)
  • Column height: 80vh.
  • Column orientation: column.
  • Column pads: space between above and below each column.
  • Add to column: three colored dots; heading (rotated)reads “Colors,” (-90°).
Centre Column (60%)
  • “Shose” — 38 px
  • “Fitville” — 200 px. Button, purple, with 30 px border radius.
Right Column (20%)

  • Add rotated text: “Follow Us” (90°)

  • Divider

  • Social icons (Facebook, Twitter, YouTube)

Add the Animated Shose Image:

  • Add Image widget

  • ID: shose

  • Position: Absolute

  • X offset: 221px

  • Y offset: 23px

  • Rotation: -35°

  • Width: 80%

🧱 Step 5: The Creation Of the Product Section

Product Section Settings:

  • Class: product

  • Height: 100vh

  • Padding: 0 90px

Section Layout:
  • “FITVILLE” – 150px
  • “Product” – 50px, absolute
  • “Sale” – 25px, absolute

  • Row layout

  • Four product cards with image, title, price

🧱 Step 6: Featured Area

Featured Section Settings:

  • Class: featured

  • Height: 100vh

  • Padding: 0 90px

Layout:
Left Column (50%):

  • One large product image

Right Column (50%):
  • Grid layout with six product images

🧱 Step 7: GSAP Scroll Animation

We have incorporated an HTML widget where we wrote GSAP code.

What is this Animation doing?:

  • Shoe moves down to 145%

  • Moves to center (50% left)

  • Shrinks to 25% width

  • Rotation becomes 0°

What is this Animation doing?:
  • Shoe moves further to 235%
  • Moves slightly left (-2%)
  • Width increases to 40%
  • Rotates to -45°

✨ Remember the following:

  • The Elementor header builder allows for easy header creation

  • A good header will have a logo, menu, and clear calls to action

  • GSAP gives nice smooth animations to help you create an animated experience on your website

  • Clearly organize the sections of your website

  • Make sure you have a responsive website

  • Keep your website lightweight so that it performs well

     

     

Previous Post

WordPress + GSAP ScrollTrigger Animation Tutorial | Elementor Website Design

Related Post

Luxury Perfume Website Animation with GSAP

Design Synth

Welcome to Design Synth! Enter the world of web design, where art meets code. Find awesome designs, practice new techniques, and churn out stunning digital experiences that excite and engage an audience.

Facebook Pinterest Youtube

Popular Posts

4 (1)
No posts found

Explore Topics

4 (1)

Tag Clouds

4 (1)
Explore the World→ Discover The Best Destination In The World It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. (9)
Overview

This tutorial covers how to build a stylish WordPress website with the Elementor page builder and GSAP ScrollTrigger animations, in addition we will be creating a professional, simple design for our website’s header section.

Created a shoe store website containing the following sections:

A header section, containing: logo, navigation menu, and an Order Now button

A hero section containing: large title and product picture

Product section containing: four cards displaying shoe products

Featured section featuring: a grid layout, displaying featured items

Additionally, we created a scroll animation using GSAP & ScrollTrigger, animating our shoe image to different locations in relation to scrolling down the page.

🧱 Step 1: Theme Setup

For our project, we selected Astra, because it is fast, lightweight, and works extremely well with Elementor.

To install Astra:

  1. Log-in to your WordPress Dashboard
  2. Click on Appearance → Themes
  3. Click on Add New
  4. Search for Astra
  5. Install and activate Astra

The Astra theme is beginner friendly and allows you complete design control when using Elementor to build a website.

This will make the overall design easy to manage and perfectly consistent throughout all pages of the site.

🧱 Step 2: Install Required Plugins

You will need these plugins:

1: Elementor
  1. Elementor (Free Page Builder)
  2. ULTIMATE ADDONS FOR ELEMENTOR (Lite Version) – A library of additional widgets for use with Elementor.
1: Essential Plugins:

  1. WordPress Dashboard

  2. Go to Plugins → Add New

  3. Search each plugin by name

  4. Install and activate

This gives a very premium quality look and feel of winter fashion.

🧱 Step 3: Create Your Header

We created a custom header with Elementor Header & Footer Builder.

Step-by-Step:
1. Create the Header Template:

  • Go to UAE → Header & Footer Builder

  • Click Add New

  • Enter a name (example: Header)

  • Select Type of Template → Header

  • Set Display On → Entire Website

2. Main Container Settings:
  • Direction: Row
  • Gap: 20px
  • Width: 100%
  • Minimum Height: 90px
  • Center aligned
  • Background: Light gradient colour #F4F4F4
  • Top/Bot Padding: 0px, left and right 90px
3. The three-column layout for the Header:
Left Column (15%)
  • Logo
  • Center aligned
  • Logo Width: 50%
Centre Column (65%)
  • Add Navigation Menu widget
  • Typography: Roboto, 18px, 600 weight
  • Navigation colour: black
  • Hover Colour: Purple colour #9c6ea0
  • Menu Name: top-menu
Right Column (20%)
  • Add “Order Now” button
  • Icon: Arrow Circle Right
  • Typography: Roboto, 20px, 500 weight
  • Background: Purple colour (#9C6EA0)
  • Border Radius: 30px
4. Create Your WordPress Menu:
  • Go to Appearance → Menus
  • Create A New Menu Named: Top-Menu
  • Add “Home”, “Products”, “About”, “Contact” etc.
  • Save
5. Publish Your Header:
  • Click Publish
  • Display Conditions → Entire Site
  • Save
🧱 Step 4: The Creation of the Hero Section
Step-by-Step:
1. Make a New Page:
  • Go to Pages → Add New
  • Name it “Home”
  • Click Edit with Elementor
2. Hero Section How-to:
  • Class: hero
  • Height: 100 vh
  • Padding: 0-90 px
  • Layout: Row
  • Center structure.
3. Three-Column Hero Layout::
Left Column (20%)
  • Column height: 80vh.
  • Column orientation: column.
  • Column pads: space between above and below each column.
  • Add to column: three colored dots; heading (rotated)reads “Colors,” (-90°).
Centre Column (60%)
  • “Shose” — 38 px
  • “Fitville” — 200 px. Button, purple, with 30 px border radius.
Right Column (20%)

  • Add rotated text: “Follow Us” (90°)

  • Divider

  • Social icons (Facebook, Twitter, YouTube)

Add the Animated Shose Image:

  • Add Image widget

  • ID: shose

  • Position: Absolute

  • X offset: 221px

  • Y offset: 23px

  • Rotation: -35°

  • Width: 80%

🧱 Step 5: The Creation Of the Product Section
Product Section Settings:

  • Class: product

  • Height: 100vh

  • Padding: 0 90px

Section Layout:
  • “FITVILLE” – 150px
  • “Product” – 50px, absolute
  • “Sale” – 25px, absolute

  • Row layout

  • Four product cards with image, title, price

🧱 Step 6: Featured Area
Featured Section Settings:

  • Class: featured

  • Height: 100vh

  • Padding: 0 90px

Layout:
Left Column (50%):

  • One large product image

Right Column (50%):
  • Grid layout with six product images
🧱 Step 7: GSAP Scroll Animation

We have incorporated an HTML widget where we wrote GSAP code.

What is this Animation doing?:

  • Shoe moves down to 145%

  • Moves to center (50% left)

  • Shrinks to 25% width

  • Rotation becomes 0°

What is this Animation doing?:
  • Shoe moves further to 235%
  • Moves slightly left (-2%)
  • Width increases to 40%
  • Rotates to -45°

✨ Remember the following:

  • The Elementor header builder allows for easy header creation

  • A good header will have a logo, menu, and clear calls to action

  • GSAP gives nice smooth animations to help you create an animated experience on your website

  • Clearly organize the sections of your website

  • Make sure you have a responsive website

  • Keep your website lightweight so that it performs well

Previous Post

WordPress + GSAP ScrollTrigger Animation Tutorial | Elementor Website Design

Related Post

Luxury Perfume Website Animation with GSAP

Design Synth

Welcome to Design Synth! Enter the world of web design, where art meets code. Find awesome designs, practice new techniques, and churn out stunning digital experiences that excite and engage an audience.

Facebook Pinterest Youtube

Popular Posts

4 (1)
No posts found

Explore Topics

4 (1)

Tag Clouds

4 (1)
Post Views: 13