baschte/content-animations

[FEATURE] per-CE option to apply animation to content inside frame only rather than entire element including background frame (bootstrap package)

pixelplumber opened this issue · 1 comments

Is your feature request related to a problem? Please describe.
Currently using the bootstrap package 10 with 9.5 LTS. When applying content animations to bootstrap content elements that use the bootstrap package frame classes under the appearance tab the animations will apply to the entire element including the background.

Sometimes this can look a little strange when a solid colour edge-to-edge frame appearance is used. Think of a black background frame with white text. You want the white text to slide in from the side, but the entire frame comes in as a block, background and all.

In those cases it would look better to leave the frame background colour untouched and just animate the content inside the frame.

Describe the solution you'd like
I am thinking of a checkbox/dropdown on the 'Animation' tab that would allow you to choose on a per content element basis whether an animation effect applies to the entire content element frame included, or just the content within the frame.

I'm not a developer, but assume this might involve a conditional to nest a div to hold the aos-animate classes inside the div holding the bootstrap frame classes? I can see there is a div inside the CE container with class "frame-container" that does not include the background that could maybe be used? I might try to test this myself with a modified fluid template.

Also unsure if there is a way to make this generic to all typo3 frame types rather than specifically coding something for bootstrap package and fluid styled content etc, I suppose a generic solution is more desirable from a maintenance perspective?

Describe alternatives you've considered
I could try to customise the fluid templates provided with the extension but this would tend to cause all CEs to change behaviour (or maybe you could override on a single page via TS) and I would love the ability to target this on specific content elements (card groups, icon groups that have contrasting background colours assigned).

Additional context
example of current behaviour in the "deliver business value" CE at this sandpit page:
https://sandpit.nasaustralia.com.au/?no_cache=1
The entire green background fades in along with the content. It would be great to allow the green frame to already be in place and just animate in the content within the frame only.

Another example is the Icon Group below that, where the dark background version looks a bit strange with the flip up animation (however if that applied just to the content and not the frame it could look quite good).

Thankyou for a fantastic extension.

hey @pixelplumber,
thx for your feedback and your feature request. For sure it would be nice if you would have a generic possibility to set animations on the outer or inner content of any content element. I think this request could be a possible case for a specific project or package but not for creating a generic version for all possible packages out there. 🤔
Maybe a developer could help you out to override the specific fluid layouts for the content elements to get your feature?

Maybe i could give you hints to help you out if you need it anymore.

Greetings!