alexcambose/motus

Animation library that mimics CSS keyframes when scrolling.

Hi there! I'm Alexandru Cambose

I'm a versatile software engineer with over 6 years of experience, skilled in both front-end and back-end development, with a deep understanding of finance, web3, and blockchain. From building, launching, and maintaining projects, to taking on roles as mentor, architect, and team lead, I've mastered a tech stack including React, Next.js, Node.js, NestJS, Web3, and more.

I thrive on pushing boundaries, embracing new challenges, and constantly learning to stay ahead of tech, web3, and finance trends.

🔥 About me

• 👨‍💻 6+ years of hands-on experience as a software engineer.
• 🛠️ Taken on roles as frontend developer, backend developer, mentor, and architect.
• 🚀 Successfully developed, launched, and maintained numerous projects from scratch.
• 🖥️ Proficient in frontend technologies: TypeScript/JavaScript, React, Next.js, Redux, Webpack, SCSS, Styled Components, Tailwind CSS, and more.
• 🌐 Skilled in backend technologies: Node.js, NestJS, Express, PostgreSQL, AWS, Redis, Kafka, GraphQL, and more.
• ⛓️ Comprehensive experience in 🦄 Web3 technology, blockchain concepts, dApps, smart contracts, and integrating blockchain systems.
• 📱 Experience with mobile development: React Native, Redux, React Navigation, Expo.
• 💡 Passionate about solving intricate challenges in finance, web3, and blockchain sectors.
• 🚀 Strong drive to push boundaries, embrace new challenges, and constantly learn.
• 🤝 Team-oriented and open to collaboration.
• 📨 Contact: [email protected]
• 📅 Calendly: https://calendly.com/alexcambose

🔧 Technologies & Tools

The technologies I'm proficient with:

Frontend

Backend

Mobile React Native React-Navigation Redux Expo

Web3 Ethers Walletconnect V2, Web3wallet Wagmi Web3React Solidity Geth

✍ Blog & Writing

• Why are junior developers essential in a team?
• Sentry tracing decorator in Typescript
• How to Escape the Try-Catch Hell
• Benchmark Javascript easily
• How JWT works? The implementation
• How JWT works — in depth
• Provably fair system in javascript
• Creating a parallax effect with Motus
• JS offsetTop property is not great and here is why
• React Hooks in 3 minutes

🚀 Let's Connect and Build Together! 🦄

Contact me [email protected]

Resume

motus's Issues

Opacity and Background

Does not work with opacity and background, how to animate these properties? Gives the error "Uncaught TypeError: Cannot read property 'match' of null"

You have a regular expression to check if the string is always waiting for the unit of measurement.

Start full Animation when in Viewport

Hi there,

awesome library, i really like the approach. I'd also like to replace something like scrollreveal.js / aos.js with it, but i can't figure out how yet.

It's possibles to immediately start the Animation: https://alexcambose.ro/motus/#/start-stop-animatios

But is it possible to start the Animiation and let in run through without taking the scroll position into consideration for a reveal effect?

An Option like "animateWhenInViewport" would be nice i guess

Best regards

Functions with number values only transform one decimal

For example the scale function.

        const anim = new Motus.Animation({
            $el: this.$refs.startBg,
            startPoint: 0,
            endPoint: 500,
            keyframes: {
                100: {
                    scale: [1.3]
                }
            }
        });

        Motus.addAnimation(anim);

It will only increment the decimal by .1 each step, which results in an incredibly stuttery animation. It would be better if it would have 4-5 decimals (it would then animate 1.0001 and not skip the steps between 1.0-1.1).

I'm also encountering issues with other functions. The translateX seems to do nothing at all while the translate function works sometimes. I see a lot of potential in the library but at the moment I am afraid to use it for production because there is a lot of things not working, and there doesn't seem to be much happening in the repo.

I would advice you to go over the transform functions again and hunt down the bugs.

Scroll indicator with percentage

Hi want to create a page scroll percentage indicator:

const animation = new Motus.Animation({
  $el: document.getElementById("app"),
  startPoint: 0,
  endPoint: document.body.offsetHeight,
  keyframes: [
    {width: '100%'} 
  ]
});

But why i can't use 100%? And is this the right approach?

Cannot translate to negative values

Using the translate function to translate into negative values results in a positive value.

This should move the element up 1000px (because the Y value is negative), but the end result is the opposite. It seems the minus gets stripped out at some point.

            keyframes: {
                100: {
                    translate: [0, '-1000px'],
                }
            }

HTMLElement position update

Is there a way to trigger HTMLElement position update? It's necessary after browser resize or adding/removing content.

translateY function not working

I simply cannot get the translateY function to work. Following the documentation I should be able to do the following:

keyframes: {
        100: {
            translateY: ['-1000px']
        }
    }

But nothing happens. I tried with/without putting it in an array and with various values (positive/negative/different units). No dice. This is the only keyframe supplied, the element is not being transformed in any other way. Seems to be a bug with the css-func library?

Script in demo page won't load

Hey, found your cool project incidentally,
But the cdn doesn't seem to work properly.
You may want to fix it.

dist folder is not up to date with lastest commit

dist folder is not up to date with lastest commit and still contains fixed bugs like #6 and #7

ReferenceError: window is not defined – Gridsome

Hey guys,

I am absolutely in love with this plugin. I would like to use it with Gridsome a vue js framework. Unfortunately when building the Project it gives me this error:

ReferenceError: window is not defined

I think this is because your plugin is using window, but window is not available in an ssr environment. Do you know how I can fix this?

Thank you very much for your help.

Best regards
Chris

Transform animation

Hi, how I can animate transform rules like a scaleY()

Usage with Angular 7

Hello. First of all, thanks to the creator for creating this beautiful library. However I wanted to ask. Is this library compatible with Angular 7? If it is, how to correctly implement it?

Reduce build size