Framer Motion using Svelte
Framer Motion is a production-ready motion library for React. we are going to use Svelte-Motion which is a port of Framer Motion for Svelte.
'%20fill='%23F7F5F5'/%3e%3cg%20clip-path='url(%23clip0_1_2)'%3e%3cpath%20d='M342.197%2061.1288C342.693%2058.794%20344.096%2056.752%20346.098%2055.452C348.1%2054.1519%20350.536%2053.7004%20352.871%2054.1967C355.33%2054.729%20357.488%2056.1914%20358.894%2058.2781L360.635%2060.9586'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M361.675%2056.0679L360.635%2060.9586L355.744%2059.919'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_2'%3e%3crect%20width='24'%20height='24'%20fill='white'%20transform='translate(341.757%2048.7673)%20rotate(12)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Tweened
Tweened Effect using Framer Motion.
'%20fill='%23F7F5F5'/%3e%3cg%20clip-path='url(%23clip0_1_17)'%3e%3cpath%20d='M332.452%2072.8004C333.082%2069.8388%20335.041%2067.2865%20337.898%2065.7051C340.755%2064.1236%20344.277%2063.6425%20347.689%2064.3677C351.282%2065.1437%20354.475%2067.0955%20356.599%2069.8148L359.233%2073.3055'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M360.551%2067.1017L359.233%2073.3055L352.087%2071.7865'%20stroke='white'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cpath%20d='M337.776%2057V55.858L340.805%2052.8878C341.095%2052.5952%20341.337%2052.3352%20341.53%2052.108C341.723%2051.8807%20341.868%2051.6605%20341.964%2051.4474C342.061%2051.2344%20342.109%2051.0071%20342.109%2050.7656C342.109%2050.4901%20342.047%2050.2543%20341.922%2050.0582C341.797%2049.8594%20341.625%2049.706%20341.406%2049.598C341.188%2049.4901%20340.939%2049.4361%20340.661%2049.4361C340.374%2049.4361%20340.122%2049.4957%20339.906%2049.6151C339.69%2049.7315%20339.523%2049.8977%20339.403%2050.1136C339.287%2050.3295%20339.229%2050.5866%20339.229%2050.8849H337.724C337.724%2050.331%20337.851%2049.8494%20338.104%2049.4403C338.357%2049.0312%20338.705%2048.7145%20339.148%2048.4901C339.594%2048.2656%20340.105%2048.1534%20340.682%2048.1534C341.267%2048.1534%20341.781%2048.2628%20342.224%2048.4815C342.668%2048.7003%20343.011%2049%20343.256%2049.3807C343.503%2049.7614%20343.626%2050.196%20343.626%2050.6847C343.626%2051.0114%20343.564%2051.3324%20343.439%2051.6477C343.314%2051.9631%20343.094%2052.3125%20342.778%2052.696C342.466%2053.0795%20342.027%2053.544%20341.462%2054.0895L339.957%2055.6193V55.679H343.759V57H337.776ZM346.507%2050.4545L347.828%2052.8707L349.17%2050.4545H350.803L348.83%2053.7273L350.837%2057H349.213L347.828%2054.6435L346.456%2057H344.82L346.814%2053.7273L344.871%2050.4545H346.507Z'%20fill='white'/%3e%3crect%20x='276'%20y='167.711'%20width='100'%20height='100'%20rx='20'%20transform='rotate(-45%20276%20167.711)'%20fill='%2393EAFD'/%3e%3cdefs%3e%3cclipPath%20id='clip0_1_17'%3e%3crect%20width='35.0668'%20height='30.4433'%20fill='white'%20transform='translate(331.33%2057)%20rotate(12)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Spring
Spring Effect using Framer Motion.
Duration based Spring
Duration based Spring Effect using Frame...
Repeat
Repeat Effect using Framer Motion.
Reverse Effect
Reverse Effect using Framer Motion.
While Hover Effect
While Hover Effect using Framer Motion.
While Tap Effect
While Tap Effect using Framer Motion.
While Drag Effect
While Drag Effect using Framer Motion.
Cycling through States
While Drag Effect using Framer Motion.
Animation Sequence
While Drag Effect using Framer Motion.
Drag Constraints
Drag Constraints Effect using Framer Mot...
Drag Direction Locking
Drag Direction Locking Effect using Fram...
Drag Transform
Drag Transform Effect using Framer Motio...
Drag 3D Transform
Drag 3D Transform Effect using Framer Mo...
Color Interpolation
Color Interpolation Effect using Framer ...
Morph SVG
Morph SVG Effect using Framer Motion.
Scroll Progess
Scroll Progess Effect using Framer Motio...
Keyframes Position
Keyframes Position Color Effect using Fr...
Animated Presence Stack
Animated Presence Stack Effect using Fra...