Streaming live at 10am (PST)

Smooth zooming Gallery Animation


#1

Guys,
I really like one(http://stopka.cz/) animation, but after several experiments I came to you for some tips.
Please help me to copy such smooth animation with half transparent div after few seconds.

Best,
Eugene


#2

Create a DIV and give it a class, put your image in it or in its background.
Create an Interaction and give it the name "Zoom on load".
Add a trigger "on load".
Add a Step : Scale 1,09x, 3500ms Linear
Add a Step : Opacity 50% with transition 500ms Ease.

You're now quite close to it. From there, you can fins tune, for example adding zoom also to the second step.


#3

vincent, I love you!


#4

Haha that's nice Eugene smile
Now if you want to reproduce all the effect, with text etc, it's possible in Webflow, it requires a bit more work. It's very interesting, I like the effect too, I'd like to reproduce exactly it for fun. Sadly, I have a video to finish today and can't play much with Webflow : ) I'll let you know.


#5

It would be great. I have about one week to make it. Please let me know, when you'll reproduce it.


#6

I have tried to apply this effect on slide without success. The zoom work for the first slide, but not for the 2 others. Any idea how to achieve this?


#7

Thought i'd give it a try.... Here's the results:

http://slidertest2.webflow.com

Public Link:
https://webflow.com/design/slidertest2?preview=adc477fbaef66deeef8842d5cda9243b

P.S. man I'm digging Webflow!


#8

Of course this suffers from the same issue I've discussed in this thread:

If the user accidentally taps or clicks anywhere on the screen it will stop the slider from advancing to the next slide.

I get the impression that the Webflow team doesn't see this as as big of an issue as I do. IMO, It makes using the slider widget for this purpose impractical because all it take is an accidental click on desktop computers or even a touch-to-scroll on mobile to stop the slider from continuing... frowning


#9

bryantay,
your slider looks awesome, I spend pretty much tile trying to copy your settings, but probably I am mistaken somewhere and it doesn't work.
https://webflow.com/design/tiles?preview=c04651cf67e2056f443ee04ef40d68ce
I have some issues with my interactions for dark background. Please have a look.
Thank you!


#10

Thanks @eugene. I'll take a look as soon as I get a minute and se if I can offer any tips.


#11

@bryantay Do you have a minute? smile


#12

Sorry for the delay... a couple things you need to do...

1) On your "darken image div" you'll need to set the positioning to "Absolute"

2) Once you do that you'll notice your background is being push down... This is being caused buy the top margin of 30px you have set on your "Center Copy Div". Remove that margin and your background will move back into place.


#13

ooops, it looks like you'll also need to remove the top margin of 20px on you "All H3 Headings" selector..

Basically the margins you have set on the items relating to your center copy div is pushing things down.


#14

That‘s awesome! +1 to you karma smile


#15