Forem: Khutso siema

bee agent

Khutso siema — Thu, 23 Jan 2025 17:37:36 +0000

How I Integrate Svelte With Gsap 3

Khutso siema — Tue, 02 Jun 2020 21:13:45 +0000

In my opinion Gsap is one of the best animation libraries out there,
roughly 10 million sites use GSAP,so yeah it is a pretty big deal.
You can learn more about it here.

In this brief and hopefully informative post, I want to show you guys how
I use Gsap with one of my favorite frameworks Svelte.

I assume you already know how to setup a basic svelte project,So I will skip that part and let's just quickly install Gsap

npm install gsap

now under the src folder,lets create a file called animate.js
and fill it with this

import { gsap } from "gsap";

export function animate(node, { type, ...args }) {
  let method = gsap[type];
  return method(node, args);
}

Now how do we use this little function we just wrote,
for one we can use it with svelte actions.
Actions are element-level lifecycle functions. They're useful for things like interfacing with third-party libraries,actions are very similar to transitions,to use the function we made as an action we make use of the use keyword on the element we want to animate.

App.svelte

<script>
  import { animate } from "./animate.js";
  let desc = false;
</script>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }
</style>

<main
  use:animate={{ type: 'from', duration: 1, opacity: 0, onComplete: () => (desc = true) }}>
  Gsap baby
</main>

That will just fade in "Gsap baby" when the page loads and fire the callback once thats done.
we can also use this to transition elements that are entering or leaving the dom.


<script>
  import { animate } from "./animate.js";
  let desc = false;
</script>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

<main
  use:animate={{ type: 'from', duration: 1, opacity: 0, onComplete: () => (desc = true) }}>
  <h1>Helllo broooooo</h1>
</main>

{#if desc}
  <p
    transition:animate={{ type: 'from', duration: 1, opacity: 0 }}
    class="desc">
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae natus libero quisquam, aliquam quod vel quia necessitatibus? Cupiditate, excepturi nisi. Nam tempora ex numquam voluptatum minima similique sequi, fugit placeat!
  </p>
{/if}

Hope that was helpful,Peaceeeeeee.

Why do you write code??

Khutso siema — Sun, 15 Dec 2019 12:45:54 +0000

I get asked this question alot because it normally looks like I enjoy what I do. Actually, the real question is why do I write code?

I personally code because it gives me enjoyment. I don’t think I have ever had a job more satisfying than coding and solving problems, Creating web sites and web applications feels like something i was always ment to do,i don't see myself doing anything else.

What are your reasons??

Custom Transitions And Staggered Transitions In Svelte(with AnimeJs)

Khutso siema — Fri, 01 Nov 2019 16:43:27 +0000

Let's start with the obvious.

Method #1

The first method will obviously to make use of the built-in transitions from svelte/transition and delay each element by its index.

Here's an example using the fly transition,
again this method is not limited to just the fly transition,you can use any transition from svelte/transition

<script>
import { fly } from "svelte/transition";
    let cats = [
      { id: 1, name: "Keyboard Cat" },
      { id: 2, name: "Maru" },
      { id: 3, name: "Henri The Existential Cat" }
    ];
let visible = false;

</script>

<input type="checkbox" bind:checked={visible}>
<ul>
{#each cats as {id,name},i}
  {#if visible}
    <h1 in:fly="{{x: -200,duration: 1000,delay:i*200 }}" 
out:fly="{{ x: 200, duration: 1000,delay:i*200 }}">{i +1}.{name}</h1>
  {/if}
{/each}
</ul>

But this method has some obvious limitations,you can only use it to transition one property at a time.

Method #2

To overcome the limitations of method 1# we can create our own custom transition.
for this example i modified the spin custom animation from the svelte official tutorial.

<script>
    import { fly } from "svelte/transition";
    import { elasticOut } from "svelte/easing";
    let cats = [
      { id: 1, name: "Keyboard Cat" },
      { id: 2, name: "Maru" },
      { id: 3, name: "Henri The Existential Cat" }
    ];
    let visible = false;

    function spin(node, { duration, delay }) {
      return {
        delay,
        duration,
        css: t => {
          const eased = elasticOut(t);
          return `transform: scale(${eased}) rotate(${eased * 360}deg);`
        }
      };
    }
</script>

<input type="checkbox" bind:checked={visible}>
<ul>
{#each cats as {name},i}
  {#if visible}
    <h1 in:spin="{{duration: 1000,delay:i*200 }}" 
out:fly="{{ x: 200, duration: 1000,delay:i*200 }}">{i +1}.{name}</h1>
  {/if}
{/each}
</ul>

Let's break this down starting with spin(node, { duration, delay })

node - refers to the element being transitioned
duration -refers to the time it will take to complete the transition
delay - refers the time between transitions

the css function returns a css animation and has parameters t and u
t value is 0 at the beginning of an intro or the end of an outro, and 1 at the end of an intro or beginning of an outro,and u its the opposite of t

so our scale property is transitioned from 0 to 1

Method #3

the first two methods are great for simple transitions,for complicated animations we will need something extra,that extra something something for me is AnimeJs

Let's start by installing animejs

npm install animejs --save

Now lets modify our code once more

<script>
    import anime from "animejs/lib/anime.es.js";
    let cats = [
      { id: 1, name: "Keyboard Cat" },
      { id: 2, name: "Maru" },
      { id: 3, name: "Henri The Existential Cat" }
    ];
    let visible = false;

    function reverse(node, { targets, duration }) {
    return {
      css: t => {
        return anime({
          targets,
          duration,
          easing: "easeInOutCirc",
          opacity: [1, 0],
          translateX: [0, -500],
          scale: [1, 0],
          delay: anime.stagger(200),
        });
      }
    };

  }
    function forward(node, { targets, duration }) {
    return {
      css: t => {
        anime({
          targets,
          duration,
          easing: "easeInOutCirc",
          opacity: [0, 1],
          translateX: [-500, 0],
          scale: [0, 1],
          delay: anime.stagger(200)
        });
      }
    };

  }
</script>

<input type="checkbox" bind:checked={visible}>
<ul>
{#each cats as {name},i}
  {#if visible}
    <h1 class="animate"
         in:forward="{{ targets: '.animate', duration: 1500 }}"
         out:reverse="{{ targets: '.animate', duration: 1500 }}">
         {i +1}.{name} 
    </h1>
  {/if}
{/each}
</ul>

In this example i made two transitions instead of one,

and as you might have noticed i used targets to refer to the elements instead of node,this is due to the fact that node only refers to one element.
And another confusing thing is that i used css function instead of the tick function,this was due to the performance issues i got by using tick and animejs seems to return css animations this might explain why this works(don't qoute me on this)

Thanks for reading and stay tuned!

When should you call yourself a senior developer?

Khutso siema — Sat, 19 Oct 2019 19:53:16 +0000

What makes a programmer a "senior"? Does it mean the the programmer has a specific amount of certifications or job expertise? How do IT companies decide what title to give to a programmer?

HOW TO CONSUME A RESTFUL API IN SVELTE

Khutso siema — Fri, 18 Oct 2019 21:31:20 +0000

In this article i will share with you two techniques of consuming a rest api in svelte.

So basically, "consume an API" is just a fancy term for "use an API".
Disappointed? Don't be,You might learn something.

Method #1

The most common way to fetch data from other sources in svelte is to use the onMount lifecycle function.

here's an example from my last post


<script>
 import { onMount } from "svelte";

let myTodo;
  onMount(async()=>{
     const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
      const todo = await response.json();
      myTodo = todo
  });
</script>

<div>
  {#if myTodo}
    <ul>
      <li>{myTodo.title}</li>
    </ul>
  {:else}
    <p>loading.....</p>
  {/if}
</div>

Let's say for some reason you don't want to fetch the data by using onMount lifecycle function,let's say for some reason you want to await the value of promises directly in your markup,well your in luck because svelte can do just that.
which brings me to

Method #2

<script>
 let myTodo = getTodo();

 async function getTodo() {
   const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
   const todo = await response.json();

   if (response.ok) {
     return todo;
   } else {
     throw new Error(todo);
   }
 }

</script>

{#await myTodo}
    <p>...waiting</p>
{:then todo_1}
    <p>{todo_1.title}</p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

Hope this was helpful to someone out there!

Thanks for reading and stay tuned!

Lifecycle Events In Svelte

Khutso siema — Fri, 18 Oct 2019 14:14:35 +0000

Getting to know Lifecycle Events in Svelte

Every component in svelte has a lifecycle that starts when it is created, and ends when it is destroyed.

N.B

Lifecycle functions must be called while the component is initialising so that the callback is bound to the component instance — not (say) in a setTimeout.

Lifecycle functions in svelte include

onMount fired after the component is rendered
onDestroy fired after the component is destroyed
beforeUpdate fired before the DOM is updated
afterUpdate fired after the DOM is updated

and the special tick function

onMount

The most frequently used is onMount, which runs after the component is first rendered to the DOM.
A common use for onMount is to fetch data from other sources.

Here’s a sample usage of onMount:

<script>
 import { onMount } from "svelte";

let myTodo;
  onMount(async()=>{
     const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
      const todo = await response.json();
      myTodo = todo
  });
</script>

<div>
  {#if myTodo}
    <ul>
      <li>{myTodo.title}</li>
    </ul>
  {:else}
    <p>loading.....</p>
  {/if}
</div>

onDestroy

onDestroy allows us to cleanup data or stop any operation we might have started at the component initialization, like timers or event listeners which prevents us from memory leaks.

Here’s a sample usage of onDestroy:


<script>
  import { onDestroy } from "svelte";
  let date = new Date();

  let timer = setInterval(() => {
    date = new Date();
  }, 1000);
 // clears the timer when a component is destroyed
  onDestroy(function() {
    clearInterval(timer);
  });

</script>

<p>{date.toLocaleTimeString()}</p>

beforeUpdate and afterUpdate

The beforeUpdate function schedules work to happen immediately before the DOM has been updated. afterUpdate is its counterpart, used for running code once the DOM is in sync with your data.

beforeUpdate

The beforeUpdate does exactly what it implies,in technical terms you can say it schedules a callback function to runs immediately before the component is updated after any state change.

Here’s an example:

<script>
  import { beforeUpdate} from "svelte";
  let count = 1;

  beforeUpdate(function() {
    console("You can see me before count value is updated");
  });
</script>

<div>
  <h1>{count}</h1>
  <button on:click={() => count++}>Increment</button>
</div>

afterUpdate

afterUpdate is beforeUpdate's counterpart, used for running code once the DOM is in sync with your data.

Here’s an example:

<script>
  import { afterUpdate} from "svelte";
  let count = 1;

  afterUpdate(function() {
    console("You can see me after count value is updated");
  });
</script>

<div>
  <h1>{count}</h1>
  <button on:click={() => count++}>Increment</button>
</div>

Tick

At the start of this post i mentioned that the tick lifecycle function was special,why is it special?well...

The tick function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises.
It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).

Here’s an example:

<script>
    import { beforeUpdate, tick } from 'svelte';

    beforeUpdate(async () => {
        console.log('the component is about to update');
        await tick();
        console.log('the component just updated');
    });
</script>

A better usecase example of this function can be found on the svelte
website.Tick Example

Thanks for reading and stay tuned!