micha-lmxt / svelte-motion Goto Github PK

running sveltekit @next 201 and getting the following message in the console:

(node:32029) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/svelte-motion/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

Could you explain how using lifecycle animation : start / end ?
I wanna make slideshow like your example but with preloading next slide when actual slide transition is done.

Thanx for your great job.

getting the following error simply trying to use motion in a kit app...did not change any code:

[HMR][Svelte] Unrecoverable HMR error in <MotionConfig>: next update will trigger a full reload
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'update')
    at scaleCorrection (MotionConfigScaleCorrection.js:32:34)
    at instance (MotionConfig.svelte? [sm]:46:28)
    at init (index.mjs:1891:11)
    at new MotionConfig (MotionConfig.svelte? [sm]:49:30)
    at createProxiedComponent (svelte-hooks.js?v=c273ae18:341:9)
    at new ProxyComponent (proxy.js?v=c273ae18:242:7)
    at new Proxy<MotionConfig> (proxy.js?v=c273ae18:349:11)
    at create_if_block_2 (Grid.svelte? [sm]:235:64)
    at create_fragment (Grid.svelte? [sm]:250:67)
    at init (index.mjs:1906:37)

...which is completely breaking the use of svelte-motion for me in the latest version of kit, which is 480 at the time of this issue creation.

I'm getting a type error because I'm trying to use a function inside whileDrag

 whileDrag={handleTouch}

Type '() => void' is not assignable to type 'VariantLabels | TargetAndTransition'.

The code works fine and does exactly what I need though. Execute a function while the object is being dragged.

Is there any way to disable this type checking?

I'm using Svelte with Vite.

When using import { useDragControls } from "svelte-motion" it tells me Failed to fetch dynamically imported module http://127.0.0.1:5173/node_modules/@sveltejs/kit/src/runtime/client/start.js
The only thing I can import is import Motion from "svelte-motion/src/motion/MotionSSR.svelte" but I don't understand why. Can I help with this Repository in any way? Or is it simply not possible?

I am working on a reorder component like what framer motion has.
trying figure out why drag and drop style prop is not updating.
code below.

<svelte:options runes={true}/>
<script lang="ts" generics="V">
	import type { SvelteHTMLElements } from 'svelte/elements';

	import type { Snippet } from 'svelte';
	import type { ForwardMotionProps } from '$lib/animations';

	import { Motion, useMotionValue, useTransform } from 'svelte-motion';
	import { getContext } from 'svelte';

	import { invariant, isMotionValue } from './utils.svelte';
	import type { ReorderContextProps } from './types';

	type Props<V> = {
		/**
		 * A HTML element to render this component as. Defaults to `"li"`.
		 *
		 * @public
		 */
		as?: keyof SvelteHTMLElements;

		/**
		 * The value in the list that this component represents.
		 *
		 * @public
		 */
		value: V;

		/**
		 * A subset of layout options primarily used to disable layout="size"
		 *
		 * @public
		 * @default true
		 */
		layout?: true | 'position';
	};

	const {
		children,
		value,
		as = 'li',
		layout = true,
		style,
		onDrag,
		class: className,
		...remotion
	} = $props<Props<V> & ForwardMotionProps & { children: Snippet; class?: string }>();

	const context = getContext<ReorderContextProps<V>>('Reorder');
	const point = {
		x: useDefaultMotionValue(style?.x),
		y: useDefaultMotionValue(style?.y),
	};

	const zIndex = $derived(useTransform([point.x, point.y], ([latestX, latestY]) => (latestX || latestY ? 1 : 'unset')));

	invariant(Boolean(context), 'Reorder.Item must be a child of Reorder.Group');

	const { axis, registerItem, updateOrder } = $derived(context);

	function useDefaultMotionValue(value: any, defaultValue: number = 0) {
		return isMotionValue(value) ? value : useMotionValue(defaultValue);
	}
</script>

<Motion
	drag={axis}
	{...remotion}
	style={{ ...style, x: point.x, y: point.y, zIndex }}
	{layout}
	onDrag={(event, gesturePoint) => {
		const { velocity } = gesturePoint;
		velocity[axis] && updateOrder(value, point[axis].get(), velocity[axis]);

		onDrag && onDrag(event, gesturePoint);
	}}
	onLayoutMeasure={(measured) => registerItem(value, measured)}
	dragConstraints={{ top: 0, bottom: 0, left: 0, right: 0 }}
	dragElastic={0.8}
	let:motion={animate}>
	<svelte:element this={as} class={className} use:animate>
		{@render children()}
	</svelte:element>
</Motion>

This is just my own personal opinion but I think it would be a better sell if there were a description added to the readme rather than just linking the react version. It also be clearer to relabel and possibly even reorder your Introduction and Motion tabs to be Getting Started and Introduction respectively. I initially got the impression/made the assumption that the rest of the tabs would be example-less thinking the introduction page was all there was and that the motion page began the breaking down the components themselves, as the third tab's examples weren't visible til I scrolled down. As someone that's already familiar with how to use the native animation features this wasn't really peaking my interest to the point that I wanted to keep going, I only did so because I decided to look it over and offer input and also because I'm slowly piecing together my own general library and was genuinely curious about what this even was (found my way here from a random link that popped up in a discord comment). All that being said, I've yet to try it so don't take any of this to harshly, I'm just giving you my first thoughts as I was looking the page over.

On https://svelte-motion.gradientdescent.de/motionvalue
The scroll example has a box with "100%" inside which should change when the scale of the box changes, but it does not change for me.

On first glance it looks like a simple fix:

<div use:motion>{Math.round(100 * $scrollYProgress)}%</div>
									|
									|
									v
<div use:motion>{Math.round(100 * scrollYProgress)}%</div>

EDIT: 🤦 just realized that dollar sign is the store operator. The problem must be something else

The pan event is having trubble in Google Chrome. I get to drag once then i cant drag again. But when i click outside of the event area it resets. I have no problems in firefox or vivaldi, so this seems to bee a chrome spesific issue. Looks lie chrome is blocking the my code from running.

I have tried my best to figure out the problem but, have so far come up empty.

my code if it is of any help. The event is attatched to the overlay near the bottom
`<script>
import { carousel } from "$src/lib/carousel";
import { isInViewport } from "$src/lib/Animate";
import Hero from './CardCarouelHero.svelte';
import {Motion} from "svelte-motion";
export let data = {};

var carouselHelper = new carousel();
var backgroundColor = JSON.parse(data.properties.backgroundColor.value);

let carouselElement,carouselverlay,filterLeft,filterRight,carouselDiameter,filterWidth;

let cards = [];
let cardMargin = data.properties.cardMargin.value ? data.properties.cardMargin.value  : 180;
let cardWidth = 280;
let totalCardWidth = cardWidth + cardMargin;


let theta =  2 * Math.PI / data.properties.cards.value.length;
let currImage = 10;

//wait for all bindings to compleete
setTimeout(function(){
    carouselDiameter = carouselHelper.getCarouselDiameter(totalCardWidth * cards.length);
    carouselHelper.setCardRotations(cards,totalCardWidth);
    carouselHelper.setFilterColor(filterLeft, filterRight,backgroundColor.colorcode)
    filterWidth = carouselDiameter / 2   + 'px'
    filterLeft.style.width = filterWidth
    filterRight.style.width = filterWidth
    carouselElement.style.transformOrigin = carouselHelper.getTransformOrigin(totalCardWidth , cards.length)
    carouselElement.parentElement.style.perspective = carouselDiameter * 3 + 'px'
    currImage =  cards.length;
    carouselElement.style.transform = '' + carouselHelper.getCarouselRotationInRad(currImage,theta );
  
}, 150)


let hasAnimated = false;
document.addEventListener('scroll', function(){
    if(carouselElement){
        if(isInViewport(carouselElement) && !hasAnimated){
            currImage = cards.length;
            let prevDuration =  carouselElement.style.transitionDuration;
            carouselElement.style.transitionDuration = '5s'
            carouselElement.style.transform = '' + carouselHelper.getCarouselRotationInRad(currImage,theta );
            carouselElement.style.transitionDuration = prevDuration
            hasAnimated = true;
        }
    }
})


const largeswipetreshold = 50;
const smallswipetreshold = 10;
const swipeTimeoutTime = 100;
let isTimedOut = false;

function timeoutCarousel(){
    if(!isTimedOut){
        isTimedOut = true;
        setTimeout(() => isTimedOut = false, swipeTimeoutTime)
    }
}

function handleMotion(e, info){
    if(info.delta.x < -largeswipetreshold){
        swipe('right')
    }else if(info.delta.x > largeswipetreshold){
        swipe('left')
    }else if(info.delta.x < -smallswipetreshold){
        if(!isTimedOut){
            timeoutCarousel()
            swipe('right')
        }
    }else if(info.delta.x > smallswipetreshold){
        if(!isTimedOut){
            timeoutCarousel()
            swipe('left')
        }
    }
    carouselElement.click()
}

function swipe(direction) {
    if (direction === 'right') {
        currImage++;
    }
    else {
        currImage--;
    }
    carouselElement.style.transform = '' + carouselHelper.getCarouselRotationInRad(currImage,theta );
}
function openCard(){
    console.log('asdf')
}

        <div class="container-wide">
            <div class="text-center py-24 container-slim">
                <h2 style="color: var({backgroundColor.contrastcolor.variabelname})">{data.properties.carouselTitle.value}</h2>
                <div style="color: var({backgroundColor.contrastcolor.variabelname})" class="big-text">
                    {data.properties.carouselIntro.value}
                </div>
            </div>
            
            <div class="carousel-container">
            

                <div class="carousel" bind:this={carouselElement}>
                    {#each data.properties.cards.value as card, index}
                       <div class="carousel-card-container" bind:this={cards[index]} on:click{openCard}>
                        <div class="carousel-card-inner">
                            <div class="carousel-card" style="background-color: var({backgroundColor.variablename})">
                                <img src="{apiUrl + card.properties.image.value.crops['4:5']}"> 
                                <div class="carousel-card-content">
                                    <h3>{card.properties.topText.value}</h3>
                                    <h3>{card.properties.bottomText.value}</h3>
                                </div>
                                <div class="carousel-card-filter"></div>
                            </div>
                        </div>
                       </div>
                    {/each}    
                </div>
            </div>
        </div>
        <div class="carousel-filter" bind:this={carouselverlay}>
            <Motion onPan={handleMotion} let:motion>
                <div class="carousel-filter-container" use:motion >
                    <div class="carousel-filter-left"   bind:this={filterLeft}  ></div>
                    <div class="carousel-filter-right"  bind:this={filterRight} ></div>
                </div>
            </Motion>
   
        </div>


</div>

I would post an error log, but it appears to fail silently -- both during build and at runtime. All animations / whileTap events work properly when served with hot reload (npm run dev), but stop working as soon as it's served statically using npm run build && npm run start or npx http-server. I'm using a standard rollup, svelte-spa-router setup. I'm confused, seeing as I imagine npm run dev performs the same build process as a static build, only that it's being served on-demand. Any pointers on how to debug this?

is useInView hook in this repo, cant seem to find it but may be looking poorly

Hi, how would I animate something on unmount ? It seems I don't quite understand the AnimatePresence

My code

<AnimatePresence show={true}>
    {#if test}
        <Motion
            let:motion
            initial={{
                opacity: 0,
            }}
            animate={{
                opacity: 1,
            }}
            exit={{
                opacity: 0,
            }}
            transition={{
                duration: 1.3,
            }}
        >
            <div use:motion class="rounded-full px-4 py-1 text-xs font-semibold {$queueInfo.pending > 400 ? 'bg-red-600' : $queueInfo.pending > 100 ? 'bg-amber-600' : 'bg-lime-600'}">
                Current queue {$queueInfo.pending}
            </div>
        </Motion>
    {/if}
</AnimatePresence>

if test is true, it fades in as expected, but when test is set to false it just disappears without playing the exit animation

Would you help me out please ?

EDIT: I can't read - I should be toggling the show property on AnimatePresence

I'm trying to build my sveltekit app and it's failing locally and on netlify with the following errors related to svelte-motion:

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-netlify
 > .svelte-kit/output/server/chunks/__layout-1e3255ca.js:10:7: warning: Ignoring this import because "node_modules/popmotion/dist/es/index.js" was marked as having no side effects
    10 │ import "popmotion";
       ╵        ~~~~~~~~~~~
   node_modules/popmotion/package.json:17:4: note: "sideEffects" is false in the enclosing "package.json" file
    17 │     "sideEffects": false,
       ╵     ~~~~~~~~~~~~~

 > .svelte-kit/output/server/chunks/__layout-1e3255ca.js:11:7: warning: Ignoring this import because "node_modules/style-value-types/dist/es/index.js" was marked as having no side effects
    11 │ import "style-value-types";
       ╵        ~~~~~~~~~~~~~~~~~~~
   node_modules/style-value-types/package.json:18:2: note: "sideEffects" is false in the enclosing "package.json" file
    18 │   "sideEffects": false,
       ╵   ~~~~~~~~~~~~~

 > .svelte-kit/output/server/chunks/index-f5a6e348.js:64:7: warning: Ignoring this import because "node_modules/popmotion/dist/es/index.js" was marked as having no side effects
    64 │ import "popmotion";
       ╵        ~~~~~~~~~~~
   node_modules/popmotion/package.json:17:4: note: "sideEffects" is false in the enclosing "package.json" file
    17 │     "sideEffects": false,
       ╵     ~~~~~~~~~~~~~

 > .svelte-kit/output/server/chunks/index-f5a6e348.js:65:7: warning: Ignoring this import because "node_modules/style-value-types/dist/es/index.js" was marked as having no side effects
    65 │ import "style-value-types";
       ╵        ~~~~~~~~~~~~~~~~~~~
   node_modules/style-value-types/package.json:18:2: note: "sideEffects" is false in the enclosing "package.json" file
    18 │   "sideEffects": false,
       ╵   ~~~~~~~~~~~~~

 > .svelte-kit/output/server/chunks/index-9e379867.js:34:7: warning: Ignoring this import because "node_modules/popmotion/dist/es/index.js" was marked as having no side effects
    34 │ import "popmotion";
       ╵        ~~~~~~~~~~~
   node_modules/popmotion/package.json:17:4: note: "sideEffects" is false in the enclosing "package.json" file
    17 │     "sideEffects": false,
       ╵     ~~~~~~~~~~~~~

 > .svelte-kit/output/server/chunks/index-9e379867.js:35:7: warning: Ignoring this import because "node_modules/style-value-types/dist/es/index.js" was marked as having no side effects
    35 │ import "style-value-types";
       ╵        ~~~~~~~~~~~~~~~~~~~
   node_modules/style-value-types/package.json:18:2: note: "sideEffects" is false in the enclosing "package.json" file
    18 │   "sideEffects": false,
       ╵   ~~~~~~~~~~~~~

 > .svelte-kit/output/server/chunks/index-1863fd49.js:65:7: warning: Ignoring this import because "node_modules/popmotion/dist/es/index.js" was marked as having no side effects
    65 │ import "popmotion";
       ╵        ~~~~~~~~~~~
   node_modules/popmotion/package.json:17:4: note: "sideEffects" is false in the enclosing "package.json" file
    17 │     "sideEffects": false,
       ╵     ~~~~~~~~~~~~~

 > .svelte-kit/output/server/chunks/index-1863fd49.js:66:7: warning: Ignoring this import because "node_modules/style-value-types/dist/es/index.js" was marked as having no side effects
    66 │ import "style-value-types";
       ╵        ~~~~~~~~~~~~~~~~~~~
   node_modules/style-value-types/package.json:18:2: note: "sideEffects" is false in the enclosing "package.json" file
    18 │   "sideEffects": false,
       ╵   ~~~~~~~~~~~~~

file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/.svelte-kit/output/server/chunks/MotionSSR-5f759e16.js:6
import { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } from "style-value-types";
                                     ^^^^^
SyntaxError: Named export 'alpha' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'style-value-types';
const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:121:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:171:5)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async Object.load_component (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/.svelte-kit/output/server/chunks/app-33a853a6.js:531:13)
    at async Promise.all (index 0)
    at async respond$1 (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/ssr.js:1211:11)
    at async render_page (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/ssr.js:1454:19)
    at async resolve (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/ssr.js:1717:10)
    at async respond (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/ssr.js:1696:10)
    at async visit (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/chunks/index4.js:167:20)
SyntaxError: Named export 'alpha' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'style-value-types';
const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg;

> 500 /
Error: 500 /
    at file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/chunks/index4.js:86:11
    at visit (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/chunks/index4.js:222:5)
    at async prerender (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/chunks/index4.js:303:6)
    at async Object.prerender (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/chunks/index4.js:368:4)
    at async adapt (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/adapter-netlify/index.js:48:4)
    at async adapt (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/chunks/index4.js:393:2)
    at async file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/@sveltejs/kit/dist/cli.js:896:5

...I'm trying to figure out what's going on but really have no idea at the moment...

Hello Michael,

I absolutely love Svelte-Motion but can't get it to run on Vercel nor Netlify. Should I try LiteSpeed? I really would like to stick with Vercel though.

I think we need to update style-value-types, popmotion, framesync with the below but have no idea how to that.

 "exports": {
    ...
    "./package.json": "./package.json"
  },

Ref: niieani/hashids.js@425877d

Thank you so much!
RR

VERCEL

18:50:34.979 | vite v2.6.3 building SSR bundle for production...
18:50:35.311 | transforming...
18:50:36.817 | 1:50:36 AM [vite-plugin-svelte] The following packages did not export their package.json file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.
18:50:36.817 | - style-value-types
18:50:36.818 | - popmotion
18:50:36.818 | - framesync
18:50:36.818 | ✓ 171 modules transformed.
18:50:36.936 | rendering chunks...
18:50:36.937 | .svelte-kit/output/server/app.js 221.74 KiB
18:50:36.940 | vite v2.6.3 building for production...
18:50:36.949 | transforming...
18:50:36.954 | ✓ 2 modules transformed.
18:50:36.958 | rendering chunks...
18:50:36.960 | .svelte-kit/output/client/service-worker.js 2.17 KiB / gzip: 0.90 KiB
18:50:36.962 | Run npm run preview to preview your production build locally.
18:50:36.969 | > Using @sveltejs/adapter-vercel
18:50:36.969 | Generating serverless function...
18:50:37.253 | Prerendering static pages...
18:50:37.291 | > Named export 'px' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports.
18:50:37.291 | CommonJS modules can always be imported via the default export, for example using:
18:50:37.292 | import pkg from 'style-value-types';
18:50:37.292 | const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg;
18:50:37.292 | file:///vercel/path0/.svelte-kit/output/server/app.js:25
18:50:37.292 | import { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } from "style-value-types";
18:50:37.293 | ^^
18:50:37.293 | SyntaxError: Named export 'px' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports.
18:50:37.293 | CommonJS modules can always be imported via the default export, for example using:
18:50:37.293 | import pkg from 'style-value-types';
18:50:37.293 | const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg;
18:50:37.293 | at ModuleJob._instantiate (internal/modules/esm/module_job.js:124:21)
18:50:37.293 | at async ModuleJob.run (internal/modules/esm/module_job.js:179:5)
18:50:37.293 | at async Loader.import (internal/modules/esm/loader.js:178:24)
18:50:37.294 | at async prerender (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index5.js:120:14)
18:50:37.294 | at async Object.prerender (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index5.js:351:4)
18:50:37.294 | at async adapt (file:///vercel/path0/node_modules/@sveltejs/adapter-vercel/index.js:51:4)
18:50:37.294 | at async adapt (file:///vercel/path0/node_modules/@sveltejs/kit/dist/chunks/index5.js:376:2)
18:50:37.294 | at async file:///vercel/path0/node_modules/@sveltejs/kit/dist/cli.js:1012:5
18:50:37.322 | error Command failed with exit code 1.
18:50:37.322 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
18:50:37.343 | Error: Command "yarn run build" exited with 1

NETLIFY

11:39:05 PM: 6:39:05 AM [vite-plugin-svelte] The following packages did not export their package.json file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.
11:39:05 PM: - framesync
11:39:05 PM: - popmotion
11:39:05 PM: - style-value-types
11:39:05 PM: ✓ 179 modules transformed.
11:39:05 PM: rendering chunks...
11:39:05 PM: .svelte-kit/output/server/app.js 247.52 KiB
11:39:05 PM: vite v2.6.3 building for production...
11:39:05 PM: transforming...
11:39:05 PM: ✓ 2 modules transformed.
11:39:05 PM: rendering chunks...
11:39:05 PM: .svelte-kit/output/client/service-worker.js 2.17 KiB / gzip: 0.89 KiB
11:39:05 PM: Run npm run preview to preview your production build locally.
11:39:05 PM:
11:39:05 PM: > Using @sveltejs/adapter-netlify
11:39:05 PM: No netlify.toml found. Using default publish directory. Consult https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify#configuration for more details
11:39:05 PM: Publishing to "build"
11:39:05 PM: Generating serverless function...
11:39:06 PM: Prerendering static pages...
11:39:06 PM: > Named export 'alpha' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports.
11:39:06 PM: CommonJS modules can always be imported via the default export, for example using:
11:39:06 PM: import pkg from 'style-value-types';
11:39:06 PM: const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg;
11:39:06 PM:
11:39:06 PM: file:///opt/build/repo/.svelte-kit/output/server/app.js:25
11:39:06 PM: import { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } from "style-value-types";
11:39:06 PM: ^^^^^
11:39:06 PM: SyntaxError: Named export 'alpha' not found. The requested module 'style-value-types' is a CommonJS module, which may not support all module.exports as named exports.
11:39:06 PM: CommonJS modules can always be imported via the default export, for example using:
11:39:06 PM: import pkg from 'style-value-types';
11:39:06 PM: const { number, px, degrees, scale, alpha, progressPercentage, complex, color, filter, percent, vw, vh } = pkg;
11:39:06 PM: at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
11:39:06 PM: at async ModuleJob.run (node:internal/modules/esm/module_job:179:5)
11:39:06 PM: at async Loader.import (node:internal/modules/esm/loader:178:24)
11:39:06 PM: at async prerender (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index5.js:120:14)
11:39:06 PM: at async Object.prerender (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index5.js:351:4)
11:39:06 PM: at async adapt (file:///opt/build/repo/node_modules/@sveltejs/adapter-netlify/index.js:48:4)
11:39:06 PM: at async adapt (file:///opt/build/repo/node_modules/@sveltejs/kit/dist/chunks/index5.js:376:2)
11:39:06 PM: at async file:///opt/build/repo/node_modules/@sveltejs/kit/dist/cli.js:1012:5

to the latest kit and vite (1.0.0-next.581 for kit and 4.0.0 for vite) and getting the following breaking error:

Cannot read properties of undefined (reading '__assign')
TypeError: Cannot read properties of undefined (reading '__assign')
    at /node_modules/svelte-motion/node_modules/popmotion/node_modules/style-value-types/dist/es/numbers/index.js:9:12
    at async instantiateModule (file:///Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/vite/dist/node/chunks/dep-ed9cb113.js:53246:9)

...dunno what's going on, but site updates are out of commission until this can be resolved.

With svelte svg M.[element] is not rendered at all and Motion use directive doesn't work with svgs

Got this in the terminal while using svelte-motion:

▲ [WARNING] "svelte" is not a valid value for the "type" field [package.json]

    node_modules/svelte-motion/package.json:34:10:
      34 │   "type": "svelte",
         ╵           ~~~~~~~~

  The "type" field must be set to either "commonjs" or "module".

...I looked at the package.json and it indeed says svelte for the type...is that what is supposed to be done?

Hi there again :-)

Working on a REPL using the library svelte-motion and I'm running into a bit of a head scratcher for me...

I'm making a settings menu that expands from the gear icon and everything is great until I close it again...that is when the content inside the menu gets...strange...The text in the menu should scale up and down with the menu, but when it scales down again the text gets really big before it scales down....

Just click the gear Icon once to open and the text will scale up smoothly, then click it again to watch the text suddenly get massive, then scale down...

...I don't want the 'gets massive part'...

https://svelte.dev/repl/e3dfacd32e1148c5808417aa27cc51e2?version=3.38.2

I'm currently using animate-css-grid the library to animate position changes on a grid in a svelte/kit app... could this library potentially do the same? And thank you for making this :-)

@micha-lmxt would you accept a PR that upgrades the project to using typescript?

I'm trying to use svelte-motion in sveltekit using the latest version (201 at the time of this issue) and the whole thing won't run in dev mode due to svelte-motion not working properly with the following errors:

rchrdnsh@RN RYKR-kit % npm run dev

> [email protected] dev
> svelte-kit dev

(node:44531) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
> The following dependencies are imported but could not be resolved:

  @emotion/is-prop-valid (imported by /Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/svelte-motion/src/render/dom/utils/filter-props.js)

Are they installed?
Error: The following dependencies are imported but could not be resolved:

  @emotion/is-prop-valid (imported by /Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/svelte-motion/src/render/dom/utils/filter-props.js)

Are they installed?
    at optimizeDeps (/Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/vite/dist/node/chunks/dep-7e125991.js:63749:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOptimize (/Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/vite/dist/node/chunks/dep-7e125991.js:67764:48)
    at async Server.httpServer.listen (/Users/rchrdnsh/Code/Svelte/RYKR-kit/node_modules/vite/dist/node/chunks/dep-7e125991.js:67780:21)
9:29:08 AM [vite-plugin-svelte] The following packages did not export their `package.json` file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.
- style-value-types
- popmotion
- framesync

...so now I'm completely dead in the water with sveltekit app development until this is fixed or...i delete svelte-motion entirely from the codebase, I guess...which I would rather not do, of course :-)

Any idea what is going on and how to fix it?

Hi! XD

Made a REPL animating grid-row on 3 elements...

https://svelte.dev/repl/41f41bce444c4c52b771ba66d7043c19?version=3.48

...and it works pretty well, except that when the animation is occurring I notice that the elements exhibit a subtle shift in width by maybe 1 or 2 pixels, then return to their original width again...

...it also seems as if the border-radius gets a little malformed as well, like it's gets elongated or something...

...it's small, but a little annoying...I wonder if there is anything that can be done, or if I am doing something incorrect...

Thank you!

Page transitions in react

Following this tutorial, I was able to create page transitions for a React/Next application. which resulted in the following _app.tsx:

function MyApp({ Component, pageProps, router }: AppProps) {
  return (
    <AnimatePresence exitBeforeEnter initial={false}>
      <Component {...pageProps} key={router.route} />
    </AnimatePresence>
  );
}

with pages that have Motion.div children with an initial, animate and exit prop.
note: If I understand correctly, the key prop on the component informs AnimatePresence about child changes

Porting this to svelte with svelte-motion

I've tried to duplicate this effect with Svelte-Motion, but AnimatePrescence never seems to wait on an exit animation.
To test this, i've created a simple, barebones application that has a layout, an index route and a test-page route.

routes/__layout.svelte:

<script>
  import AnimatePresence from 'svelte-motion/src/components/AnimatePresence/AnimatePresence.svelte';
  import { page } from '$app/stores';
</script>

<AnimatePresence exitBeforeEnter list={[$page.url.href]}>
  <slot />
</AnimatePresence>

based on the docs, and the few examples I found, I understood that I had to add the key to the AnimatePresence's list prop that would mimick Reacts key prop on the component and notify AnimatePresence that the children have been changed.

routes/index.svelte

<script>
  import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';
</script>

<Motion
  let:motion
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.2 }}
>
  <div use:motion>
    <a href="/test-page">
      <h1>first page</h1>
    </a>
  </div>
</Motion>

routes/test-page.svelte

<script>
  import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';
</script>

<Motion
  let:motion
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.2 }}
>
  <div use:motion>
    <a href="/">
      <h1>second page</h1>
    </a>
  </div>
</Motion>

The expected behaviour is that an exit animation is played after navigating to a different page. Unfortunately, this does not happen. No exit animation is played nor awaited, and the page that's navigated to is displayed instantenously. It does play a start animation on load on both pages.
Am I coding this wrong? or have I possibly found a bug.

{
  "svelte-motion": "^0.11.2",
  "svelte": "^3.44.0",
  "@sveltejs/kit": "next",
}

I'm having problem for using AnimatePresence with multiple elements and delay...

Example here :

https://svelte.dev/repl/b66d0893bb4d4e9da47cd1ea29cacef1?version=3.38.2

Animate with "turn" button working very well.
But with add button (add element in the list), it seem exit variant is not triggering : all elements disappears without transition I define in variant.

Sure it may be silly thing but hurting my brain :-/

It would be great to have a changelog to see how the project is progressing.

If it's not, I would love to take it over.

Currently I have a component that has all of this copy+pasted:
https://svelte.dev/repl/b75f171a22f941689eac8b4e5e4b4e54?version=3.38.2

only things I changed were the imports:

  import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';
  import { useTransform } from 'svelte-motion/src/value/use-transform.js';
  import { useMotionValue } from 'svelte-motion/src/value/use-motion-value.js';

Then in SvelteKit, in a route, I import that component and try to render it.

<script>
  import UseMotionValueExample from '$lib/components/motion/UseMotionValueExample.svelte';
</script>

<UseMotionValueExample />

When I do, it results in this error:

Uncaught (in promise) Error: Function called outside component initialization
    at get_current_component (index.mjs:649)
    at onDestroy (index.mjs:662)
    at useCombineMotionValues (use-combine-values.js:26)
    at useTransform (use-transform.js:37)
    at instance (UseMotionValueExample.svelte:9)
    at init (index.mjs?v=96fea512:1485)
    at new UseMotionValueExample (UseMotionValueExample.svelte:17)

Any suggestions?

The library seems to work fine for other examples, but the useX ones don't work (note I only tried useAnimation() as well: https://svelte.dev/repl/1acf84b1db8f4eb38512fc05da8b42c6?version=3.38.2)

I have a code that will start the transition once the variable value change. Because I am just changing the value of the index, instead of using an array, I have no idea what it should look like for the list prop.

{#key index}
	<AnimatePresence list={} let:item>  <-- here
		<Motion
		variants={moveUp} 
		initial="hidden"
		animate="visible"
		exit="exit"
		let:motion>
		<span use:motion class="second-line index-number">{index}</span>
	</Motion>
	</AnimatePresence>
{/key}

The code above is equivalent to the code below.

{#key index}
	<span in:fly={{ y: 200 }} out:fly={{ y: -200 }} class="second-line index-number">{index}</span>
{/key}

The reason that I am not using fly is that it is a little buggy and it will somehow change my grid and flex layout

Hello, thank you for your library! I look forward to using it.

There is a slight typo on https://svelte-motion.gradientdescent.de/motion

<M.div>A big motion header</M.h1>

This should be
<M.div>A big motion header</M.div>

This causes a slight obstacle.

Thank you so much for building this library!

So, I forked the library (first time ever forking anything :-) to try and help, but it's quite hard for me to understand what's going on...the first thing I've been trying to figure out is where framer-motion ends and svelte-motion begins...I noticed that tslib is not used in framer-motion, and seems to be the origin of the current issue...so why are you using tslib, and is it necessary? Can I do what's in the latest framer-motion instead? Looks like spread operators and such...all typescript as well...

Information in style tags doesn't get passed through to the final div...

For example. In my case, I am trying to pass in a style attribute, but it doesn't get applied directly to the final element.

<MotionDiv
          key={index}
          class="absolute w-full pb-4"
          animate={$activeTab === index ? 'visible' : 'hidden'}
          transition={fastOpacityTransition}
          variants={contentVariants}
          style="display: {$activeTab === index ? 'block' : 'none'}"
        >
          <svelte:component this={content} />
        </MotionDiv>

Any time component hot reloads the onUpdate/exit breaks when playing the exit animation with AnimatePresence show={false} because the onUpdate is called only once, skipping to the end (it should transition for example the --var-clipping-progress from 1 to 0 but it fires only once with value of 0.13710664079394916)

My snippet

<AnimatePresence show={!loading}>
  <Motion
      let:motion
      initial={{
          "--var-clipping-progress": 1.0,
          scaleX: .1,
          scaleY: 1.4,
          y: "150%",
      }}
      animate={{
          "--var-clipping-progress": 0.0,
          scaleX: 1.0,
          scaleY: 1.0,
          y: "0%",
      }}
      exit={{
          "--var-clipping-progress": 1.0,
          scaleX: .1,
          scaleY: 1.4,
          y: "150%",
      }}
      transition={{
          "--var-clipping-progress": {
              duration: .35,
              ease: [0.33, 1, 0.68, 1],
          },
          scaleX: {
              //delay: .1,
              duration: .6,
              ease: [0.33, 1, 0.68, 1],
          },
          scaleY: {
              //delay: .3,
              duration: .45,
              ease: [0.25, 1, 0.5, 1],
          },
          y: {
              //delay: .15,
              duration: .6,
              ease: [0.83, 0, 0.17, 1],
          },
      }}
      onUpdate={handleClippingAnimation}
  >
      <div bind:this={pageContainerRef} use:motion class="flex flex-1 rounded-[45px] bg-neutral-900" style='clip-path: path("{clippingShape}")'>
      </div>
  </Motion>
</AnimatePresence>

Hi. Trying to get the value returned from useTransorm but the current value that is returned stays the same.
But the div that is reading the color value is however updating.. Am I doing anything wrong here?

    const y = useMotionValue(0);
    const yInput = [-20, -0.1, 0, 0.1, 20];
    let background = useTransform(y, yInput, [
        "#FF0000",
        "#00FF00",
        "#202224",
        "#00FF00",
        "#0000FF",
    ]);

    $: console.log("Background:", background) //this line outputs each change but not the change in the value. 


  **** unimportant lines ****

<Motion
    drag={dragEnabled}
    dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }}
    dragElastic={{ top: 0.1, left: 0.1, right: 0.1, bottom: 0.1 }}
    onDragEnd={dragEnd}
    onPanEnd={panEnd}
    onDrag={onDrag}
    dragDirectionLock={true}
    style={{ y, background }}
    let:motion
>

*div*

</Motion>

Doesn't show component without show prop unlike framer motion react component.
Also getting type errors that AnimatePresence is a type and not sveltecomponent.

The idea and this repository seems very promising.
I just realised the last commit is more than thee month away.
I would like to contribute. But if this repo is not maintained by the owner anymore, in this case investing my time and work would not make sense. Also using the package in the svelte installation without future updates would be a risk.

Thanks for any reply.