Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Add animation to SVG (at the intro)

Add animation to SVG (at the intro)

Scheduled Pinned Locked Moved General Discussion
4 Posts 2 Posters 134 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    T Offline
    tali
    wrote on last edited by tali
    #1

    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!

    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by
      #2

      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
      1 Reply Last reply
      0
      • T Offline
        T Offline
        tali
        wrote on last edited by
        #3

        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!

        1 Reply Last reply
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by Richard
          #4

          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
          1 Reply Last reply
          0
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          I also code custom websites or custom Lay features.
          šŸ’æ Email me here: šŸ’æ
          info@laytheme.com

          Before you post:
          1. When using a WordPress Cache plugin, disable it or clear your cache.
          2. Update Lay Theme and all Lay Theme Addons
          3. Disable all Plugins
          4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

          This often solves issues you might run into

          When you post:
          1. Post a link to where the problem is
          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
          Online Users
          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
          laytheme.com
          • Login

          • Don't have an account? Register

          • Login or register to search.
          • First post
            Last post
          0
          • Recent
          • Tags
          • Popular
          • Users
          • Search