31 posts
  • 7 Years of Membership
  • Collector Level 4
  • United States
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.

2792 posts Bird is the word..
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+11 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
  • 7 Years of Membership
  • Collector Level 4
  • United States
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
  • 7 Years of Membership
  • Collector Level 4
  • United States
blingcart
says

anyone know how to do this?

600 posts (-_-(-_-(-_-)-_-)-_-)
  • Most Wanted Winner
  • Elite Author
  • 2 Years of Membership
  • Mongolia
+9 more
Themewaves
says

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

GL!

31 posts
  • 7 Years of Membership
  • Collector Level 4
  • United States
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
  • 2 Years of Membership
  • Collector Level 1
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.

3757 posts
  • Elite Author
  • Spain
  • Author Level 8
  • Featured Author
+11 more
pezflash
says
http://mynameismatthieu.com/WOW/

Actually it uses animate.css

;)

142 posts Design Creativity Innovation
  • Elite Author
  • Trendsetter
  • Featured Author
  • Author Level 7
+5 more
IG_design
says
http://scrollrevealjs.org/

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

by
by
by
by
by
by