Animate and Interact with any HTML element when you scroll and make your websites come alive.
Thank you for purchasing Scroll Animation for WordPress. This plugin allows you to add multiple animation effects for your content on scrolling.
How to install
- Extract the purchased plugin zip file to your local computer
- inside the extracted folder you will find scroll-animation.zip file
Upload via WordPress Admin
- Go to Plugins > Add New
- Click Upload Plugin button and choose scroll-animation.zip
- Once uploaded, click Activate
Upload via FTP
- Extract scroll-animation.zip to your local computer
- Copy scroll-animation folder into your "wp-content/plugins/" folder using your favorite FTP program.
- Go to your WordPress Manage Plugins page, find the "Scroll Animation for WordPress" in your plugins list and click on activate
How to Use ?
Once the plugin has been activated you will notice a new menu on the side called “Scroll Animation” enabling you to create and manage all your Scroll Animation Scenes.
Click on Add New to start creating your first Scroll animation
Enter your Scroll title.
Set required settings and Save to publish.
- Vertical - Set scroll mode to vertical or horizontal.
- Reverse - Reverse animation when scroll up, it set false, scene will run only one time on scroll down.
- Ease - Animations Transition type Explore more here. Effectively Works when duration is set empty.
- Sticky - Pin the element for the duration.
- Push Content - Works with sticky option, when enabled will push the following elements for the duration of the pin, if set false the pinned element will just scroll past them.
- Ease Duration - Duration for Ease, works effectively when duration is set empty.
- TriggerHook - position of the trigger Hook in relation to the viewport.
- Duration - Scene duration based on viewport height in (%) or pixels (px).
- Offset - Offset value for the trigger position.
- Draw SVG - This will enable stroke animation on svg.
- SVG Line Color - modifes the color of the stroke of svg, by default, black is filled.
- SVG Line Width - modifies the line width of svg.
- Animation Position - By default, all scenes animate elements based on center of the element. modifies the animation position from below options
- Top Left
- Top Center
- Top Right
- Center Left
- Center Right
- Bottom Left
- Bottom Center
- Bottom Right
- Tablet Animation - Disable Scene Animation only for tablet. Set Tablet breakpoint here
- Mobile Animation - Disable Scene Animation only for mobile. Set Mobile breakpoint here
Before, After Options
Settings are common for both before and after.
- Move Horizontal - Move along X-axis with two units available - px and %
- Move Vertical - Move along Y-axis with two units available - px and %
- Rotate - Rotate along Z-axis
- Rotate Horizontal - Rotate along X-axis
- Rotate Vertical - Rotate along Y-axis
- Scale Horizontal - Zoom along X-axis
- Scale Vertical - Zoom along Y-axis
- Skew Horizontal - Skewness along X-axis
- Skew Vertical - Skewness along Y-axis
- Transparency - Opacity Level of the element
- Color - Color of the text in the element
- Background Color - Background color of the text in the element
- Border - Includes border color, border style, border width
- Border Radius - Curveness around the element with two units available - px and %
- Padding - Padding space inside element with two units available - px and %
- Position - Specifies the type of positioning method used for an element, provided options are given below
- Top - Set Top edge of the positioned element with two units available - px and %.
- Bottom - Set Bottom edge of the positioned element with two units available - px and %.
- Left - Set Left edge of the positioned element with two units available - px and %.
- Right - Set Right edge of the positioned element with two units available - px and %.
- z-Index - Set z-Index value to show element front than other overlapping element.
- Width - Width of the element with two units available - px and %
- Height - Height of the element with two units available - px and %
- Display - Display behaviour of the element, provided options are given below
- Inline Block
- Inline Flex
In Between Options
This Enables multiple animations for the same element within the duration, just by clicking add. You can also notice nos. added to the animation scale in the preview box.
New set of css settings included for inbetween animations, which can be used to animate on the middle of the duration. If two times add button is clicked, two css settings will be added, which will be applied in proper interval of the duration.
CSS Settings are common to before and after.
Animation Scale - Fills the scale while scrolling, to track the percentage of scroll animation completed.
Sample Content Type - On Top left corner of preview box, three options (text,image,svg) provided as sample to test the animations for all type of element.
Preview Mode - On Top right corner of preview box,
- Responsive - Preview Animations on tablet and mobile, by clicking desktop and change to desired responsive mode.
- Full width - Preview Animations on full width
- Full Screen - Preview Animations on Full screen
How It Works
- After customizing your scroll animation hit save and then click the Get Shortcode/Class button
- You will get a popup box.
- Note : You can copy paste the below shortcode around your element.
[scrollanimation id="196"] Your Content [/scrollanimation]
Note : If you want to add class to any elemnt, then simply add class like below.
<div class="wsm-scene-196"> Your content </div>
Note : If your content is a plain text then follow below method.
<span class="wsm-scene-196"> your text content </span>
You can even apply same shortcode to multiple element on same pages
When multiple scenes class added to same element, only the last class animations will work, we have in between options to animate multiple scene with one scene.
You can easily insert shortcode anywhere on your page/posts with our special tinymce button.
Just select the animation you have created and fill the content to place the shortcode inside the editor.
You can also select the content in the editor first and choose animation with our tinymce button, which will wrap the the content with our shortcode.
To animate SVG elements, you need to upload the svg files to media.
Before that, svg files are not supported by wordpress default, So, Install the safe svg free wordpress plugin, and upload the svg files.
- Like, other image files, go to Edit post.
- Click add media, and Select your desired svg file and click insert into post.
- Apply the animation to the element via any options explained in how it works section above.
Page Builders Support
Scroll Animation works with almost all of the page builders.
- Use shortcode widgets on page builders to place our shortcode
- Use Text editor widget to insert html tag provided.
- Add class to any type of page builder widgets, if css option provided by widgets, e.g. Elementor provide css classes option on advanced tab for all type of sections, columns and addons.
We always love to help our customers problems, Do not hesitate to contact us.
Live chat with us at our Website
You can also send us your queries - Contact
We also create Animation Scenes for your website without charging for an hour.
As it will help you understand the plugin settings and make you comfortable with the plugin.
Watch Our Plugin Tutorial to get started with ease.
We have created a playlist on youtube, So you can watch all videos at one place - Scroll Animation Tutorials.
Scroll Animation can be updated one-click right within WordPress just like any plugin from WordPress.org
- ScrollMagic.io - for scroll animation library.
- GSAP - Tweenmax, CSS Plugin libraries for animating css properties.