Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Entry and exit animations for question

  • lukasleopold
  • lukasleopold's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
1 month 19 hours ago - 1 month 19 hours ago #259052 by lukasleopold
Entry and exit animations for question was created by lukasleopold
Please help us help you and fill where relevant:
Your LimeSurvey version:  LimeSurvey Community Edition  Version 6.5.0+240319
Own server or LimeSurvey hosting: Own server
Survey theme/template: fruity (extended)
==================
I have been trying to add both an entry (e.g. FadeIn) and an exit (FadeOut) animation to questions. In the survey theme options for fruity, I can select FadeIn, which animates the question container when it is rendered on the screen; or FadeOut, which animates the container when I succeed to the next question/group (upon clicking the button). So I feel that it might be possible to have both animations (FadeIn triggered upon rendering, FadeOut triggered upon button click), but in the theme options, I can only select one.

What I tried so far:
 I tried selecting FadeOut in the theme options, and adding the FadeIn animation manually into the custom.css,
Code:
.fruity .question-container {
    animation: fadeIn 0.5s;
}


but apparently the custom.css overwrites the theme option. Next, I tried finding the code that triggers the animations (FadeIn on rendering, FadeOut on button click) to get an idea of what custom JS for this might look like, but I couldn't find anything (JS and PHP noob here! :-( )

Do you have any ideas on how to do this, or can point me into the right direction?

Best,
Lukas
Last edit: 1 month 19 hours ago by lukasleopold.

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose