Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Page load effect #69

Closed
bandali0 opened this issue Sep 12, 2014 · 13 comments · Fixed by #70
Closed

Page load effect #69

bandali0 opened this issue Sep 12, 2014 · 13 comments · Fixed by #70
Assignees
@johno

Comments

@bandali0
Copy link
Contributor

What are your thoughts on having a smooth and subtle effect when loading the site pages? Maybe something like a top-down fast fade of the page.

Animsition seems like a nice library for this purpose. There's also the more general animate.css.

I understand the effort to keep the theme as simple and as minimalistic as possible, but I do think a subtle not-so-flashy effect could be nice.
@bandali0
Copy link
Contributor Author

I really like the fadeInDown effect of the animate.css library.

@johno
Copy link
Owner

johno commented Sep 12, 2014

I think I could get on board with binding a transition to an optional class on the body:

<body class="fade-in-down">
  <!-- Stuff -->
</body>

Looks like the CSS footprint would be pretty small since we can just grab a single class from animate.css.

@bandali0
Copy link
Contributor Author

Yeah. I tried fadeInDown locally and it looked great, to me at least :)

@johno johno self-assigned this Sep 12, 2014
@johno
Copy link
Owner

johno commented Sep 12, 2014

I'm thinking something similar to the following changes:

https://github.com/johnotander/pixyll/compare/optional-animation

Thoughts?

@bandali0
Copy link
Contributor Author

Providing an option in _config is great.

So, pretty much only animating the post headers? I think animating the whole body looks better ? I had tried with adding animated fadeInDown classes to the body in default.html and really liked it. This is nice too, but somehow feels a bit awkward to me 😛

@johno
Copy link
Owner

johno commented Sep 12, 2014

I'm pretty impartial as to where the animation occurs, so if you feel strongly about animating the body instead -- we can do that.

@bandali0
Copy link
Contributor Author

Great, so if you agree, let's go with animating the body for now and later we can always change to partial animations (or have an option haha).

@johno johno mentioned this issue Sep 12, 2014
Merged
@johno johno closed this as completed in #70 Sep 12, 2014
@bandali0
Copy link
Contributor Author

@johnotander OK, so I merged your animation PR into my branch, but for some reason, the animation feels different than when I was experimenting!

Here's what I had done before:

  • add //cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css stylesheet to default.html
  • add animated fadeInDown class to the body.

I was looking at your code, and seemed pretty much the same to me, but the animation I think is different than the one I got with my code yesterday. Maybe we are missing some styles or animation info in css?

@johno johno reopened this Sep 13, 2014
@johno
Copy link
Owner

johno commented Sep 13, 2014

Hmmm. Strange. I will look into this later today.

@bandali0
Copy link
Contributor Author

Any news @johnotander ? 😕

@johno
Copy link
Owner

johno commented Sep 15, 2014

My apologies, got sidetracked over the weekend.

I just looked into it, and it looks like the transition code hosted on the CDN was slightly different (I used a custom Gruntjs build from the animate.css repo), so I updated that to reflect what's on the CDN.

So, hopefully that works?

@johno johno closed this as completed in 89b5475 Sep 15, 2014
@bandali0
Copy link
Contributor Author

No problems!

Yep, it's how I wanted it to be now, awesome and thanks!

@johno
Copy link
Owner

johno commented Sep 15, 2014

Awesomeness!

nickjackolaisen added a commit to nickjackolaisen/BusinessInitiaitive that referenced this issue Jul 16, 2023
@nickjackolaisen
bug fix attempt johno#69
f4b17b9 
Baruch Hashem all I have to do is remove the limits I put up in the first place
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@johno johno

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add optional animation to the config. johno/pixyll
2 participants
@bandali0 @johno