CSS and jQuery Animation

HTML & CSS
1

Hey guys,

I`m working on this website https://storm-braces.herokuapp.com/ and I was wondering how can I make the logo after all the animation to move in the navigation menu (animated of course).

I got this in JS:

setTimeout(function () {
  $("#logo").animate({
    height: "toggle"
  }, 1500);

  $(".intro-page").animate({
    opacity: "toggle"
  }, 2000);
}, 5500);

and this in CSS:

.leftBraket,
.rightBraket,
.first-text,
.second-text {
  animation-duration: 1s;
}

.leftBraket,
.rightBraket {
  animation-delay: 0.8s;
}

.first-text {
  animation-delay: 3.6s;
}
.second-text {
  animation-delay: 3.8s;
}
.tornado {
  transform-origin: 50% 50%;
  animation-name: spin;
  animation-duration: 2.4s;
  animation-delay: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes spin {
  from {
    transform: scale(0) rotateY(0deg);
  }
  to {
    transform: scale(1) rotateY(360deg);
  }
}

If you need more details, let me know.
Please help! Thank’s … :smile:

2

Hi,

That page is giving an application error at the moment.

Application Error
An error occurred in the application and your page could not be served. Please try again in a few moments.

If you are the application owner, check your logs for details.
3

Hi :smile:

Try know.

4

Hi,

This question probably belongs in the jS forum but can you first clarify what is wrong and what you want to happen?

At present your logo spins in and when finished the logos height is animated to zero while the page fades out. That seems to be doing what is expected.

You mentioned the logo in the nav but that is an unrelated element as far as the animation is concerned.

5

Yes, it does … but instead of the logo from navigation menu I want it to be replaced with the logo from animation. Got it? :slight_smile:

6

I see you have made changes now and are sliding the logo upwards.

I think it would be a little awkward in that set up to move the spinning logo to the nav unless you start by using the logo from the nav itself and then return it to its normal position. Of course that doesn;t work in the way the page is set up as the original page is hidden under the animation to start with,

7

Yeah, I changed my mind … thank you anyway :smile:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.