How do I animate a scale transform on image in slider?

Design help Animations & Interactions
1

Hi,

I need to reproduce the animated scaling image effect on this site http://www.bentley.co.nz/

Reading through the Forum where others have asked something similar, the suggestion is to place a div inside the slide to house the image and animate that, which is what I plan to do. But which Interaction do I use, none of them seem to be appropriate? (Thought Scroll into View might work but not really).

I’ve also seen a suggestion to animate a transform on a loop, but I’m not sure how to do that here either. Though I understand how the transformations are set up for Hover effects, just not how to set them as a looping effect in this situation.

Any suggestions would be great.

Cheers
Grant

Here is my public share link: https://preview.webflow.com/preview/bentley-and-co?utm_source=bentley-and-co&preview=bce3ce5b151fe8b6d7d4e9d0b1d61045
(how to access public share link)

2

If you are using default slider then you select a slide and create “slider” interaction from the list of elements triggers. Then for when slide in view create this scale animation and for when slide is out of view put make the scaled element go back to its natural size.

3

I found the answer. I used the Page Load interaction and selected the After Page Loads option, then animated the scale attribute. There’s a Loop option to select to keep things looping.

4

Thanks Dram. I found an approach that works, but I’ll take a look at your suggestion too.

Cheers!

5

Nice idea - but only test the performance of the site (Zoom-in + loop X images). The idea of @dram looks to me more “safe” from this aspect.

By the way, the “official” industry name of this slider effect is Ken Burns effect (Client from the original concept)

The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. wikpedia

6

I tried your idea Dram, but it doesn’t seem to want to reset for me between slides. The animated motion continues, doesn’t revert to scale factor 1. Here’s a published test of it with two slides Testing

if you want to have a look the page to look at is called Testing, in the Site Assets - Do Not Remove folder

7

Thanks, I tried Dram’s idea using the Slider Interaction, Slider In View, Slider Out of View, but the resetting of the scaling isn’t working as I’d hoped. Assume I must be doing something wrong, but it’s all pretty basic, have tried a few options for resetting to scale factor 1, but it doesn’t work.

8

Looks little buggy + Why not combine this with auto-play-slide. In my opinion, the best way is to use Vegas (Really cool custom JS library specific for this idea). Also, the zooming in Vegas is randomly (Looks “live”). In your example, this is a very simple zoom effect.

9

Yes, well I could look elsewhere, (Vegas looks good) but prefer to keep it all in house if I can.

10

Vegas install is by JS like this:

$("#example, body").vegas({
    slides: [
        { src: "/img/slide1.jpg" },
        { src: "/img/slide2.jpg" },
        { src: "/img/slide3.jpg" },
        { src: "/img/slide4.jpg" }
    ]
});

In 5-10 min you get this effect (If you know JS). Also the timer-progress line is very cool.

OK :ok_hand:

Anyway your example not working well (Plays only one time).

11

Thanks for that! If the Webflow version isn’t accepted I’ll try Vegas.

My version scales up to 1.2 over 9 seconds, pauses there for a bit, then scales back to 1 over 9 seconds. So far my testing shows it to be ok,

12

Ken Burns effect should be without “pause” + auto fade each slide (set to true “auto-play-slide”).

Example:
Each slide animation is 800ms - and autoplay-slide each 600ms (Like this you get an effect of “breath” slide).