Streaming live at 10am (PST)

Slider Image coming from the bottom


#1

Yo!

Look at this slider: http://www.jimrileymusic.com
Is there a way to make it like that where the image rises from the bottom instead of the default coming from the side?
Is it doable via some JS?


#2

Probably not what you are looking for but here it is using only webflow's slider widget, no JS.
http://webflowforumhelp.webflow.com/slider

The secret: Rotate transform and a bit of photoshop hackery (only for set width containers)
https://webflow.com/design/webflowforumhelp?preview=683e5a91620e881118e55a39b25450ab

Cheers


#3

@StevenP, I had been experimenting with the slider interactions a bunch. What you are wanting is relatively easy to mimic with interactions. And webflow provides a ton of freedom to make stuff pretty sexy with a little experimentation. The most difficult part for me was relocating the nav, the interactions were very simple and completely reusable.

Use crossfade on the slider. Set the transition to a tiny amount if you only want the push up effect. I was experimenting with combinations of fade and movement when I did this, so my example is very different from the example you are wanting to replicate, but should be possible.

Build a transition (move) interaction for the vertical move up or down triggered by slide into view for your image content (WARNING: never ever on the slide itself - only the slide content). You can also use a transition for slide out of view for the push, but the standard crossfade works OK if you want an overlay effect. The possibilities are pretty endless.

I have been wanting to get back to this, but am absolutely buried in other stuff. Hoping it helps as an alternate approach.
Here is an example to give you the idea:
http://roberthenry.webflow.com/


#4

Sweet guys! I'll have a look at it!


#5