Modifying Logo in Artion

I have figured it out. However, now I need to know how to change the point in time when the logo moves to the top left corner, i.e. when the animation is happening. I believe that this can be changed in the template.css file for the css class .animated-text. However, in template.css I was not able to determine exactly which parameter to change to make the animation occur earlier in the scrolling, for example right when the user scrolls a little bit.

Thank you!

Hey Tim,

Quick question i am currently using the Artion Theme but cannot work out where i can change the Logo - where did you find it?

Just to clearify, i can find the Theme Logo, which i did change but i mean the Logo on the Home Page that animates.

Hi Hashir,
you can do that in the Frontend, under the Layers Tab. Select the top one and click on the image tab, then it will appear.

Hi Mehtaz,

I understand what you mean, but to be honest if you can't provide me with an answer to that the template is quite one-dimensional in its usage. Is there no chance you can reach out to one of your colleagues for support? I had some technical questions before that were answered as well. Also, this question is not really involved, it's just about documentation of how the template works.

Thank you and best
Tim

I have the same issue. i think it's not very useable while the rest of the template is nice. I tried tweaking it a bit but i am left still feeling unsatisfied. I don't like that overlap on other content either. I tried to disable the image but then when i apply a logo in the template it doesn't show. I tried different layouts but the logo does not appear. How can i then use the template feature for the logo (which is a built in function and i would expect it to work). A standard feature of the template should not be disabled, it should be an option.

I have created a logo as *.svg.
Once in the same height as the Artion logo and once in the same width. But when I change it in the backend editor it does not appear. Or only very late when you scroll down the page.

Does anyone have a solution?

Do you have to follow special svg guidelines? e.g. svg 1.0 or 1.1 with special settings?

I can generate everything with Illustrator. Until now I don't see my various svg files instead of the artion logo.

Have you had a chance to look at this problem? Do you need anything else from me?

I have figured it out. However, now I need to know how to change the point in time when the logo moves to the top left corner, i.e. when the animation is happening. I believe that this can be changed in the template.css file for the css class .animated-text. However, in template.css I was not able to determine exactly which parameter to change to make the animation occur earlier in the scrolling, for example right when the user scrolls a little bit.

Hi.

For CSS editing use custom.css file only. Never make changes in template.css. Create custom.css file (read Helix doc about it) copy code snippet from template.css to custom.css and edit it there.

To make the animation occur earlier in the scrolling, create custom.js (read Helix doc about it). Find in main.js code snippet, which is responsible for this behavior copy it and paste to custom.js. Then edit.

Here is part of the code for this in main.js.

jQuery(function ($) {
  $(window).on('scroll', function () {
    const scrollPosition = $(window).scrollTop();
    if (scrollPosition > 1090) { //if window scroll position is more than 1090 px from top then the animation begins
      $('.animated-text').addClass('animate');
      $('.animated-text-section').css('zIndex', '9999');
    } else {
      $('.animated-text').removeClass('animate');
      $('.animated-text-section').css('zIndex', '1');
    }
  });
});