see animation when page on scroll

[abas619]

Hello to all I wanna be when the animated scroll page is displayed. How do I do this?

[GuilhermeDemoliner]

explain in more detail what you want please

[warengonzaga]

Hi @abas619, you can reveal animation when you scroll with the help of wow.js. A friend of animate.css!

For video tutorial please watch this video... https://www.youtube.com/watch?v=bd_jHBk8Kzw

You can also visit the repo for more info... https://github.com/matthieua/WOW

Please let me know if you have any questions about animate.css :) cheers!

[SakhirAtwi]

Hi @abas619,

You have many options that you can opt to choose, @WarenGonzaga mentioned wow.js which is pretty good. You can choose scrollreveal.js which is quite good for revealing animations but doesn't work quite well with animte.css. In my opinion your best bet is to use scrollmagic, in combination with GSAP and animate.css and you'll end up with something pretty amazing.

GSAP course on Youtube, GSAP Youtube

Scrollmagic course on Youtube, ScrollMagic Youtbe

Here is Pen for reference, CodePen proof of concept

[warengonzaga]

@SakhirAtwi agree with you... since this is animate.css repository lets keep the topic to animate.css solutions only. GSAP is js based animations (I am also a contributor on GSAP and enthusiast.) it has some advantage and disadvantage. For @abas619 you have to choose one between animate.css or gsap because they can't be used in one project because of some css rendering issues which we have discussed over gsap forum. That's why I create a plugin for GSAP to mimic our favorite animation from animate.css please check the link below.

greensock.com/forums/topic/15115-animatecssplugin-is-now-open

For everyone, even @daneden we should recommend solutions for animate.css only since we are on the official repo of animate.css if animate.css cant achieve what you want to achieve then make a suggestion instead. Alright.

[SakhirAtwi]

@WarenGonzaga agree with you totally, I have experimented with the combo of animate.css + GSAP + scrollmagic as in the pen I linked in the comment above, and honestly it was the complete disaster coz it creates some sort of glitch in your animation (Don't know why). If you are using scrollmagic then you should always always use javascript animations, i.e GSAP or velocity.js, using animate.css is absolute nightmare.

But!

the problem is some sort of flexibility should in fact be created in animate.css so that it can be used with scrollmagic or scrollreveal, right now you can use it purely with HTML5, but this practice hinders control from the developer for JS side.

Cheers, Happy coding :)

[abas619]

Thanks My Friend @SakhirAtwi

Sent from Mail for Windows 10

From: SakhirAtwi Sent: ‏جمعه,‏ ‏12 ‏مرداد ‏1397 ‏08:13 ‏ب.ظ To: daneden/animate.css Cc: abas dolati; Mention Subject: Re: [daneden/animate.css] see animation when page on scroll (#848)

Hi @abas619, You have many options that you can opt to choose, @WarenGonzaga mentioned wow.js which is pretty good. You can choose scrollreveal.js which is quite good for revealing animations but doesn't work quite well with animte.css. In my opinion your best bet is to use scrollmagic, in combination with GSAP and animate.css and you'll end up with something pretty amazing. GSAP course on Youtube, [GSAP Youtube]https://www.youtube.com/watch?v=_42HpXlGpfk&list=PLkEZWD8wbltlSS_d_7tx_H_FBNVro8918) Scrollmagic course on Youtube, ScrollMagic Youtbe Here is Pen for reference, CodePen proof of concept — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[warengonzaga]

So this issue should solve now :) @daneden or @eltonmesquita please close this :) thanks!