Hi Jamie. This is known as the Ken Burns effect. It’s popular because it adds just a slight dynamic to somehow classic, “boring”, 2D slideshows. In addition to the zoom in, it’s better to add a slight shift, a 2D move in one direction, like if the slide wanted you to focus on something particular.
It’s quite easy to do that in Webflow, but in the case of a slider, there are a few things to take into consideration:
you want the animation to never stop (several options here, the most evident being a very slow zoom-in followed by a very slow zoom-out, and loop)
you want the animation to start when the slide is displayed, so that you don’t en up browsing slides that are already zooming-out
You could do just 1. and igore 2. 2. has to use the slider trigger, so that the interaction on the image only starts and play when the slide is brought as active.
As your structure is set now, it’s difficult to apply a scale transform to your images because they’re the background of the slides, and slides are… particular webflow elements that you should try to style too much… rather put a div inside it, then your image inside the dic, as an image, it will be far easier to scale up. I think you failed because of that aspect.
Before going any further, could you try rework your structure, add images as images and try the 1. scenario with the looping forward and backward Ken burns effect, and see how it’s looking? Then come back and we can work this more (:
Great shout Vincent! I was about to rearrange my structure anyway as it was a bit daft, I had them set as bg images because it was quite nice having the slight transparency on the mask (but I’ve discarded that now!)
I’ll add them as images then get back to you, thanks again.
I have a tip for the strength of the motion for a nice KB effect. Set it to the very minimum you can, then divide it by two (: I mean it has to be very subtle. The one in your reference site is a bit too fast imho.
What do you think? Probably needs a bit less, plus it might be that having the images move in opposite directions between transitions is a bit confusing.
In this case, try to move them straight, with no or almost no side shifting. And for the moment there is too much motion. See if it’s better with the straight zoom.
I’ll keep that in mind if I use the ole’ Ken Burns effect in the future (which I’m sure I will!) but I’ve decided to go with background video instead, think it looks a bit punchy! http://normalvideoconcept1.webflow.io/ (p.s. still need to kill the white + play around with sizing)
One thing I noticed, @cyberdave is that when the slideshow transitions between slides in can cause a lot of lag further down the site. I guess this might just be because we have such a long page as our site, but it did become a bit of a bug bear! Anywho, sorted now
Lol, after I wrote my post, I was thinking… better go with a big fat gif anim (: Video is nice too! You should mask it for devices because it won’t autoplay, and make a small animated gif of under 200ko with part of the anim, to keep the effect.
That’s what I do when I have a video bg on desktop, for example here : http://www.1001pneus.com/ As soon as you’re on tablet, it’s a shorter gif.
Nice work man! Love how the nav moves to bottom in device view, very nice detail in terms of usability! Yeah a gif is a shout, might go for something a bit more abstract (maybe just moving colours) to keep the gif short and low size.
There’s a bug that hides the last icon… originally the last icon was unfolding a More… menu like the facebook app does, but it’s now just a cnchor to the secondary sections. Drop menus on mobile… I don’t like that (:
Don’t forget you can also get a super small graphic pattern file, one that’s seamless to loop, and add a custom css property to make the baground move endlessly… that’s cheap in resources, very cheap (:
Ooo a graphic pattern file sounds good, as in an SVG? Then animate through WF interactions?
A gif could probs work OK though, I just need to play with the effect (I’m thinking something like what you used in your Star Wars page behind the header!) Just some colours with slight movement. Reckon I’ll crop something out of this vid FREE Light leak stock footage video Loop Nr.01 for you to download! - YouTube
Not yet because there is no background motion possble whit webflow. But with added CSS custom code either in the dashboard or in the page through HTLML widget.
Edit: actually JS is needed. Here you have an example with a nice 3 layers animation:
Went for this as a start http://normalvideoconcept1.webflow.io/, think the gifs colours need a tweak (and needs slowing down!) but it works and could potentially look nice!
nice page!