Blog

21 Aug 2019

New Visually Stunning Scroll Effects + Bonus Feature!

Development / 16 Comments

Shop Themes Demo

Make elements hurtle through space vertically, horizontally, diagonally, or inflate in size, become transparent and blur! Now with Themify’s new Scroll Effects, you can easily create website animations without a single line of code. Take a look at our demo to see it in action and read our full documentation.

Our developers created this new feature from scratch to make it super fast and work responsively across all devices. For starters, you can set the speed, direction, and viewport of your new effect. Or amp up the animation and add multiple effects at once, like rotating an element while it increases in size. Play around with the options and discover all the cool animations you can create. (Psst! Vertical + Horizontal = Diagonal Effect)

Animate any element on your page using the powerful and flexible Scroll Effects, and start creating breathtaking parallax websites!

Key Scroll Effects:

• Vertical: Make an element scroll up or down, at various speeds and viewport.
• Horizontal: Make an element scroll left or right, at various speeds and viewport.
• Transparency: Make an element fade in, fade out, fade in out, or fade out in.
• Blur: Make an element’s blur effect fade in, fade out, fade in out, or fade out in.
• Rotate: Make an element rotate left, right, at various speeds and origin points.
• Scale: Make an element grow bigger or shrink smaller, at various speeds and origin points.

Float Scrolling Changes

Along with the new scroll effects, our old float scrolling is now using the more efficient vertical scroll effects. If you have previously enabled float scrolling, you will be able to find it enabled on Animate > Effects > Vertical Scroll. Now you can take advantage of the same great effects, with even more control!

New Draggable Background Position Feature

We’re also rolling out a new bonus feature allowing you to change the position of a background image anywhere in the viewport box using a draggable circle. (This will make more sense if you look at the gif below). Previously, users could only select specific positions such as Top Left, Top Center, etc. Now you can set your background image position anywhere you want by simply dragging the blue circle.

To do this, go to Row > Styling > Background, set your Background Type to ‘Image’, select your Background Image and start dragging!

Scroll Effects Documentation

Need a helping hand? We've got the full scroll effects documentation to help guide you.

To start using these new features, simply update to the latest version using the Themify Updater plugin, or sign up for a membership, in order to start creating amazing visual animations with Scroll Effects today!