Lost feature / feature request ? column fade

Beta
#1

Hi,

I’m using Beta 5 and noticed that it is no longer possible to do a column ‘fade in’ with the new row/columns

is this something that can be added back in (or am I being really stupid and its there but I can’t find it?)

Thanks

Scot

#2

I am sure that this function should be disposed of. Or it must be developed in advanced way. It must have a possibility to be applicable not only to columns, yet to all CS elements. But it’s something fantastic from the near future.

I’m using ScrollReveals.js for this purposes.

1 Like
#3

I’d love a fade/animation feature for all elements.

#4

Would be great for every component, the wish list is is ever growing! :smile:

I moved from ScrollReveal.js to browser native Intersection Observer.

Though the CSS Tricks article covers lazy load, the same principle can easily apply to reveal animations. Given the stuff with CSS grid is a modern/good browsers feature, Intersection Observer is a nice fit. For basic stuff CSS rules, for anything funky animejs is awesome.

1 Like
#5

Howdy @scotbaston, @Georgich, @JvP, and @strobley! Thanks for writing in and sharing. We actually have a GitHub issue for us to look into creating some type of drop-in “module” of controls that will allow users to craft interactions, Element transforms, et cetera. The hope is that this would be something that could go on practically every Element from Sections down to individual items like Headlines, Buttons, et cetera. This will have more options than just a fade in, and would be able to work everywhere, along with having more features. It is in the discovery phase at the moment so no timeline as of yet to discuss, but we’re thinking it might be something that goes along with the feature to add custom attributes to Elements.

5 Likes
#6

Thanks for the update @kory I heard a rumour on custom attributes down the line :smile:

If the drop-in module for interactions is more longterm, it would be great to have custom attributes sooner to be on par with some lesser builders.

1 Like
#7

Would be nice! :fist:

1 Like
#8

Very nice @kory

#9

Very much interested in the progress of a drop in module

this maybe be better as a separate request but it would be great if the text options on button (esp secondary text) had the text editor view (ie bold, carriage returns etc) as this would open up greater display options for buttons

1 Like
#10

Hi Scot,

We are too! It’s going to be a great addition.

I don’t think we’ll add the full the full text editor there since buttons aren’t meant for larger amounts of copy. What you can do though is double click to inline edit and press shift+enter to make a line break. You’ll also have the ability to make things bold from there. Alternatively, linebreaks can be coded inline by adding <br /> in the text input.

#11

Thanks @alexander,

in the case that I needed to replicate, I had 2 lines of secondary text separated by a line break but the first of those lines was bold. (trying to replicate a site built on another theme)

#12

I gotcha! Yeah, that secondary text isn’t “inline editable”. Only thing you can do is handwrite in some HTML like:

<strong>Line 1</strong><br/>Line 2
#13

I did that in the left panel editor and it didn’t work, although will try the inline editor to see if that does the trick

thanks

Edit: actually, I can’t access the inline editor for the secondary text on a button. is that a bug?

#14

Yeah, that’s what I was saying above. Secondary text would need to be coded directly.

#15

Sorry I missed the obvious!

adding text doesn’t seem to work within the secondary text

#16

The only thing secondary text supports is that single line input, but it should accept pretty much any HTML you put in there.

#17

Thanks…

it looks like the renew.css is overriding the <strong> inline code

it looks like

<span style="font-weight:700 !important;">A complete suite of fully managed IT services</span> <br> Proactive approach to technology and infrastructure management

does the job though

#18

oh right! I’m sorry about that. Yeah we had to add that forced inherit styling primarily to make sure that icons inserted directly in text were not breaking out or getting restyled.

1 Like
#19

Update: We’ve corrected this so the inline editing works and you can visibly see the strong tag taking effect without extra CSS.

1 Like
#20

Hi @kory

Just a few quick follow up questions on this future interaction animation drop-in module.

  1. Shall be an optional module on the front-end, i.e. all JS and CSS related to the module can the disabled/dequeued for customers not wanting to use it?

  2. Could it allow user-defined delay, duration and ease?

  3. Are there any thoughts on whether the animations shall be ‘whole’ animations with a given name that perform as variety of actions. As with other themes and using Animate.css rotateIn for example which includes both a opacity and transform (rotate3d). OR could it go one better than other themes and have granular level actions that can be stacked on to the same single element? For example completely separate opacity and individual transforms (translateX, Y, Z, 3d; scaleX, Y, Z, 3d; rotateX, Y, Z, 3d, et cetera) actions which can be stacked on the same element with different delay, duration and ease - so an element fades in slower than it translates/scales/rotates at user defined settings. Hope this makes sense and appreciate there is a balance between user friendliness and something that is possibly a complex UI to CSS transform generation.