search

versoly / taos

Tailwind CSS Animation on Scroll - A simple and small (600 bytes) library to help animate elements while scrolling using responsive Tailwind CSS JIT utility classes.
https://versoly.com/taos
MIT License
243 stars 8 forks source link

Does not work well with a flex #13

Closed CoCoSol007 closed 6 months ago

CoCoSol007 commented 6 months ago

Hey, for my personal website, I created a flex with my projects cards. Screenshot 2024-04-27 175402 The code :

<div class="container mx-auto my-8 flex flex-wrap justify-center">
       <div class="flex flex-row m-5 w-full lg:w-1/3 px-4 mb-4 duration-300 hover:scale-105 bg-gray-900 p-6 rounded-lg shadow-md border border-gray-700">
...

I want to apply an animation to each card, but it didn't work. Screenshot 2024-04-27 175527 The code :

<div class="container mx-auto my-8 flex flex-wrap justify-center">
    <div class="duration-[600ms] delay-100 taos:[transform:translate3d(0,200px,0)_scale(0.6)] taos:opacity-0" data-taos-offset="100">
         <div class="flex flex-row m-5 w-full lg:w-1/3 px-4 mb-4 duration-300 hover:scale-105 bg-gray-900 p-6 rounded-lg shadow-md border border-gray-700">
...
CoCoSol007 commented 6 months ago

PS: it's a Svelte project

volkandkaya commented 6 months ago

You shouldn't need to create a wrapper div. Can just add it to flex

CoCoSol007 commented 6 months ago

Yes, it's work. Thx