Using Jquery to add animation on scroll

[Eventprof]

Hey there,

Ive been wresting with many videos and articles on the best method, and how to trigger CSS animations on scroll, but i’m not getting the hang of it.

Basically what i want to do is trigger this animation i’ve made just after the black box elements of my grid come into view of the viewport. See image below.

From my understanding Jquery would be the best method of implementing this, i’ve been trying to follow the tutorial on this page under “waypoints”

JavaScript + jQuery effects · Web Dev Topics · Learn the Web

I don’t know how to implement the Jquery script in X pro, do I need to import the file? Or can I just copy and paste the Jquery.

I might be way off here, so if there is a simpler way of achieving this, please enlighten me.

Many thanks in advance

[jade]

Hi Adam,

You may add the jQuery code in the JS section of the header builder:

(function($){

	// Add the JS codes here

})(jQuery);

Hope this helps.

[Eventprof]

Hi, thanks for your reply.

I’ve finally, thankfully got it working. Im so happy.

What i’ve done is add the Jquery script into the content JS editor, and then added a waypoint function to the element I want to animate using a class, in this instance “featureblock”. See below image.

After I knew the script was triggering by testing in Chrome console I then asked the Jquery script to add a second class to my object I want to animate. This second class contains my desired animation as can be seen below:

Because the default class “featureblock” contains an opacity of 0, when the second “anitopfade” class is added it adds opacity from 0 to 1 in the specified time.

Im a complete CSS and Jscript novice so this is a victory for me. If you can see any way I can improve my code, please let me know. And if you can see any potential flaws in the method.

Cheers!

[Eventprof]

A flaw I have found… is that when the JS is triggered to add the “anitopfade” class, it will obviously apply it to ALL the featured black boxes with my “featureblock” at once.
Is there a better way to have each of these trigger separately other than making multiple “featureblock” classes for every box i want to animate? eg “featureblock1” “featureblock2” ect…

Many thanks

[ruenel]

Hello Adam,

You can add a unique element ID in your bar settings so that you can have #featureblock-1, #featureblock-2, etc.

Just make sure that you have edited your custom JS and CSS code. If still does not work for you, since this is a 3rd party script and a custom development, we highly recommend that you contact the original creator of the script. He should be able to help you and give you a more detailed way to accomplish what you have in mind.

Thank you for your understanding.