Ken Burns effect without coding?

1

Hi there! Is there any possibility to add a Ken Burns effect to Images? I want to use this effect for a header image.
:question::pray:

2

I have a really good feeling we will see a lot of new and great features in the up and coming Sparkle 5, especially with images. Not too long now, I’m hoping! :slight_smile:

1 Like
3

It’s fairly easy to create a Ken Burns effect video and then loop it in Sparkle as your header image:

I opened three photos in a Slideshow project in Photos and made a screen recording of the preview there, using QuickTime Player. I trimmed the beginning and end so that it would loop smoothly, and placed it in Sparkle in a player that has no controls, is muted, and is set to autoplay. Here it is:

https://weprepit.com/temp/230421-autumn/

The video needs to be optimized a bit (to reduce its file size and hence its loading time), so I would run it through ff-Works to do that. Anyway, just an idea for how to get what you’re looking for!

3 Likes
4

Thank you. I will try. I was hoping for a tool inside sparkle. Something like an effect. :pray:

5

I know you mentioned “without coding”, but I have used the html code below and it worked. Been a while since I used it though, so cannot give any further directions as far as source photos, etc. Someone else might be able to chime in about it.

#SlideShowContentPanel { -webkit-animation: burns 50s; animation: burns 50s; -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; } @-webkit-keyframes burns { from { -webkit-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); transform: scale(1.2,1.2); } to { -webkit-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } } @keyframes burns { from { -webkit-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); transform: scale(1.2,1.2); } to { -webkit-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } }
1 Like
6

Thank you! How did you place the code? :face_in_clouds:

7

Hello :wave:t2:

The effect with @updeinva’s code is almost achievable without adding any code thanks to the “pulse” animation built into Sparkle. You can see the result here: Ken burns

The effect consists of using the slow and looping animation, which will give an illusion of zooming in and out. However, you will need to hide the bottom (and possibly the top) of the image to avoid seeing it being resized with the animation.

If you want to use updeinva’s code, send me a private message and I will explain how to do it :blush:

1 Like
8

Well done @Allan for thinking outside the box!!! :slight_smile: :clap: :clap: :clap:
I would say that is really close!

1 Like
9

Hi Allan, thank you. Before I asked here I thought, the pulse effect was like Ken Burns. It is to fast for what i wanted and the loop comes too fast. I hope there will be more effects in the next Sparkle Version. I’ll write you a mesage. :pray: :mailbox_closed:like the

10

You can increase the animation duration and delay as you wish, this was just an example :blush: