simon/floter.design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgrade gsap, svelte, sveltekit

Browse source
This commit is contained in:
saiminh 2026-01-07 19:58:41 +13:00
parent 55a2b7332c
commit 66237ef066
25 changed files with 1493 additions and 1011 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
.eslintrc.cjs
View file

@ -24,6 +24,18 @@ module.exports = {
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
},
globals: {
"$props": "readonly",
"$state": "readonly",
"$derived": "readonly",
"$effect": "readonly",
"$bindable": "readonly"
},
rules: {
"no-undef": "off",
"@typescript-eslint/no-unused-vars": "off",
"no-unused-vars": "off"
}
}
],

3
.npmrc
View file

@ -1,3 +0,0 @@
always-auth=true
//npm.greensock.com/:_authToken=${GSAP_TOKEN}
@gsap:registry=https://npm.greensock.com

2321
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

25
package.json
View file

@ -12,31 +12,36 @@
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-netlify": "^2.0.8",
"@sveltejs/adapter-node": "^1.3.1",
"@sveltejs/kit": "^1.20.4",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-netlify": "^5.0.0",
"@sveltejs/adapter-node": "^5.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^5.1.1",
"@types/node": "^20.5.1",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"prettier": "^3.0.0",
"prettier-plugin-svelte": "^3.0.0",
"sass": "^1.64.2",
"sharp": "^0.32.5",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"svelte-preprocess": "^6.0.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vanilla-lazyload": "^17.8.4",
"vite": "^4.4.2"
"vite": "^6.0.0"
},
"type": "module",
"dependencies": {
"@pixi/core": "^7.4.3",
"@pixi/filter-alpha": "^7.4.3",
"@pixi/filter-blur": "^7.4.3",
"@pixi/unsafe-eval": "^7.1.3",
"gsap": "npm:@gsap/shockingly@^3.12.2",
"gsap": "^3.13.0",
"mdsvex": "^0.11.0",
"pixi-filters": "^5.2.1",
"pixi.js": "^7.2.4",

9
src/ambient.d.ts vendored
View file

@ -2,4 +2,11 @@
declare module '$lib/assets/*' {
const meta
export default meta
}
}
// Svelte 5 runes - compiler macros
declare const $props: <T = {}>() => T;
declare const $state: <T>(initial: T) => T;
declare const $derived: <T>(fn: () => T) => T;
declare const $effect: (fn: () => void | (() => void)) => void;
declare const $bindable: <T>(initial?: T) => T;

18
src/lib/components/ContactCanvas.svelte
View file

@ -1,18 +1,24 @@
<script lang="ts">
import '$lib/utils/pixiInit'; // Initialize PixiJS settings before importing filters
import * as PIXI from 'pixi.js';
import { BulgePinchFilter, TwistFilter } from 'pixi-filters';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import SplitText from 'gsap/dist/SplitText';
import { PixiPlugin } from "gsap/dist/PixiPlugin";
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { SplitText } from 'gsap/SplitText';
import { PixiPlugin } from "gsap/PixiPlugin";
import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
import createCanvasText from '$lib/utils/createCanvasText';
import createCanvasImg from '$lib/utils/createCanvasImg';
import { tick } from 'svelte';
export let textsToCanvas: Array<HTMLElement> = [];
export let imgsToCanvas: Array<HTMLElement> = [];
let {
textsToCanvas = [],
imgsToCanvas = []
}: {
textsToCanvas?: Array<HTMLElement>;
imgsToCanvas?: Array<HTMLElement>;
} = $props();
let app: PIXI.Application;
let canvas: HTMLCanvasElement;
@ -41,8 +47,6 @@ onMount(()=>{
backgroundAlpha: 0,
view: canvas,
});
PIXI.Filter.defaultResolution = 2;
//for debugging but Typescript has an issue with this:
(globalThis as any).__PIXI_APP__ = app;

5
src/lib/components/Faq.svelte
View file

@ -1,7 +1,8 @@
<script lang="ts">
import { onMount } from "svelte";
import gsap from "gsap";
export let summary: string;
import type { Snippet } from 'svelte';
let { summary, children }: { summary: string, children: Snippet } = $props();
let details: HTMLElement;
let contentHeight: number;
let summaryHeight: number;
@ -65,7 +66,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<summary on:click={summaryClickHandler} on:keyup={summaryClickHandler}>{@html summary}</summary>
<div class="faq-content">
<slot />
{@render children()}
</div>
</details>

18
src/lib/components/HomeCanvas.svelte
View file

@ -1,18 +1,24 @@
<script lang="ts">
import '$lib/utils/pixiInit'; // Initialize PixiJS settings before importing filters
import * as PIXI from 'pixi.js';
import { BulgePinchFilter } from 'pixi-filters';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import SplitText from 'gsap/dist/SplitText';
import { PixiPlugin } from "gsap/dist/PixiPlugin";
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { SplitText } from 'gsap/SplitText';
import { PixiPlugin } from "gsap/PixiPlugin";
import { browser } from '$app/environment';
import createCanvasText from '$lib/utils/createCanvasText';
import createCanvasImg from '$lib/utils/createCanvasImg';
import { onMount, onDestroy } from 'svelte';
import { tick } from 'svelte';
export let textsToCanvas: Array<HTMLElement> = [];
export let imgsToCanvas: Array<HTMLElement> = [];
let {
textsToCanvas = [],
imgsToCanvas = []
}: {
textsToCanvas?: Array<HTMLElement>;
imgsToCanvas?: Array<HTMLElement>;
} = $props();
let app: PIXI.Application;
let canvas: HTMLCanvasElement;
@ -41,8 +47,6 @@ onMount(()=>{
view: canvas
});
PIXI.Filter.defaultResolution = 2;
//for debugging but Typescript has an issue with this:
(globalThis as any).__PIXI_APP__ = app;

2
src/lib/components/HomeIlluDev.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
onMount(() => {

4
src/lib/components/HomeIlluShapes.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import HomeIlluShape from "./HomeIlluShape.svelte";
import gsap from "gsap";
import MorphSVGPlugin from "gsap/dist/MorphSVGPlugin";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { onMount } from "svelte";
onMount( () => {

4
src/lib/components/SmoothScroll.svelte
View file

@ -1,8 +1,8 @@
<script lang='ts'>
import { onMount } from "svelte";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { ScrollSmoother } from "gsap/dist/ScrollSmoother";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { ScrollSmoother } from "gsap/ScrollSmoother";
let smoother: ScrollSmoother;
onMount( () => {

23
src/lib/components/WorkCanvas.svelte
View file

@ -1,19 +1,26 @@
<script lang="ts">
import '$lib/utils/pixiInit'; // Initialize PixiJS settings before importing filters
import * as PIXI from 'pixi.js';
import { BulgePinchFilter } from 'pixi-filters';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import SplitText from 'gsap/dist/SplitText';
import { PixiPlugin } from "gsap/dist/PixiPlugin";
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { SplitText } from 'gsap/SplitText';
import { PixiPlugin } from "gsap/PixiPlugin";
import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
import createCanvasText from '$lib/utils/createCanvasText';
import createCanvasImg from '$lib/utils/createCanvasImg';
import { tick } from 'svelte';
export let textsToCanvas: Array<HTMLElement> = [];
export let imgsToCanvas: Array<HTMLElement> = [];
export let bulgeFactor: number = 0.15; // comes from attribute
let {
textsToCanvas = [],
imgsToCanvas = [],
bulgeFactor = 0.15
}: {
textsToCanvas?: Array<HTMLElement>;
imgsToCanvas?: Array<HTMLElement>;
bulgeFactor?: number;
} = $props();
let app: PIXI.Application;
let canvas: HTMLCanvasElement;
@ -78,10 +85,8 @@ onMount( () => {
bulgefilter.strength = is_landscape ? bulgeFactor : bulgeFactor * 1.25;
bulgefilter.center = center;
// bulgefilter.resolution = 2;
PIXI.Filter.defaultResolution = 2;
app.stage.filters = [bulgefilter];
app.stage.filters = [(bulgefilter as unknown as PIXI.Filter)];
/*----------------------------------

11
src/lib/utils/pixiInit.ts Normal file
View file

@ -0,0 +1,11 @@
/**
* Initialize PixiJS settings before importing any filter packages.
* This prevents deprecation warnings from filter packages that check
* settings.FILTER_RESOLUTION during module load.
*/
import * as PIXI from 'pixi.js';
// Set default resolution early to avoid deprecation warnings
// from filter packages that use the deprecated settings.FILTER_RESOLUTION
PIXI.Filter.defaultResolution = 2;

8
src/routes/+layout.svelte
View file

@ -3,7 +3,11 @@
import Header from '$lib/components/Header.svelte';
import Loader from '$lib/components/Loader.svelte';
import { navigating, page } from '$app/stores';
export let data;
import type { Snippet } from 'svelte';
interface LayoutData {
pathname: string;
}
let { data, children }: { data: LayoutData, children: Snippet } = $props();
</script>
<svelte:head>
@ -21,6 +25,6 @@
{#if $navigating}
<Loader />
{/if}
<slot />
{@render children()}
</div>
{/key}

6
src/routes/+page.svelte
View file

@ -3,10 +3,10 @@
import Loader from '$lib/components/Loader.svelte';
import { onMount } from 'svelte';
import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import ScrollToPlugin from 'gsap/dist/ScrollToPlugin';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
import { goto } from '$app/navigation';
import SplitText from 'gsap/dist/SplitText';
import { SplitText } from 'gsap/SplitText';
import HomeIlluDev from '$lib/components/HomeIlluDev.svelte';
import HomeIlluShapes from '$lib/components/HomeIlluShapes.svelte';

4
src/routes/contact/+page.svelte
View file

@ -2,8 +2,8 @@
import { onMount } from 'svelte';
import ContactCanvas from '$lib/components/ContactCanvas.svelte';
import gsap from 'gsap';
import SplitText from 'gsap/dist/SplitText';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import { SplitText } from 'gsap/SplitText';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
let canvasTexts: Array<HTMLElement> = [];
let contactFormVisible = false;

6
src/routes/service/+page.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts">
import { onMount } from 'svelte';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import SplitText from 'gsap/dist/SplitText';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { SplitText } from 'gsap/SplitText';
import Faq from '$lib/components/Faq.svelte';
import ServiceCanvas from './ServiceCanvas.svelte';
import ScrollToPlugin from 'gsap/dist/ScrollToPlugin';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
onMount( () => {

3
src/routes/service/ServiceCanvas.svelte
View file

@ -1,8 +1,9 @@
<script lang="ts">
import '$lib/utils/pixiInit'; // Initialize PixiJS settings before importing filters
import * as PIXI from 'pixi.js';
import { BulgePinchFilter } from 'pixi-filters';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { onMount } from 'svelte';
let canvas: HTMLCanvasElement;

4
src/routes/work/+page.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import { onMount } from 'svelte';
import gsap from 'gsap';
import SplitText from 'gsap/dist/SplitText';
export let data;
import { SplitText } from 'gsap/SplitText';
let { data } = $props();
const orderedPosts = data.posts.sort((a, b) => {
return a.meta.order - b.meta.order;

4
src/routes/work/[slug]/+page.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import { onMount } from 'svelte';
import { gsap } from 'gsap';
import ScrollToPlugin from 'gsap/dist/ScrollToPlugin';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
import { CldImage } from 'svelte-cloudinary';
export let data;
let { data } = $props();
let visible = false;

2
src/routes/work/[slug]/old+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { CldImage } from 'svelte-cloudinary';
export let data;

2
src/routes/work/workUtils.ts
View file

@ -1,6 +1,6 @@
import { goto } from '$app/navigation';
import gsap from 'gsap';
import SplitText from 'gsap/dist/SplitText';
import { SplitText } from 'gsap/SplitText';
import { workbulge } from '$lib/utils/stores';
const bulge = {factor: 0};

BIN
static/favicon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

2
svelte.config.js
View file

@ -1,7 +1,6 @@
// import adapter from '@sveltejs/adapter-auto';
// import adapter from '@sveltejs/adapter-node';
import adapter from '@sveltejs/adapter-netlify';
import { vitePreprocess } from '@sveltejs/kit/vite';
import preprocess from 'svelte-preprocess';
import { mdsvex } from 'mdsvex'
@ -11,7 +10,6 @@ const config = {
// for more information about preprocessors
preprocess: [
preprocess(),
vitePreprocess(),
mdsvex({
extensions: ['.md']
})

8
tsconfig.json
View file

@ -8,10 +8,16 @@
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
"strict": true,
"verbatimModuleSyntax": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
//
// Note: The linter may report errors about deprecated options (importsNotUsedAsValues, preserveValueImports)
// in the extended .svelte-kit/tsconfig.json. These are from SvelteKit's generated config and will be
// fixed when SvelteKit updates their generated tsconfig.json. The verbatimModuleSyntax option above
// provides the modern replacement for these deprecated options.
}