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.
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
Scroll FX Extra for Blocs