DEV Community: Toru

Learning GSAP with a Day-to-Night Scroll Animation 🌞🌜

ifrah — Wed, 09 Oct 2024 10:53:43 +0000

We’ve been exploring GSAP (GreenSock Animation Platform) lately and wanted to share a breakdown of a recent project. If you’re new to GSAP, this project is a great way to get started with scroll-based animations!

What We’re Building

We’ll create a scroll-driven day-to-night transition using SVG elements. The animation will include:

Sun and Moon following a curved path as you scroll.
Sky changing colours to simulate day and night.
Stars appearing as the night sets in.
Text changes that animate based on the time of day.

1. Setting Up the HTML and CSS
First, let’s set up a basic HTML structure. We’ll include SVG elements for the sun, moon, and a path they’ll follow. We’ll also add a sky background and some stars.

<section class="container">
  <!-- Background sky div that changes color to simulate day and night -->
  <div class="sky"></div>

  <!-- SVG containing the sun, moon, and the path they will follow -->
  <svg class="circle-svg" viewBox="0 0 550 300">
    <!-- A path that defines the trajectory for the sun and moon animations -->
    <path class="circle-path" d="M 550 300 a 10 10 0 0 0 -550 0" fill="transparent"/>
    <!-- The sun element, initially positioned at (40, 40) -->
    <circle fill="#FDCA48" class="sun" cx="40" cy="40" r="40"></circle>
    <!-- The moon element, also initially positioned at (40, 40) -->
    <circle fill="#FFEFC4" class="moon" r="40" cx="40" cy="40"></circle>
  </svg>

  <!-- Container for stars that appear during the night -->
  <div class="stars">
    <!-- Individual star elements that are hidden initially -->
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
  </div>

  <!-- "HELLO WORLD!" text displayed during the day -->
  <h1 class="hello-world"><span>HELLO WORLD!</span></h1>

  <!-- "BYE WORLD!" text displayed during the night -->
  <h1 class="bye-world"><span>BYE WORLD!</span></h1>

  <!-- Grass element that stays at the bottom of the screen -->
  <div class="grass"></div>
</section>

Next, some basic CSS to style our elements. We position the sky, stars, sun, and moon and set up classes for our text.

html, body, * {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;

  .sky {
    background-color: #B7F2FF;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
  }

  .sun, .moon {
    opacity: 0;
  }

  .stars {
    position: fixed;
    top: 0;
    height: 80vh;
    width: 100%;

    .star {
      background-color: #FFEFC4;
      border-radius: 100px;
      display: none;
      height: 15px;
      width: 15px;
      position: absolute;
      z-index: 10;
      animation: pulsate 2s linear infinite;

      &:nth-child(1) {
        top: 20%;
        left: 5%;
        transform: translate(-5%, -20%);
      }

      &:nth-child(2) {
        display: none;
        top: 67%;
        left: 20%;
        transform: translate(-20%, -67%);
      }

      &:nth-child(3) {
        display: none;
        top: 35%;
        left: 37%;
        transform: translate(-37%, -35%);
      }

      &:nth-child(4) {
        display: none;
        top: 75%;
        left: 70%;
        transform: translate(-70%, -75%);
      }

      &:nth-child(5) {
        display: none;
        top: 30%;
        left: 90%;
        transform: translate(-30%, -90%);
      }
    }
  }

  h1 {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 0;
    font-weight: 400;
    position: fixed;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -68%);
    opacity: 0;
    white-space: nowrap;

    span {
      font-size: 50px;
    }

    &.hello-world {
      color: #000;
    }

    &.bye-world {
      color: #fff;
    }
  }

  .grass {
    background-color: #065C19;
    height: 20vh;
    width: 100%;
    position: fixed;
    bottom: 0;
  }
}

.fade-in {
  animation: fadeIn 0.25s forwards;
}

.fade-out {
  animation: fadeOut 0.25s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  } 100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  } 100% {
    opacity: 0;
  }
}

@keyframes pulsate {
  0% {
    opacity: 100%;
  }
  50% {
    opacity: 25%;
    scale: 0.9;
  }
  100% {
    opacity: 100%
  }
}

2. Bringing the Animation to Life with GSAP

Now that we have the structure in place, let’s animate it! We’ll use GSAP’s ScrollTrigger and MotionPathPlugin to animate the sun and moon based on scroll position.

gsap.registerPlugin(ScrollTrigger, MotionPathPlugin, DrawSVGPlugin);

We need to register the plugins we’re using: ScrollTrigger for scroll-based animations, MotionPathPlugin for moving elements along paths, and DrawSVGPlugin to animate SVG paths.

3. Setting Up the Scroll Trigger and Timeline

The core of the animation happens in our timeline (tl2). We set up ScrollTrigger to pin the SVG element and control the animation based on scroll position.

var tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: ".circle-svg",
    scrub: 1, // Smooth scrolling effect
    pin: true, // Pin the element during scroll
    start: "center center", // Start when the SVG reaches the center of the viewport
    end: "+=3000", // Animation length
  }
});

trigger: The SVG that controls when the animation starts.
scrub: Links animation progress to the scroll position.
pin: Keeps the SVG in place as the user scrolls.
start and end: Define when the animation starts and how long it lasts.

4. Animating the Sun and Moon

Next, we move the sun along the path using the motionPath property. This makes the sun follow the curve we set in the SVG path.

tl2.from(".circle-path", {drawSVG: 0}) // Draw the path as we scroll
    .to(".sun", {
        motionPath: {
            path: ".circle-path", // The path to follow
            align: ".circle-path", // Align the element along the path
            alignOrigin: [0.5, 0.25], // Adjust alignment
            start: 0,
            end: 0.2, // Moves the sun a small distance initially
        },
        duration: 0.2
    })

Here’s what’s happening:

The path is drawn with drawSVG as the user scrolls.
The sun moves a small distance along the path to simulate sunrise.

We then continue the animation by moving the sun further along the path, changing the sky’s color, and gradually revealing stars.

.to(".sky", { backgroundColor: "#7A3BFF" }) // Change sky color to night
.to(".star:nth-child(3)", { display: "block" }, 2) // Show stars one by one

5. Handling the Moon and Text Animations

Once the sun sets, the moon rises following the same path, and the text changes based on scroll direction.

.to(".moon", {
  motionPath: {
    path: ".circle-path",
    align: ".circle-path",
    alignOrigin: [0.5, 0.25],
    start: 0,
    end: 0.2
  },
  duration: 0.2
})
.add(() => {
  if (tl2.scrollTrigger.direction === -1) {
    byeAnimation.reverse();
  } else {
    byeAnimation.play();
  }
}, "<");

The moon animation is set up similarly to the sun. The timeline checks the scroll direction to determine which text message to display, playing or reversing the animation based on the scroll.

Final Touches

We tie everything together by animating additional stars, adding a grass element that rises, and fine-tuning timing and effects. It’s all about playing around with GSAP’s powerful timeline and animation controls

Wrapping Up

This project was a fun way to get familiar with GSAP’s capabilities. If you’re trying it out, start small and experiment with different properties and plugins. It’s amazing how much you can create with just a few lines of code!

Feel free to ask questions if you want to learn more about GSAP or how I set up the animations. For more industry insights and the latest updates from our agency, be sure to visit Toru Digital's Insights.

See demo here

How BIMI Puts Your Brand Front and Center in Every Inbox 📧

ifrah — Fri, 16 Aug 2024 09:29:30 +0000

Getting your emails noticed has become incredibly difficult, with the average person juggling hundreds of emails each day. So, how do you make yourself stand out from the crowd?

That's where BIMI (Brand Indicators for Message Identification) comes into play. It is a relatively new tool that helps your brand stand out while also providing some security. In this post, I'll be guiding you through how to get started.

What Exactly is BIMI?

BIMI stands for Brand Indicators for Message Identification which is simply a way for you to display your brand's logo next to your emails in supported inboxes.

The primary benefits of BIMI include:

Instant Brand Recognition: Your logo makes your emails stand out in crowded inboxes, helping recipients quickly identify communications from your brand.
Increased Trust and Credibility: By verifying your identity through BIMI's authentication process, you differentiate yourself from spammers and untrustworthy senders, boosting open rates and engagement.
Improved Email Deliverability: While BIMI itself doesn't directly impact deliverability, it encourages strong email authentication practices like SPF, DKIM, and DMARC, which are crucial for reaching inboxes.

How Does BIMI work?

To get your logo showing up via BIMI, you need to ensure your emails are authenticated using protocols like SPF, DKIM, and DMARC. BIMI then builds on that by letting you associate your verified logo with your domain.

Design Your Brand Logo

Your brand logo must be in SVG (Scalable Vector Graphics) format and meet specific guidelines. It should be a square aspect ratio, static (no animations), and visually clear even at smaller sizes. This is what will be displayed in supported inboxes.

Get Your Logo Verified

Some email providers require you to verify your logo through a Verified Mark Certificate (VMC). This step involves working with a third-party certificate authority that checks your brand's authenticity and issues the certificate. This extra layer of verification helps prevent abuse and ensures that only authorised parties can leverage BIMI for a particular brand.

Add BIMI DNS Record:

Once you have your logo designed and verified, the next step is to add a BIMI DNS record to your domain. This record tells email clients where to find your brand's logo and includes any relevant verification information.

The BIMI DNS record is a TXT record that follows a specific format:

default._bimi.yourdomain.com IN TXT "v=BIMI1; l=https://yourdomain.com/logo.svg; a=https://yourdomain.com/vmc.pem"

Let's break down the different components:

default._bimi.yourdomain.com: This is the subdomain where the BIMI record is located. The default part indicates that this is the default BIMI record for your domain.
v=BIMI1: This specifies the version of the BIMI specification you're using.
l=https://yourdomain.com/logo.svg: This is the URL where your brand's logo (in SVG format) is hosted. Make sure this URL is publicly accessible.
a=https://yourdomain.com/vmc.pem: This is the URL where your Verified Mark Certificate (VMC) is hosted. This component is optional, but it's required by some email providers to verify your brand's authenticity.

Adding this BIMI record to your DNS is crucial for email clients to recognise and display your brand's logo in supported inboxes. The process for adding the record may vary depending on your DNS provider or hosting platform, but it typically involves accessing your domain's DNS settings and creating a new TXT record with the BIMI information.

Monitor and Optimise

After setting up BIMI, keep an eye on how your emails are displaying across different inboxes and email clients. You may need to make adjustments to ensure your logo is rendering correctly.

By following these steps and meeting the necessary requirements, you can implement BIMI and have your brand logo displayed prominently in supported email inboxes, enhancing your brand recognition and building trust with recipients.

A Few Things to Consider

As BIMI continues to gain traction and more email providers recognise its benefits, we can expect broader support in the future. But for the time being, it’s not yet universally supported.As of now, major email services like Gmail, Yahoo Mail, and Fastmail have adopted BIMI, allowing users to see brand logos in the inbox when emails are received from BIMI-compliant senders. Also, getting a Verified Mark Certificate can be a bit of a process and might involve some costs, so it’s something to weigh up.

If you’re serious about making an impact, investing a little time in setting up BIMI could pay off big time.It gives your brand a unique edge by making your emails stand out visually and by building trust right from the inbox.

We'd love to hear your thoughts and experiences on implementing BIMI, so please feel free to leave a comment below. For more industry insights and the latest updates from our agency, be sure to visit Toru Digital's Insights.

Integrating Google Translate API with Yii2

ifrah — Sun, 09 Jun 2024 17:57:40 +0000

In this post, I'll be sharing how to integrate the Google Translate API with Yii2. As developers, we often encounter challenges when building multilingual sites with translation capabilities. Whether we're manually adding them or relying on a CMS, the process can be incredibly time-consuming and tedious.

Although it is not perfect, the Google Translate API has a high accuracy level, comprehensive language support and is constantly being updated to ensure relatability. Hopefully by the end of this guide, you'll be able to incorporate Google Translate into your Yii2 application.

Adding Google Translate API Configuration to Yii2

Before we start translating text, we need to configure the Google Translate API in our Yii2 application. Follow these steps to set up the API configuration:

Step 1: Obtain Your API Key

If you haven't already, refer to the previous post on setting up a Google Cloud Project and enabling the Google Translate API. Once you have your API key, proceed with the following steps.

Step 2: Configure Yii2 to Use the API Key

Open your Yii2 configuration file (common/config/main.php) and add the API key to the params section:

`<?php

return [
    'params' => [
        'google' => [
            'translate' => [
                'api_key' => 'YOUR_API_KEY_HERE', // Replace with your actual API key
                'enabled' => true,
            ],
        ],
    ],
    // Other configurations
];`

Using the API to Translate Text

Now that we've configured our application to use the Google Translate API, let's create a function that uses the API to translate text. We'll create a new component to encapsulate this functionality.

Step 1: Create the Translate Component

Create a new file components/GoogleTranslate.php and add the following code:

<?php

namespace common\components;

use Yii;
use yii\base\Component;

class GoogleTranslate extends Component {

    /**
     * Translates text using the Google Translate API.
     *
     * @param string $text The text to be translated.
     * @param string $targetLanguage The language to translate the text into.
     * @param string $sourceLanguage The language of the text to be translated (default: 'en').
     * @return string The translated text.
     * @throws \Exception If Google Translate API is not enabled or if an error occurs during translation.
     */
    public function translate($text, $targetLanguage, $sourceLanguage = 'en') {
        // Check if Google Translate API is enabled
        if (!Yii::$app->params['google']['translate']['enabled']) {
            throw new \Exception("Google Translate is not enabled.");
        }

        // Get the API key from Yii2 application parameters
        $apiKey = Yii::$app->params['google']['translate']['api_key'];
        // Construct the API request URL
        $url = "https://translation.googleapis.com/language/translate/v2?key={$apiKey}";

        // Prepare data for the API request
        $data = [
            'q' => $text,
            'source' => $sourceLanguage,
            'target' => $targetLanguage,
            'format' => 'text',
        ];

        // Initialize a cURL session
        $ch = curl_init();
        // Set cURL options for the API request
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
        curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        // Execute the cURL request and get the response
        $response = curl_exec($ch);
        // Close the cURL session
        curl_close($ch);

        // Process the API response
        return $this->handleResponse($response);
    }

    /**
     * Handles the response received from the Google Translate API.
     *
     * @param string $response The API response in JSON format.
     * @return string The translated text.
     * @throws \Exception If an error occurs while processing the response.
     */
    private function handleResponse($response) {
        // Decode the JSON response into an associative array
        $response = json_decode($response, true);

        // Check if decoding was successful
        if ($response === null) {
            throw new \Exception("Failed to decode JSON response.");
        }

        // Check if the response contains an error message
        if (isset($response['error'])) {
            // Extract the error message
            $errorMessage = $response['error']['message'];
            // Throw an exception indicating a Google Translate API error
            throw new \Exception("Google Translate API error: {$errorMessage}");
        }

        // Return the translated text extracted from the response data
        return $response['data']['translations'][0]['translatedText'];
    }
}

This component defines a translate method that sends a translation request to the Google Translate API and a handleResponse method that processes the API response.

Step 2: Register the Component

Open your Yii2 configuration file (common/config/main.php) and register the GoogleTranslate component:

<?php

return [
    'components' => [
        'googleTranslate' => [
            'class' => 'common\components\GoogleTranslate',
        ],
    ],
    // Other configurations
];

Yii2 follows the dependency injection design pattern, where component can be injected into other classes and componentes when needed. So by doing this, we enable Yii2 to automatically inject an instance of GoogleTranslate into classes that require the translation functionality.

Handling API Responses and Errors

Handling API responses and errors is crucial to ensure a smooth user experience and to debug issues effectively. Let's look at how the GoogleTranslate component handles responses and errors.

Response Handling

The handleResponse method decodes the JSON response and checks for errors. If the response contains a translation, it returns the translated text. If there is an error, it throws an exception with a detailed error message.

Error Handling

Here are a few common scenarios and how to handle them:

Invalid API Key: Ensure your API key is correct and has the necessary permissions. If the API key is invalid, Google will return an error which the handleResponse method will catch and throw as an exception.

API Quota Exceeded: Google Translate API has usage limits. If you exceed these limits, you'll receive an error response. Consider implementing retry logic or monitoring usage to prevent exceeding quotas.

Network Issues: If there's a network issue, curl_exec might fail. Ensure you handle such cases gracefully, possibly with retries or alternative actions.

Example Usage

Let's see how to use the GoogleTranslate component in a controller to translate text:

<?php

namespace frontend\controllers;

use Yii;
use yii\web\Controller;

class TranslateController extends Controller {

    public function actionIndex() {
        try {
            $text = 'Hello, world!';
            $targetLanguage = 'es'; // Spanish
            $translatedText = Yii::$app->googleTranslate->translate($text, $targetLanguage);
            return $this->render('index', ['translatedText' => $translatedText]);
        } catch (\Exception $e) {
            Yii::error($e->getMessage(), __METHOD__);
            return $this->render('error', ['message' => $e->getMessage()]);
        }
    }
}

In the actionIndex method, we use the googleTranslate component to translate "Hello, world!" into Spanish. If an error occurs, it is caught, logged, and an error message is displayed.

Conclusion

By following this guide, you can add automated translation capabilities to your Yii2 application. This enhances your applications ability to support multiple languages and reach a broader audience.

I have plans to make this into a mini series, where we'll be next exploring how to create and run translation jobs in Yii2. This will allow for asynchronous and scalable translation processing.

Resources:
Google PHP Client Library Documentation
Yii2 Internationalization Documentation
Dependency Injection Container

What Are Some of Your Favourite Visual Studio Code Extensions?

ifrah — Sat, 04 May 2024 16:25:49 +0000

Hi everyone!

So I've been using co-pilot for the nearly a year and it's been a real game changer for me. I definitely feel more productive and work quicker. Are there any other extensions or tools that you've come across and found to be particularly useful?

Since my projects span across different languages and frameworks, I'm all ears for recommendations on extensions for anything.

The extensions I'm currently using are below:

5 Underrated resources to learn Git and Github

ifrah — Fri, 19 Nov 2021 13:15:09 +0000

Save you time and use these resources to perfect your Git and GitHub knowledge.

This week, I finally built up the courage to deep dive into learning Git and GitHub without having to relying on GUI and using the command line. We are fortunate enough to have unlimited resources available to us at the click of the button. However, this can quickly become overwhelming and result in spending more time browsing articles and tutorials instead of actually learning! I have curated this list with hopes that time and energy can be saved.

1.Github Minesweeper[Profy.dev - Free]

This is one of the best free courses to actively learn Git through playing a game with a bot.

It is a hand-on learning experience which helps prepare your Git skills for a job in a real-world team. It combines practice, theory and repetition to create the best learning environment to allow all the skills you learn to stick.

2. Version Control with Git[Udacity - Free]

This is a Udacity course which covers the essentials of using the version control system Git which takes approximately 4 weeks on average to complete.

This course teaches you up to date skills using self-paced learning and interactive quizzes and tasks.

3.Hacktoberfest

Every October, Hacktoberfest takes place and is an event which encourages participation in the open source community with prices upon completion.

Highly recommended for beginners who wish to put into practice their Git skills in real world projects. Notably, most beginner repositories have step by step instructions of how to contribute to their projects.

4.Oh My Git!

Oh My Git! is an open source game about learning Git created for complete beginners. It is fun and interactive which is a refreshing break from the usual theoretical courses found online.

It uses card game mechanics tasking players to work on repositories with others and fixing mistakes. It uses a mix of arrows and command cards to illustrate how changes in repositories flow.

5.The Odin Project

The Odin Project collects the best resources to supplement your learning and present them in a logical order. In their Git Basics course provide clear step by step instructions are given to complete assignments as well as knowledge checks and cheatsheets throughout the course.

The Odin Project also has a community via discord chatrooms which provides additional help and motivation.