31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

I am using this:

http://daneden.me/animate/

I learned how to use it now but how do I make it animate only when you scroll down the page and reach that certain point in the browser?

Does this make sense? Because what good is it for my content to have a nice fade in animation when nobody would see it because its in the bottom. I would like them to gradually see the effects as they scroll down and reach the animation points.

2362 posts Bird is the word..
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
jonathan01 says

You have to use JQuery to enable way points to trigger your animation names – try searching google it will give you quicker answers than a general forum – however here’s a useful link:

http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

Jonathan

31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

I also tried this but cant get it to work how i want.

http://imakewebthings.com/jquery-waypoints/

If anyone knows a script for what I want please let me know. I can donate with paypal.

31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

anyone know how to do this?

512 posts (-_-(-_-(-_-)-_-)-_-)
  • Has referred 50+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+5 more
Themewaves says

Add css animations. I have used animate.css you can find it on google.

GL!

31 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
blingcart says

Animate.CSS is the CSS I am using. It is the one I posted in my original post. What I want to learn is how to hide something and once you scroll down and reach a certain waypoint it then appears and animates from left to right in a fade type animation.

1 post
  • Has been part of the Envato Community for over 1 year
  • Has collected 1+ items on Envato Market
Rv-Designs says

Hi Blingcart i hope you already solve your problem, but i am using Animate.css with skrollr.js.

http://daneden.github.io/animate.css
https://github.com/Prinzhorn/skrollr

Hope this will help you if not send me a reply and i will show you some script that i use on my web pages.

3752 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Located in Spain
  • Has sold $125,000+ on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+9 more
pezflash says
http://mynameismatthieu.com/WOW/

Actually it uses animate.css

;)

112 posts
  • Made it to the Authors' Hall of Fame
  • Has sold $40,000+ on Envato Market
  • Sells items exclusively on Envato Market
  • Has referred 10+ members
+2 more
IG_design says
http://scrollrevealjs.org/

A simple way to create and maintain how elements fade in, triggered when they enter the viewport.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by