Bricks child theme, Want easy scroll animations with bricks? here you go 🔥

because we still don’t have scroll animations in bricks yet. I coded something like this.

ability to add gsap animations to any dom with attributes :sunglasses:

check it out

image

here these are the possible attributes/animations

  • x: Horizontal position (e.g., x: 100).
  • y: Vertical position (e.g., y: -50).
  • o: Opacity (e.g., o: 0.5).
  • r: Rotation angle (e.g., r: 45).
  • s: Scale (e.g., s: 0.8).
  • start: Scroll trigger start position (e.g., start: top 20%).
  • end: Scroll trigger end position (e.g., end: bottom 80%).
  • scrub: Scrubbing behavior (e.g., scrub: true).
  • pin: Pin element during scroll (e.g., pin: true).
  • markers: Display scroll trigger markers (e.g., markers: true).
  • toggleClass: Toggle CSS class (e.g., toggleClass: active).
  • pinSpacing: Spacing behavior when pinning (e.g., pinSpacing: margin).
  • splittext: Split text into characters (e.g., splittext: true).
  • stagger: Stagger delay between characters (e.g., stagger: 0.05).

I didn’t test all yet please test it and write github bug issue if you find one. :+1:

watch the video to see how it works. it is very simple.

if you have your own child theme here this is the magic file : snn-brx-child-theme/js/gsap-data-animate.js at main · sinanisler/snn-brx-child-theme · GitHub

just add this gsap-data and other gsap files to your page or theme and use the attributes to animate any dom :fire: .

13 Likes

This is awesome, thank you for your work. I might have to try this out on my next project.

1 Like

This is a nice tidy solution. Thanks for taking the time to build it and share with everyone.

How might we set things at a global level? For example, lets say I want to animate every element with class “data-animate-y” from y:100, o:0?

only if global class system was copying the attributes too that would solve your idea :slight_smile:

but I like it I will try that idea.

your idea is like making gsap animations similar to tailwind :slight_smile:

as long as class namings are not ugly like tailwinds :smiley:

x - Horizontal translation
Usage: x-100 for 100 pixels to the right, x--100 for 100 pixels to the left.
Example: <div class="animate x-100">Content</div>
y - Vertical translation
Usage: y-50 for 50 pixels down, y--50 for 50 pixels up.
Example: <div class="animate y-50">Content</div>
o - Opacity
Usage: o-1 for full opacity, o-0 for transparent.
Example: <div class="animate o-0.5">Content</div>
r - Rotation
Usage: r-180 for 180 degrees clockwise, r--45 for 45 degrees counter-clockwise.
Example: <div class="animate r-90">Content</div>
s - Scale
Usage: s-1.5 for scaling up by 1.5 times, s-0.5 for scaling down by half.
Example: <div class="animate s-2">Content</div>

1 Like

Yes, that’s a good idea and agree, class naming is not ugly. Lets keep things as clean as possible.

I was thinking something even simpler:

For example, rather than having to apply a class to every element in the builder. Maybe at a global level I want to apply animation ‘y:100, o:0’ to every element that has the class ‘brxe-heading’

<div class="brxe-heading">Content</div>

for that this needs to become like a plugin or something. I dont want that. that makes it complicated.

here check the class test :slight_smile:

it has bugs tho need to think about those bugs same bugs happens on attributes system too. still thinking about it
most of the features are fine. only pinning problem and pinning related combined animations.

when I fix this pinning too it will be perfect. I have other settings for child theme I will implement couple more idea to it.

Curious,
Do you manually update the child theme on all your client sites when using something like this? Or do you have some sort of automated update script?

no

you dont update child themes if the site doesn’t need the update

we make the main bricks theme and some plugins auto updating and leave anything else alone

Nice one. I found this thing few years ago which is bit similar. But yours is easier to write faster.

1 Like

other than some security settings and gsap feature I want to add more settings to this child theme

give me ideas if you have some.

1 Like

I am using Bricksforge right now but this vanilla approach is nice and lightweight!

Does this only include ScrollTrigger? What about ScrollSmoother this is essential too. Other GSAP plugins for those wishing to buy a license?

yep need to add couple dom to wrap all site for that. I will think about that plugin.

don’t worry we have infinite trial like winrar :rofl:

1 Like

Finally refactored the code updated my brx child theme and added a lot more features.

now I can add new features easily…

check the video for adding custom css libraries/css classes both block editor + bricks :wink:

1 Like

UPDATE & NEW FEATURES

2 new feature Is added and they are pretty big.
.
.

-FEATURE 1: block editor / site editor support added now you can create your block editor styles. colors, fonts , sizes, spaces, block defaults… etc.

image

this is not for replacing the template system always use the bricks template system only this is only for block editor default styles when you need it.

to open block editor default styles: click Editor → Templates → Index → Click On the Page Itself → and after that click on Styles Icon

now you can edit all your block editor and block defaults.

FEATURE 2: New element Custom Code HTML

YES YES bricks already has custom code element but after the update we can all probably agree Signing become a headache and annoying
that is why I added this new element to this child theme

it only supports HTML tags, style tag or script tag. Just simple HTML stuff. Your embed code, map embed, social media embed now all of them single click away and single copy/paste away. :fire:

image

1 Like