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
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.
1 Like
vincent, I love you!
Haha thatās nice Eugene 
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.
It would be great. I have about one week to make it. Please let me know, when youāll reproduce it.
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?
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!
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ā¦ 
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!
Thanks @eugene. Iāll take a look as soon as I get a minute and se if I can offer any tips.
@bryantay Do you have a minute?
Sorry for the delayā¦ a couple things you need to doā¦
- On your ādarken image divā youāll need to set the positioning to āAbsoluteā
- 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.
1 Like
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.
1 Like
Thatās awesome! +1 to you karma 