Edit product


Scroll FX Extra

Fine grained control and speed up your workflow

  • Blocs animation is a great feature. Scroll FX Extras gives you additional animations with more control of where and when these animations happen on screen. It's also a simple way to get consistent effects across an entire page or site. v2.1 released 8/25/2021

Visit this topic in the Blocs community forum


Key Features:

  • Set your animations in bulk, for example: you can set all h2 tags, or just certain classes. plus you have ultimate control of the when these animations happen.
  • Have more control over where animations happen like: position, duration, delay, offset, mirror
  • Acquire new animations as they are released.
  • Trigger scroll animations based on the position of another element.


Can I add the bric to the entire site?

  • Yes add the bric to a Blocs global area for site-wide usage.


How do I target elements that I want to animate?

  • You simply add the html tag, class or ID to the Target Element field. you can add classes to elements using Blocs app as needed. 

    Be sure to include the selector!

    Example:  .my-class, #myID, .container > p


Can I target more than one element?

  • Currently the bric includes 3 target element fields, each with it's own settings. However, you can include multiple elements in each field. In this case you will separate your elements with a comma as in the next example.

    Example: .my-class, #myID, .container > p


Can I use multiple ScrollFX Extra brics on a page.

  • No, but you don't need multiple brics on the page. It's designed to add just 1 bric per page and control multiple elements with unique controls for each element or group of elements.


Do the animations work on mobile devices?

  • Yes the animations work on Mobile. Also you can optionally turn them off for phone, tablet or both.


What is the anchor field used for?

  • The anchor field lets you choose an element that will serve as the trigger for your animation. It's used when you have an element that you want to animate based on the position of another element somewhere on the page.


Example setup:

  • In the first target field you could choose to animate these elements which are spread across your page: 
    ".my-class, #myID, .container > .section-title"
  • You have a setting that works great for these, but there are some items in your a section of the page that you'd like to change the effect and timing. You have currently 3 "target" fields with many options for controlling the animations. In this second field you can add something like:
    ".hero-title, hero-subtitle" 
  • In the third target field you choose completely different setting targeting one or many other elements. It's quick to try different effects on an entire page to see how they effect the feel of the page with your design.


Fade animations:

  • fade
  • fade up
  • fade down
  • fade left
  • fade right
  • fade up right
  • fade up left
  • fade down right
  • fade down left

Flip animations:

  • flip up
  • flip down
  • flip left
  • flip right

Slide animations:

  • slide up
  • slide down
  • slide left
  • slide right

Zoom animations:

  • zoom in
  • zoom in up
  • zoom in down
  • zoom in left
  • zoom in right
  • zoom out
  • zoom out up
  • zoom out down
  • zoom out left
  • zoom out right

Anchor placements:

  • top bottom
  • top center
  • top top
  • center bottom
  • center center
  • center top
  • bottom bottom
  • bottom center
  • bottom top

Easing functions:

  • linear
  • ease
  • ease in
  • ease out
  • ease in out
  • ease in back
  • ease out back
  • ease in out back
  • ease in sine
  • ease out sine
  • ease in out sine
  • ease in quad
  • ease out quad
  • ease in out quad
  • ease in cubic
  • ease out cubic
  • ease in out cubic
  • ease in quart
  • ease out quart
  • ease in out quart

Visit this topic in the Blocs community forum

Try Blocs for free (Mac)

6 ratings

  • Scroll FX Extra for Blocs
  • Format.bex


Scroll FX Extra

Enter your info to complete your purchase


···· ···· ···· 4242
Test card



Use a different card?


pp paypal

or pay with

We do not keep any of your sensitive credit card information on file with us unless you ask us to after this purchase is complete.

or pay with

You'll be charged US$15.
Powered by Gumroad