Jump to content

CSS animate slide away Media cards for collections & playlists


Recommended Posts

This is like making a DVD Easter egg.  I had a lot of nice backgrounds to put behind collections and I've turned off shading for backgrounds in the theme.css, which annoyingly has to be done after ever update.  (An optional turn off shading button would be nice.)   

Anyway, these interesting movie type backgrounds could not easily be seen because all the collection and playlist media cards were in the way.  Without dark background shading it looked odd.  But I like it.  The goal was to find a way to show the backgrounds for visitors.  I added extra bottom margin, so if the user scrolled all the way down the background appeared.

/* Fix for bottom image viewing padding to show background images. This style works on all pages. */
.padded-bottom-page {
    padding-bottom: calc(95em + env(safe-area-inset-bottom,0)) !important;
    margin-top: 22px;

Still, that was not enough.  Why have interesting backgrounds if you have to scroll all the way to the bottom to see them?  So, I found a CSS trick that can animate the media poster cards to slide down, smoothly for 2 seconds and stay gone with a 3 second delay to slide back up.  The triggers are mousing or tapping on the top header area, then mousing or tapping away gets a 3 second delay and the media cards return.

You have to find the parent ID number in the url that matches your collection and playlist pages and add those numbers to the css code.  The playlist animates by sliding to the right in this code example.

I was surprised that this worked in pure CSS.   I really didn't think it was possible.  I did not want to have to try to add divs, or do some extra js, which is not ideal and probably difficult to keep working after updates.  So, there is no button that could come from a div change and javscript.  It is a hidden extra.  Maybe it's too complex for some people.  What do you think?    I am happy to post any other Custom CSS shown in the screenshots, if anyone is interested.

- Credit: Screen section 2: There are many wonderful videos of Northern Sweden lifestyles - Visit https://jonnajintonsweden.com/  and https://www.youtube.com/@jonnajinton/
Here's the custom css code:

/* Custom media card slideaways */
/* ============================ */
/* Collections scroller animate down using id 50451 - Check your URL and use your parentId numbers instead */
.flex.align-items-center.justify-content-center.focuscontainer-x.itemsViewSettingsContainer.padded-top.padded-bottom.focusable:hover ~ 	.itemsContainer.flex.flex-grow.vertical-wrap.centered.padded-bottom-page.virtualItemsContainer.virtual-scroller-overflowvisible.virtual-scroller[data-parentid='50451'] {
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
		transform: translateY(82vh);
		transition: 02.0s;

.flex.align-items-center.justify-content-center.focuscontainer-x.itemsViewSettingsContainer.padded-top.padded-bottom.focusable:not(hover) ~ 	.itemsContainer.flex.flex-grow.vertical-wrap.centered.padded-bottom-page.virtualItemsContainer.virtual-scroller-overflowvisible.virtual-scroller[data-parentid='50451'] {
			transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
			transform: translateY(0vh);
			transition: 02.0s;		
			transition-delay: 3s;

/* Playlist animation slide to the right id 51069*/
.flex.align-items-center.justify-content-center.focuscontainer-x.itemsViewSettingsContainer.padded-top.padded-bottom.focusable:hover ~ 	.itemsContainer.flex.flex-grow.vertical-wrap.centered.padded-bottom-page.virtualItemsContainer.virtual-scroller-overflowvisible.virtual-scroller[data-parentid='51069'] {
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
		transform: translateX(106%);
		transition: 02.0s;
.flex.align-items-center.justify-content-center.focuscontainer-x.itemsViewSettingsContainer.padded-top.padded-bottom.focusable:not(hover) ~ 	.itemsContainer.flex.flex-grow.vertical-wrap.centered.padded-bottom-page.virtualItemsContainer.virtual-scroller-overflowvisible.virtual-scroller[data-parentid='51069'] {
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
		transform: translateX(0%);
		transition: 02.0s;
		transition-delay: 3s;

Related: Fixing the alpha picker in collections

.alphaPickerButton-vertical, .alphaPicker-fixed-right {
	font-size: 17px !important;
	left: 5px;

Enjoy and Happy Thanksgiving.

Collection Playlist media card slider in css use URL ID.jpg

Edited by visproduction
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...