0

By animation, I mean scroll animations that occur only if the user is scrolling, like on Apple websites for instance.

Edit:

I mean the type of animation you can find on this website: https://aliabdaal.com/ at the beginning, or this one https://www.apple.com/apple-vision-pro/

The animations are dependent on the user scrolling. I don't know how this type of animation is called, but that is what I mean.

1
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer.
    – Community Bot
    Commented Jan 24 at 16:28

1 Answer 1

0

This is essentially a) too broad a question to answer and b) not a question specific to wordpress (though there are different plugins that can help you create specific animations "on scroll"). However, i will try to explain some of the general "animation types" that can occur on Websites like Apple.


Fading in

"Fading in" essentially means specific content will be invisible (opacity:0) when you enter the website and will be faded in, once you scroll far enough on the website (mostly: when the content would be in your viewport). This is the type of "animation" that is created the most easy and a lot of plugins can be found that let you set an animation like that (mostly Site-Building plugins like Elementor or the like). It can also be realized without a plugin pretty easy by using a custom css class and a JavaScript technique named "IntersectionObserver". You can find tons of tutorials how to do this on google like this one: https://dev.to/jslim/fading-up-sections-using-intersection-observer-3fhj. Just adapt and tweak.

Parallax Scrolling

Parallax Scrolling essentially means that certain elements (mostly Images) either move slightly faster or slightly slower than your scrolling, creating an effect of "These images are nearer/farer away than the background of the website". This is also pretty easily creatable without a plugin by using some CSS and Javascript. A script for Parallaxing Elements by class and data-attributes can be found here for instance: https://gist.github.com/celsowhite/1c8d0696a75aad45ca92bfb499f24ec2

Simple CSS-Animations triggered by a specific scroll position

This essentially means that you write a CSS-Animation with Keyframes to be started when you reach a certain position on the website. This again can be realized with an IntersectionObserver and a custom CSS-Class starting the animation once the animated Element is in the Viewport.

Complex Animations

These are pretty hard to do and are most of the time a) very time consuming to realize and/or b) oftentimes rely on frameworks like GSAP to do the heavy lifting.


You probably won't find any plugins for Wordpress to create simple or complex animations, you may however find plugins to help you with the "fade-in" or "parallax"-kind of animations.

My advice is: get help from a webdeveloper.

Happy Coding!

1
  • By animation, I meant this type: aliabdaal.com like on the first part of the website? The animation is dependent on the user scrolling. Parallax animations are already included as options in Gutenberg blocks, and fade in can be added with a bit of CSS or via plugins.
    – FMB
    Commented Jan 18 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.