This content originally appeared on DEV Community and was authored by Joe ???????
The intersection observer is an incredibly powerful API, and really great for managing scrolling animations. When combined with Tailwind, it gets even better.
In my use case, I have multiple elements which need to fade in once they are in the viewport, but their transition time should vary to give a sense of speed and progression.
To achieve the varying animation speeds, you could do a few things:
- Use inline styling
- Write a class for each element
- use the
attr()method in CSS
My project is using Tailwind and Vue, so I opted for a tailwind class-based solution.
Let's have a look at my observe:
observeHandler(ob) {
ob.forEach((el) => {
el.target.style.opacity = ob[0].intersectionRatio;
});
},
Pretty simple stuff. We are using the intersection ratio to calculate the opacity of the element, to fade in on scroll.
I've got a lot of elements to observe, here's my solution in attaching the observe:
let options = {
root: document,
rootMargin: '0px',
threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
}
let observer = new IntersectionObserver(this.observeHandler, options);
let els = document.querySelectorAll('[data-observe]');
els.forEach((el) => {
observer.observe(el);
});
Amazing, nice and simple. We seek elements with the data-observe attribute:
<div class="text-5xl mb-5" data-observe>Websites are more than code.</div>
Now, back to our delays and transition speed. I am using Tailwind classes to manipulate those properties, here is a great example:
<div class="flex items-center delay-75" data-observe>
<div class="w-10 h-1 bg-black mr-3 mt-1"></div>
<div class="text-2xl">I capture the imagination,</div>
</div>
<div class="flex items-center delay-300 duration-300" data-observe>
<div class="w-10 h-1 bg-black mr-3 mt-1"></div>
<div class="text-2xl">hand-craft experiences</div>
</div>
<div class="flex items-center delay-500 duration-500" data-observe>
<div class="w-10 h-1 bg-black mr-3 mt-1"></div>
<div class="text-2xl">and build solutions.</div>
</div>
This means I can add any number of observers, and use tailwind to control speed, which is amazing.
To see the final result:
This content originally appeared on DEV Community and was authored by Joe ???????
Joe ??????? | Sciencx (2021-05-08T16:03:54+00:00) Tailwind + IntersectionObserver API = <3. Retrieved from https://www.scien.cx/2021/05/08/tailwind-intersectionobserver-api-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.