Giter Club home page Giter Club logo

bim-ba.github.io's People

Contributors

bim-ba avatar

Watchers

avatar

bim-ba.github.io's Issues

this can be optimized

anime on every call creates a new anime instance.

we can create an anime instace with necessary animation before hover method

but this will require some extra checks like component is mounted

const hover = (state: boolean) => {

bim-ba.github.io/src/components/pages/main/FooterCoordinates.vue

Line 55 in 60ee111

// TODO: this can be optimized 

};

// hovering
//
// TODO: this can be optimized
// `anime` on every call creates a new anime instance.
// we can create an anime instace with necessary animation before hover method
// but this will require some extra checks like component is mounted
//
const hover = (state: boolean) => {
  revealLocation.value = state;
  state
    ? anime({ targets: footerCoordinatesRef.value, ...slightlyScale(1.15) })
    : anime({ targets: footerCoordinatesRef.value, ...normalScale(1) });
};
</script>

<style lang="scss" scoped>

normalize per-route transition (corners)

bim-ba.github.io/src/router/index.ts

Line 26 in 60ee111

// TODO: normalize per-route transition (corners) 

    path: "/",
    name: "Main",
    component: AppMain,
    meta: { transition: "scale-bottom-left", title: "Sava Znatnov" },
  },
  {
    path: "/projects",
    name: "Projects",
    component: AppProjects,
    meta: { transition: "scale-bottom-right", title: "Projects" },
  },
  {
    path: "/about",
    name: "Contacts",
    component: AppContacts,
    meta: { transition: "scale-bottom-right", title: "Contacts & About" },
    // TODO: normalize per-route transition (corners)
  },
  {
    path: "/:pathMatch(.*)*",

`isPrimary` property doesnt working

Problem
isPrimary property doesnt working properly, seems it is doesnt do anything

Problem code

bim-ba.github.io/src/views/AppProjects.vue

Lines 46 to 54 in 9afc726

const linkedList = new DoublyLinkedList(floppiesRef.value!);
const primaryFloppyRef = linkedList.find((floppyRef) => floppyRef.$props.isPrimary === true);
const viewableFloppiesRefs = [
primaryFloppyRef!.prev!.data,
primaryFloppyRef!.data,
primaryFloppyRef!.next!.data,
];
const timelineElementsFloppies = viewableFloppiesRefs.map(({ floppyRef }) => floppyRef!);

Too much repetitive code

bim-ba.github.io/src/views/AppContacts.vue

Lines 50 to 53 in 9afc726

complete: () => {
for (const paragraphRef of paragraphsRef.value!.paragraphsRef!)
clearCSSProperties(paragraphRef, ["transform"]);
},

bim-ba.github.io/src/views/AppContacts.vue

Line 61 in 9afc726

complete: () => clearCSSProperties(contactsRef.value!.titleRef, ["transform"]),

bim-ba.github.io/src/views/AppContacts.vue

Lines 72 to 76 in 9afc726

complete: () =>
contactsRef.value!.contactsRef!.forEach((contactRef) =>
clearCSSProperties(contactRef, ["transform"])
),
},

bim-ba.github.io/src/views/AppContacts.vue

Line 82 in 9afc726

begin: () => (footerRef.value!.iconRef!.isAnimated = true),

bim-ba.github.io/src/views/AppContacts.vue

Lines 87 to 90 in 9afc726

complete: () => {
footerRef.value!.iconRef!.isAnimated = false;
clearCSSProperties(footerRef.value!.iconRef!, ["transform"]);
},

bim-ba.github.io/src/views/AppContacts.vue

Line 100 in 9afc726

complete: () => clearCSSProperties(copyrightRef, ["transform"]),

bim-ba.github.io/src/views/AppContacts.vue

Line 111 in 9afc726

complete: () => clearCSSProperties(lineRef, ["transform"]),

bim-ba.github.io/src/views/AppMain.vue

Line 42 in 9afc726

complete: () => clearCSSProperties(contentRef.value!.firstnameRef, ["transform"]),

bim-ba.github.io/src/views/AppMain.vue

Line 49 in 9afc726

complete: () => clearCSSProperties(contentRef.value!.lastnameRef, ["transform"]),

bim-ba.github.io/src/views/AppMain.vue

Line 58 in 9afc726

complete: () => clearCSSProperties(contentRef.value!.descriptionRef, ["transform"]),

bim-ba.github.io/src/views/AppMain.vue

Line 64 in 9afc726

begin: () => (footerRef.value!.coordinatesRef!.isAnimated = true),

bim-ba.github.io/src/views/AppMain.vue

Lines 69 to 72 in 9afc726

complete: () => {
footerRef.value!.coordinatesRef!.isAnimated = false;
clearCSSProperties(footerRef.value!.coordinatesRef, ["transform"]);
},

bim-ba.github.io/src/views/AppMain.vue

Line 78 in 9afc726

begin: () => (footerRef.value!.iconRef!.isAnimated = true),

bim-ba.github.io/src/views/AppMain.vue

Lines 83 to 86 in 9afc726

complete: () => {
footerRef.value!.iconRef!.isAnimated = false;
clearCSSProperties(footerRef.value!.iconRef, ["transform"]);
},

bim-ba.github.io/src/views/AppMain.vue

Line 92 in 9afc726

begin: () => {

bim-ba.github.io/src/views/AppMain.vue

Lines 109 to 114 in 9afc726

complete: () => {
for (const squareRef of backgroundRef.value!.squaresRef!) {
clearCSSProperties(squareRef.squareRef!, ["transform"]);
squareRef.isAnimated = false;
}
},

bim-ba.github.io/src/views/AppProjects.vue

Lines 68 to 70 in 9afc726

begin: () => {
for (const floppyRef of viewableFloppiesRefs) floppyRef!.isAnimated = true;
},

bim-ba.github.io/src/views/AppProjects.vue

Lines 76 to 81 in 9afc726

complete: () => {
for (const floppyRef of viewableFloppiesRefs) {
clearCSSProperties(floppyRef.floppyRef!, ["transform"]);
floppyRef.isAnimated = false;
}
},

bim-ba.github.io/src/views/AppProjects.vue

Line 85 in 9afc726

begin: () => (backwardIconRef!.isAnimated = true),

bim-ba.github.io/src/views/AppProjects.vue

Line 90 in 9afc726

complete: () => (backwardIconRef!.isAnimated = false),

bim-ba.github.io/src/views/AppProjects.vue

Line 96 in 9afc726

begin: () => (forwardIconRef!.isAnimated = true),

bim-ba.github.io/src/views/AppProjects.vue

Line 101 in 9afc726

complete: () => (forwardIconRef!.isAnimated = false),

bim-ba.github.io/src/views/AppProjects.vue

Lines 107 to 110 in 9afc726

begin: () => {
for (const squareRef of footerRef.value!.squaresRef!.squaresRef!)
squareRef.isAnimated = true;
},

bim-ba.github.io/src/views/AppProjects.vue

Lines 116 to 121 in 9afc726

complete: () => {
for (const squareRef of footerRef.value!.squaresRef!.squaresRef!) {
clearCSSProperties(squareRef.squareRef, ["transform"]);
squareRef.isAnimated = false;
}
},

bim-ba.github.io/src/views/NotFound.vue

Line 87 in 9afc726

complete: () => clearCSSProperties(iconRef.value!, ["transform"]),

bim-ba.github.io/src/views/NotFound.vue

Line 90 in 9afc726

begin: () => (isTextAnimated.value = true),

bim-ba.github.io/src/views/NotFound.vue

Lines 95 to 98 in 9afc726

complete: () => {
clearCSSProperties(textRef.value!, ["transform"]);
isTextAnimated.value = false;
},

create global `FancyFooter.vue`

bim-ba.github.io/src/App.vue

Line 3 in 60ee111

<!-- TODO: create global `FancyFooter.vue` --> 

<!-- TODO: fix scaleY problem -->

<!-- TODO: create global `FancyFooter.vue` -->
<!-- because almost all pages include same footer -->

<template>
  <router-view v-slot="{ Component, route }">
    <Head>
      <title>{{ route.meta.title }}</title>
    </Head>
    <transition :name="route.meta.transition" mode="out-in">
      <div :key="route.path" class="route-container">
        <component :is="Component" />
      </div>

get rid of `scaleY`

this routine needs to be created after the element is not animated by animejs

bim-ba.github.io/src/components/ColoredSquare.vue

Line 63 in 60ee111

// TODO: get rid of `scaleY` 

const { motionProperties } = useMotionProperties(squareRef, initialProps);
const { set } = useSpring(motionProperties as PermissiveMotionProperties, { stiffness: 500 });

// TODO: get rid of `scaleY`
// this routine needs to be created after the element is not animated by `animejs`
const drag = ({ dragging, movement: [x, y] }: FullGestureState<"drag">) => {
  isDragging.value = dragging;

Too much repetitive code

bim-ba.github.io/src/components/NavigationIcon.vue

Lines 36 to 65 in 9afc726

// reactive
const isAnimated = ref<boolean>();
// initial props
const initialProps = useInitialProps({ scale: 1 });
// spring-set function
const set = computedWithControl(
() => isAnimated.value,
() => {
if (isAnimated.value === false) {
const { set } = useSpringAnimation(navigationIconRef, initialProps, {
stiffness: 500,
});
return set;
}
return (properties: MotionProperties) => _.noop(properties);
}
);
// hovering
const hover = ({ hovering }: FullGestureState<"move">) => {
if (hovering) set.value({ scale: 1.15 });
else set.value(initialProps);
};
// exposed
defineExpose({ isAnimated });

bim-ba.github.io/src/components/ColoredSquare.vue

Lines 47 to 94 in 9afc726

// reactive
const isAnimated = ref<boolean>();
// initial props
const initialProps = useInitialProps({
x: 0,
y: 0,
scale: 1,
cursor: "grab",
});
// spring-set function
const set = computedWithControl(
() => isAnimated.value,
() => {
if (isAnimated.value === false) {
const { set } = useSpringAnimation(squareRef, initialProps, {
stiffness: 500,
damping: 5,
});
return set;
}
return (properties: MotionProperties) => _.noop(properties);
}
);
// dragging
const drag = ({ dragging, movement: [x, y] }: FullGestureState<"drag">) => {
if (dragging)
set.value({
x,
y,
scale: 1.25,
cursor: "grabbing",
});
else set.value(initialProps);
};
// hovering
const hover = ({ hovering }: FullGestureState<"move">) => {
if (hovering) set.value({ scale: 1.15 });
else set.value(initialProps);
};
// exposed
defineExpose({ isAnimated, squareRef });

bim-ba.github.io/src/components/pages/projects/FloppyDisk.vue

Lines 86 to 87 in 9afc726

// reactive
const isAnimated = ref<boolean>();

bim-ba.github.io/src/components/pages/projects/FloppyDisk.vue

Lines 100 to 128 in 9afc726

// initial props
const initialProps = { scale: 1 };
// spring-set function
const set = computedWithControl(
() => isAnimated.value,
() => {
if (isAnimated.value === false) {
const { set } = useSpringAnimation(floppyRef, initialProps, {
stiffness: 350,
});
return set;
}
return (properties: MotionProperties) => _.noop(properties);
}
);
// hovering
const hover = ({ hovering }: FullGestureState<"move">) => {
if (hovering) {
for (const asideImageRef of asideImagesRef.value!) asideImageRef.show();
set.value({ scale: 1.15 });
} else {
for (const asideImageRef of asideImagesRef.value!) asideImageRef.hide();
set.value(initialProps);
}
};

bim-ba.github.io/src/components/pages/projects/FloppyDisk.vue

Lines 133 to 134 in 9afc726

// exposed
defineExpose({ floppyRef, isAnimated });

bim-ba.github.io/src/components/pages/main/FooterCoordinates.vue

Lines 28 to 29 in 9afc726

// reactive
const isAnimated = ref<boolean>();

bim-ba.github.io/src/components/pages/main/FooterCoordinates.vue

Lines 57 to 85 in 9afc726

// initial props
const initialProps = useInitialProps({ scale: 1 });
// spring-set function
const set = computedWithControl(
() => isAnimated.value,
() => {
if (isAnimated.value === false) {
const { set } = useSpringAnimation(footerCoordinatesRef, initialProps, {
stiffness: 500,
});
return set;
}
return (properties: MotionProperties) => _.noop(properties);
}
);
// hovering
const hover = ({ hovering }: FullGestureState<"move">) => {
revealLocation.value = hovering;
if (hovering) set.value({ scale: 1.15 });
else set.value(initialProps);
};
//exposed
defineExpose({ isAnimated });

this can be optimized

anime on every call creates a new anime instance.

we can create an anime instace with necessary animation before hover method

but this will require some extra checks like component is mounted

const hover = (state: boolean) =>

bim-ba.github.io/src/components/pages/projects/FloppyDisk.vue

Line 73 in 60ee111

// TODO: this can be optimized 

const primaryImage = computed(() => props.images.find((image) => image.primary));

// hovering
//
// TODO: this can be optimized
// `anime` on every call creates a new anime instance.
// we can create an anime instace with necessary animation before hover method
// but this will require some extra checks like component is mounted
//
const hover = (state: boolean) =>
  state
    ? anime({ targets: floppyRef.value, ...slightlyScale(1.1) })
    : anime({ targets: floppyRef.value, ...normalScale(1) });

// exposed
defineExpose({ floppyRef });

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.