Edit product

$15

Scroll FX Extras: Blocs for Mac - Custom Bric

  • Blocs animation is a great feature. Scroll FX Extras gives you additional animations with more control of where and when these animations happen. This can be a super simple way to get consistent effects across an entire page or site.
  • Current ver. 1.0.1  released 4/12/2019


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
  • Acquire new animations as they are released.
  • Trigger scroll animations based on the position of another element.


FAQ

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. 
  • 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.


Can I use multiple ScrollFX Extra brics on a page.

  • No, because 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.


Animations

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




You've purchased this product

See it in your library

View in Library
Sorry, this item is not available in your location.
Sold out, please go back and pick another option.

0 ratings

  • Scroll FX Extras for Blocs
  • Format.bex

Checkout

Scroll FX Extras: Blocs for Mac - Custom Bric

Enter your info to complete your purchase

Card

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

05/18

Card

Use a different card?

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

Please confirm your location:
You'll be charged US$15.

Your purchase was successful!

We charged your card and sent you a receipt

    Gumroad Library

    Download from the App Store or text yourself a link to the app

    Good news! Since you already have a Gumroad account, it's also been added to your library.

    Powered by Gumroad