Animated illustrations for website. Has anyone had experience with this type of build and the challenges you overcome?

Animated Illustration

Replies7

  • Good job!

    For some subpages it is bit weird if headline animates in with long animation. Otherwise I see you went with GSAP (Y)
  • @Mark Phillips Hi, looks great, nice clean layout. It would have been good to work on this
  • @Tanel S Super useful - Thank you for the prompt response.

    A lot of my research matches with your reply. So, I’m on the correct path. You’re so right that the brief has to be 100% spot on with the agency.

    There are two options for agency:

    - illustration
    - animated illustration

    Obviously a different price point for both ideas.

    So your reply really helps me explain to them, what they could design based on the concept ideas but very importantly the delivery format to integrate with Elementor.

    I’m thinking



    It’s a challenge and yes, complicated, so many people involved with a level of risk involved.




  • Such a complicated topic.
    It depends on animations and illustrations. What is needed to be shown, where etc.

    WP is an open system so you can pretty much build anything there.


    Most common ways are:
    - Use mp4 videos for animations.
    - Used SVG assets and GSAP/Tweenmax or some other animation library to animate it.
    - Lottie files.
    - There is a new tool Rive for web animations.
    - simple old animated .gif files work for some particular usage cases. Especially attractive for newsletters.

    For more complex 3D illustrations
    -WEBGL and threejs could be an option.

    So probably I would explain to the agency where it is planned to be used and expect that they offer the best solution regarding the planned creative. Elementor should be able to add videos and custom code blocks as far as I know.
    Depending on that you may want to get illustrations in vector format (without animation) eg .ai .pdf .svg
    When animated as mp4 video files or .lottie files or perhaps just coded into HTML as SVG graphics with CSS or JS animations. Different teams use different file structure. Sometimes could be just 1 HTML file or it could be a whole project depending on the needs and complexity.

  • Client is looking to brief an agency to design some animated illustrations for a Wordpress/Elementor website build.

    - once designed, what is the format of files delivered
    - can WP/Elementor handle a file like this

    Any advice would greatly be appreciated.

You must sign up or log in before you 
add a comment.

Post reply