Scrool Animation

Scroll animasyonları, kullanıcıların web sayfasını kaydırırken ortaya çıkan dinamik ve etkileyici efektlerdir. Web tasarımında kullanıldığında, kullanıcı etkileşimini ve deneyimini artırabilirler. Bu blog yazısında, tailwind ,typescript ve framer motion kullanıcam.

Başlamadan önce projenizde tailwind ve typescript’in kurulu olduğunu varsayıyorum. Eğer yeni bir proje oluştucaksanız şu sitedeki adımları izleyebilirsiniz: https://tailwindcss.com/docs/guides/nextjs

Hadi başlayalım…

Öncelikle framer-motion paketini kuralım

npm i framer-motion

Ondan sonra animasyon için compenent dizinine gidip ScrollAnimationWrapper adında yeni bir dosya oluşturalım.

Oluşturuğumuz dosyanın içine bu kodu yazıyoruz.

import { motion } from 'framer-motion';

interface ScrollAnimationWrapperProps {
  children: React.ReactNode;
  className?: string;
}

export default function ScrollAnimationWrapper({ children, className, ...props }: ScrollAnimationWrapperProps) {
  return (
    <motion.div
      initial='offscreen'
      whileInView='onscreen'
      viewport={{ once: true, amount: 0.8 }}
      className={className}
      {...props}
    >
      {children}
    </motion.div>
  );
}

Bu componenti daha sonra kullanacağız şimdi ise scroll yaptığımızda hangi kordinatlarda ilerlemisi yada süresi gibi özellikleri belirttiğimiz fonksiyonunu yazıyoruz. Ben utils diye yeni bir dizin açıp onun içine yazmayı tercih ediyorum.

export default function getScrollLeftAnimation() {
  return {
    offscreen: {
      x: -200,
      opacity: 0,
    },
    onscreen: ({ duration = 2 } = {}) => ({
      x: 0,
      opacity: 1,
      transition: {
        type: 'spring',
        duration,
      },
    }),
  };
}

export default function getScrollRightAnimation() {
  return {
    offscreen: {
      x: 200,
      opacity: 0,
    },
    onscreen: ({ duration = 2 } = {}) => ({
      x: 0,
      opacity: 1,
      transition: {
        type: 'spring',
        duration,
      },
    }),
  };
}

İlk kod soldan ortaya gelicek şekilde ve ikinci kod sağdan ortaya gelicek şekilde ayarlanmıştır. Bunu dilerseniz x özelliğini y olarak değiştirerek aşşağıdan yukarı yada yukarıda aşşağı gelmesini sağlayabilirsiniz.

Şimdi gelelim en eğlenceli kısma.

Benim elimde yukarıdaki resimdeki gibi bir div var. Bu divin scroll edildiği zaman sol ksımının soldan ve sağ kısmının sağdan gelerek ortada buluşmasını sağlıcam. Dilerseniz sizde istediğiniz bir div’in yada herhangi bi componentın soldan veya sağdan gelmesini sağlayabilirsiniz.

İndex.tsx sayfasına gidip gerekli importları yapıyoruz . Dosya konumları sizin oluşturduğunuz yere göre değişkenlik gösterebilir !!!

import Head from 'next/head';
import { motion } from 'framer-motion';
import { useMemo } from 'react';
import ScrollAnimationWrapper from '../components/ScroolAnimation';
import getScrollLeftAnimation from 'utils/LeftAnimateScrool';
import getScrollRightAnimation from 'utils/RightAnimateScrool';

Daha önce tanımladığımız leftscrollAnimation ve rightscrollAnimation fonksiyonlarını çağırıyoruz. Not: Burda useMemo kullanma nedenimiz gereksiz render işleminin önüne geçmek ve değişmeyen state’lere sahip sayfaların render işlemini engellemek.

const leftscrollAnimation = useMemo(() => getScrollLeftAnimation(), []);
const rightscrollAnimation = useMemo(() => getScrollRightAnimation(), []);

Animasyon efektine uğramasını istediğimiz compenent yada div elementini ScrollAnimationWrapper ile sarıyoruz.

<ScrollAnimationWrapper>
            <motion.div
              variants={leftscrollAnimation}
              className=''
              whileHover={{
                scale: 1.0,
                transition: {
                  duration: 0.2,
                },
              }}
            >
              <div> //COMPONENT </div>
            </motion.div>
          </ScrollAnimationWrapper>

En son index.js

import Head from 'next/head';
import { motion } from 'framer-motion';
import { useMemo } from 'react';
import ScrollAnimationWrapper from '../components/ScroolAnimation';
import getScrollLeftAnimation from 'utils/LeftAnimateScrool';
import getScrollRightAnimation from 'utils/RightAnimateScrool';

export default function Home() {
  const leftscrollAnimation = useMemo(() => getScrollLeftAnimation(), []);
  const rightscrollAnimation = useMemo(() => getScrollRightAnimation(), []);
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name='description' content='Generated by create next app' />
        <meta name='viewport' content='width=device-width, initial-scale=1' />
      </Head>
      <main>
        <div className='lg:w-1/3 space-y-5 '>
          <ScrollAnimationWrapper>
            <motion.div
              variants={leftscrollAnimation}
              className=''
              whileHover={{
                scale: 1.0,
                transition: {
                  duration: 0.2,
                },
              }}
            >
              <div> //COMPONENT </div>
            </motion.div>
          </ScrollAnimationWrapper>
        </div>
      </main>
    </>
  );
}

Veee karşınızda animasyon!

Okuduğunuz için teşekkürler ❤️

Soru ve görüşleriniz için abdullahgumus14@hotmail.com mail adresinden ulaşabilirsiniz.