I’d like to introduce you to Scroll FX Extras. 
The Story
One of the coolest things about blocs that most people notice right away is the ability to add Scroll FX and Animations with just the core Blocs tool. Animations can be an accent to a good design and I think it’s best when it’s subtle.
The thing about the Blocs is that you have to set each element separately and that can take too long if you have more than a couple of elements to animate. Also you can’t try different animations across an entire page or site easily, or disable all animations on phone, tablet or both. My new bric is very liberating in this way!
You also have ridiculous amount of control over the triggering of animations. placement, duration, delay, offset, easing, anchor. You can even trigger animations based on the position of completely different elements on the page.
Video
After watching this video you might not be overwhelmed because the control part mostly only matters if you need it. But bulk editing might still appeal to you. In the video the animations are triggered as the top of the element reaches the bottom of the viewport. There’s a small amount of offset applied to the animations.
I downloaded @Eldar MacMini template from the official Blocs Store just to make this short video showing how animations can be started earlier with Scroll Effects Extras. It’s in response to a couple of threads here in the forum. By the way, this was my first time trying one of Eldar’s templates, it’s excellent in every way!
Note: The horizontal lines at the beginning of the page still use Blocs core. Notice how those animate later on screen than all the SFE animations.
You can find more details and FAQ at the point of purchase on my Gumroad page. Just click the buy button here on this page:
Scroll FX Extras | Blocs Store
Controls
Placement
Quick way to tell the animation when to trigger. for example the option top-bottom will trigger the animation when the top of the element reaches the bottom of the viewport. There are great combos that allow you to tell a story with your animation if used thoughtfully.Duration
Time it takes the animation from start to finish. make animations themselves faster or slower.Delay
Delay the animation from happening, in addition to whatever else has been set.Offset
Number of pixels to delay the animation in addition to other settings like “position”.Easing
This is when you want a nice smooth start or finish (or both) to your animation. Nice list easing curves and even a bounce-back type of option.Anchor
Control the animation start based on the position of any other element on the page.
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
Hopefully that continues!
