New Bric: Scroll FX Extras

I’d like to introduce you to Scroll FX Extras. :smile:

19%20AM

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:
https://blocs.store/product/scroll-fx-extras/

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

6 Likes

@Whittfield this looks like a really well designed Bric. I’m super impressed with the details. I understand you are busy with so many projects, let alone answer everyone’s question including me. :slight_smile:
I wish Blocs would be able to easily implement what you’ve designed, but @Norm already gets little sleep.
I watched the video you produced and for I’m looking for a more clear video of how this Bric work. Would you be willing to make a video showing that?
I saw someone else requesting something like my request.

1 Like

Ask away, that’s what we’re here for! :grin:

I guess the request wasn’t fully understood by me. The bric works the same way Blocs animation does, accept you can target multiple elements at once using the target fields and there are more settings.

Each setting is explained above. Did you need/want to see a video where I place the bric on a page and set the settings in the bric? I didn’t think there would be much value in that, but I suppose I could if it helps you make your purchase decision. I probably won’t go through each individual setting in a video. There’s really nothing different happening here than any of the other bric.

Quick Start

  1. Add a bric as normal anywhere on the page.
  2. Place your target elements in the field.
  3. Preview the page in browser and the animations are triggered based on your settings.

I give it a try and if i have any questions I’ll get in touch with you.
Any known issues with the current Blocs 3.2x?

I think there’s an issue with one of the new 3.2.2 beta’s, but that’s not specific to this bric it’s a Blocs issue that’s being resolved (or already has been.)

I haven’t found any issues so far and there have been a few purchases with no bugs reported thus far. Come to think of it, of the 250+ downloads of my free brics since March 20th, I don’t think I’ve had a single bug report. :wink: Hopefully that continues!

Thanks for your support!

3 Likes

H Whittfield.
If I add an action to a paragraph bloc inside a carousel, will the action repeat every time the tile comes around?
I wand to recreate my feedback slider towards the bottom of my home page.
APS home page
Thanks,
Andy.

Hi @apswoodwork,

Sorry but that’s out of scope for this bric. Something like that should really be handled in the carousel itself. This bric works as new items enter the viewport. It’s tied to the pages scrolling activity. That’s a completely different requirement.

Okay, I wasn’t sure but I thought I’d ask.
Thanks,
Andy.

1 Like

Hi Whittfield, I bought your plugin and I want to thanks you for the great job! I’m loving it so far and it is a fundamental tool Blocs was missing!
There is something I would like to ask you…I have noticed that when I input a selector, lets say “IMG” it’s working on all the images of the page. Is there a way I could limit the animation to a specific bloc only? I did not manage to find myself how to do it!:sweat_smile:
Thanks for your help!

1 Like

Thanks @Gianni, Thanks for your purchase. I’m really happy that you are happy :blush:

It’s simple just include the bloc ID or assign it a class. SFE targets follow the rules of writing css. They accept values like this:

#hero-bloc img, .intro-bloc > p

Here I have 2 targets (comma separated)

  1. Any “img” tag nested inside the #hero-bloc only
  2. Any “p” tag which is a direct descendant of the class “.intro-bloc”

That’s it!

1 Like

Thanks for the answer! That solve my problem!:heart_eyes:

1 Like

Great to hear! It’s nice to try new settings across an entire page or site. Really speeds up the workflow and helps keep things consistent :wink:

Can you enlighten me what is the difference between this bric scroll fx and the scroll animation in Blocs?

I am also looking at button interactions animations. Just an idea if you are keen.

Hi @Zixuan,
Thanks for your question, I’ve compiled a list.

  1. You can target many elements at once and animate them according to the scroll position. entire pages and sites are easy to setup and manage updates and changes.

  2. Animate custom brics made with the api. This is otherwise not possible.

  3. More control over when the animations happen.

  4. Ability to trigger animations based on the position of other elements on the page.

  5. SFE is like a cross between the two animation offerings in Blocs. If reanimates when you scroll back to the items on the page like scroll fx, but it’s triggered by the positioning in the viewport like animations can be in Blocs (which do not re-animate)

Hey Whittfield, awesome bric. Really love the way it works. I’m having trouble though when exporting to OctoberCMS. It’s the only thing I can’t seem to get to work. Is there any advice on this?

Hi @marcoinward,

Thanks for the kind feedback! I’m not too familiar with OctoberCMS or it’s integration with Blocs, but if you can provide a link I’ll take a look. In most cases this is simply a matter of confirming that the javascript has been added to the page.

Hey, I got it just before seeing this reply :sweat_smile::sweat_smile: and you’re 100%… for some reason the sfe-bric.js wasn’t included. And now it’s working like a dream!!! Thank you!!!

Glad you got it working! :grinning:

1 Like

Hey Whittfield, me again… I’d just like to find out if there is a way to ensure the bric’s js is initialised? sometimes the page will load fully but all elements with the scroll extra added to It doesn’t load. If I open the element inspector or console, then all of it gets initialised…

Hi Marco,
I’ve been unable to duplicate this, but with you additional info maybe I can. My gut tells me it’s a Blocs bug and not a problem with the bric. Especially given what you have described. I’ll reach out to @Norm and try to confirm. There are beta versions around as well that fix a lot of issues. If you aren’t using beta, I completely understand, but I’d be curious to know if that at all helps.

What version of Blocs are you using and which Mac OS?