How to achieve this animation
https://www.veed.io/view/a4e9b64b-1e53-4903-a087-feb493f5c6bb?panel=share
I am trying to replicate this animation but unable to achieve it. Any kind of help will be very helpful❤️. These are the resource images i used: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2YMdBO9YXfFyg2LdUjtzediDJP7jmeAScKWY193RmdNB5XvzWDuyw1-PcSR8SfrNCPMXkl9kqzi4Ki-k3MJqZCx1oKwszHq3ONlcH_36SS5pio5i32ZyPe1NKPu0B2TkRvI7dkeCbXUNyOJvl0SSlFPiXBOrq52y370VzyrkJ1IQJx8XkHsMFRA1AHwX/s619/blurryLargeImage.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEi1BIRQR9ZU64asiLsCADXLIe8qI6XEU3nlCqP215029bSO9-2Kvo04FbCFj6JbCZVv9YOKlocSmWDsp3C2euep8GhcTnm9VHjVfNuDT1jTDZDws2UR1KfqhJU5dRUdo759LE03uMAfHvddt2FOhM7rHrT_WsPDpAUT1aYUgw5PxgrNVjDspvxd3nY_0H/s1218/clearLargeImage.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Kj07qNDNK5LvfahTTxHimxS0tSIUJFhXaUGuRkG0Sv-qDZ4VLgZQ9Uqv6rZOE2yH0oSE9HFl6h5trKRHn7EmUMv_C_k7Lxt84htljv1535VyjuvZCsxSrx4nllukQYseb6NH-n4pVAuI3BCcOvIh5NTrmirXspQKxaw3GehVlwQ5xYFfGKJEDzEKvMXj/s1218/roomImage.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCL1bwgBIJ-MpUuOZc5EtW7keDQWTUKbyMiCwSATpSOQWdHCRO4zO_W7w5MFJEdHaCwXQ3G4uKc9O3VeyTBnqNQmAY8TFIFLnQtE2fsRxMoa-EO-IMELe5nSIgHs5xXYNtt_sFa80-ihle6O3C8_m3UfRGJxap2QZR22YTjdOViI2ShCqhtQkgMdcgtioR/s256/smallImage.png
Srajan
VEED
VEED - Project Name
Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED
31 Replies
lay all images on top of each other. set all but the first to opactity 0.
scale the first image from 0.25 to 1 with transform-position: left center. and 1 by 1 change the opacity of the others to 1
@MarkBoots the line that goes from right to left. it should gradually show the clear image. in the above animation clear image is shown after line touches left side. but i want it to show clear image as it goes from right to left. how to achieve that
ah okay.... can you share what you have until now. (codepen)
https://codepen.io/stressunfit/pen/RwEvQeQ, i havent done much progress here.
@MarkBoots
You can set the scale to be really small, and then add a transition to the scale value of 1 which will make it return to the normal size.
@Jus Sus || 💀
@snxxwyy yes done that. but that is one part of the animation. here is full video of the animation : https://www.veed.io/view/a4e9b64b-1e53-4903-a087-feb493f5c6bb?panel=share
Srajan
VEED
VEED - Project Name
Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED
Ah I’d recommend using a background image and then switching it out in an animation keyframe to achieve what you’d want rather than having lots of images on the page but hidden, though what mark said would work too. @Jus Sus || 💀
how to achieve this @snxxwyy
You could achieve that with a backdrop filter for blurring it I believe, then you don’t have to have multiple elements and can just change the blur of the backdrop filter in a keyframe animation. Or a pseudo element which you could just change the blur on.
here is a little start.
when i have time I can look at completing it
https://codepen.io/MarkBoots/pen/GRPzxow
@MarkBoots Damn! too good. Thank you so much
@snxxwyy Thank you let me try that.
No worries
included the moving line now too
https://codepen.io/MarkBoots/pen/GRPzxow
@MarkBoots Lifesaver!!!. I have a doubt. animation delay will only work on first iteration right. How to make animation infinte then.
a, if you want to make infinte repeat, then instead you'll have to use more steps in the keyframes to make it delay
what are the timings? every step 1 second?
@MarkBoots scale up 2sec, image reveal 1s as well as line moving. room image show after 2 secs and room image stays for 1s and then again loop
and the loop restarts just without some sort of aniumation from the room to the scaled down image?
@MarkBoots it scales down but while scaling down the blury image should be shown
okay, im not sure if i can do it all right now. but the idea is to make all animations the same total length, but the keyframes need percentage starts and stops on different points to make it follow eachother
@MarkBoots Please take your time. i will also try from my end🙏🏻🙏🏻.
this is what you explained, it that correct?
0s - 2s: scale up blurry
2s - 3s: reveal non-blurry with line
3s - 5s: stay non-blurry
5s: show room (no transition?)
5s - 6s: stay room
6s: show blurry (no transition?)
6s - 7s: scale down blurry
repeat
5s - opacity transition. but fot 6s-7s we can scale down with room image itself but half way through scaleing down maybe we can transition it to blurry image using opcaity
@MarkBoots
@MarkBoots i have added delay using keyframes. but having difficulty to make the room image stay for extra 2 seconds: https://codepen.io/stressunfit/pen/rNoPdGm
Can not play with it now but I think you don't have enough with the 6 seconds
i think its easier with 10s , 10% = 1s
something like this
https://codepen.io/MarkBoots/pen/jOXdKjg
@MarkBoots Thanks!! that looks great. I want to get good at animations, can you point me to some resources or tell me about the ways in which you practiced in your learning days.😊
i don't really have some resources that come to mind unfortunately, For me it was lots of practice and experience (I started 20 years ago 😉 )
@MarkBoots DAMN 20 years!!!. thats a long time. i just got started with web dev a year ago.
im still not good in animations btw... not really something I do a lot. But I do know the basics and have patience
@MarkBoots Can i add you as friend. i like to learn for people. i believe i can learn a lot from you 🙂
this server is a wonderful place to learn, lot of experienced people over here. Just ask if you have questions. (Im not really open to connect on individual bases, I'm here when ever I have time)
@MarkBoots Yes it is!. Thanks for taking your time on my issue.
no problem, good luck!
o, btw, if you want to keep my example codepens as a reference. Make sure you copy or fork it. (I will be removing it in a couple of days probably)