Add animation to SVG (at the intro)

[tali]

Hi hi :)
I have an intro, which is a small video composed by two images: One map + One Sign

The idea of the video is that the Sign goes up until it disappears. I don't know how to make this animation so I did it as a video and used it on the Intro. https://fpl.talineiman.com/de/

The thing is: Now I want to make the Sign go up only when someone clicks.
So for that, I guess I can add the Sign as a SVG. and try to animate it by "Go up".

So my question is: How can I add this transition to the SVG file?

Hope you can help.. Thank u so!

[Richard]

Dear @tali

Super Cool website! 🌝

A 'Transition type' can be set for your Intro via:

Customize > Intro > Transition > Go Up.

In your previous thread I suggested you could create the same user experience of "viewing until clicked" by setting the wait time so high that it acts the same, if somebody is really going to wait minutes upon minutes maybe you want to automatically progress to the website anyway, making the Intro options work in your favour.

---

Have a wonderful day Tali 🌝

Sincerely

Richard

[tali]

Thank u! Its a good idea to set the time for ever and then it will go away when u click.

Now, in my intro I have 1 background image + 1 SVG file on top http://fpl.talineiman.com

Both are "going up" together, but I don't want that. I would like the SVG to go up and the background image to just fade out.

Now I can't do that on Customize because there are no animation options for the SVG file.

How should I do it?

Thank u!

[Richard]

Dear @tali

Applying two different effects on the same intro would require some custom coding on your part.
Code would be added via > Lay Options > Custom CSS & HTML >

https://laytheme.com/documentation.html#custom-css-styling
https://codepen.io/chrisroselli/pen/oXyqRa
https://stackoverflow.com/questions/55929953/svg-fade-in-animation
https://css-tricks.com/animating-svg-css/

---

Best wishes 🌅

Richard