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
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.
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!
Sorry for the delay… a couple things you need to do…
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.
That‘s awesome! +1 to you karma