Spline Scroll animation in wordpress

by Anas niazi

This tutorial is a walkthrough of how to use a newly wordpress plugin released by me , which can be downloaded and installed in your wordpress website from here.

The plugin we will be using is a block plugin so it will only work in wordpress themes which supports blocks

I’ll be showing how to use this new spline animation plugin in wordpress block theme of your choice (I’ll be using Twenty twenty three theme from wordpress for this purpose), it will be breakdown in to steps , so follow along.

What we will be creating by end of this tutorial

Demo of what we will be creating

Installation

install this plugin by going to this url https://wordpress.org/plugins/akdev-spline-animation/ or search it via your wordpress website and it should come up.

Spline animation block plugin (wordpress)

Getting Spline project url

Spline url is important part of this plugin, thats how you import your 3d model into this plugin.

Before your get your spline url, make sure you have configured the play settings otherwise it will not work well and result in some unforeseen errors.

Go to spline.design and explore the model you like from community resources https://app.spline.design/community , in this tutorial I am using a bicycle model which I already have in my spline account.

To get your model url click on Export and copy the url as shown in image below.

Spline model url

Setup the page layout for this example

In order to achieve our example layout we would remove any header or footer since we want a blank page to work with, for this purpose we will create a new template in our wordpress site and will call it “Blank template” in the coming steps we will be using the same template.

Create template

There will be number of images and animated gif to show how you can create a blank template in wordpress using Twenty twenty three theme.

steps to create a custom template for this tutorial

Now you can customize the template, delete all the parts other then content (which what our page will be generating)

remove all the un needed parts from the template

remove extra spacing as well

Now our “Blank template” creation is completed.

Best Part — Configure your animation

Create a new page

Now create a new page in your wordpress site, and make it use “Blank template” we created in previous step.

swap template to ‘Blank template’ we created earlier

Copy the code below and save it as a backup, its a working demo page code which we will be creating in coming steps.

Import demo page code into your newly created page.

How we created above animation? we will talk about briefly in steps below,once you get basics you can make it your own.

Basics of the block

• Add spline animation block
• Enter Spline model url (bicycle is already a fallback model so you it will load without any url as well)

Add Spline animation in a group

Add spline block in a group and set its lay out false for content width

Set group height to 500vh to give us enough height to test our animation

Give group a class which we will use in animation block

Create animation from spline block

Now select spline animation block and click on creating scrolling animation and follow the steps shown in image below.

Add animation steps

Now we will be adding two steps for our animation.

• Initial animation at 0%
• Last animation at 40%

We will be rotating the y position of bikewrapper layer so it will rotate from 0% to 40% as shown below.

You can now repeat the steps and add further layers on your page and even remove the 500vh since we added it for extra height.

For the whole page, just copy the code of demo page from above section and follow it further to duplicate it and play with it as needed.

Download plugin from here

Keep building,