Animate text field

[EatSleepProgramRepeat]

Make the text field move to the top-left of the fully-expanded window. Also, make sure that the field spans the whole width. Make it do all of the above in a smooth, animated manor.

[SysTechSalihY]

Hi! 👋

I implemented the requested animation so that the text field smoothly moves from the center to the top-left corner of the window and expands to fill the full width. The animation uses CSS transform with translate and scale, along with opacity and width transitions for a smooth effect.

I added a slight delay on page load to prevent flickering and used will-change to help browser optimization.

This is my first contribution, so please let me know if there’s anything I can improve or if you want me to adjust timing, easing, or add other features like a floating label or button.

Thanks!

<title>Animated Text Field</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

html,
body {
    height: 100%;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f7f8fc;
    overflow: hidden;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 1rem;
}

.text-field {
    position: absolute;
    top: 0;
    left: 0;
    padding: 14px 18px;
    width: 300px;
    font-size: 1.1rem;
    border: 2px solid #ccc;
    background-color: #007bff;
    border-radius: 10px;
    outline: none;
    transform: translate(50vw, 50vh) scale(0.95);
    opacity: 0;
    will-change: transform, opacity;
    transition:
        transform 1s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.6s ease,
        width 1s ease,
        border-radius 0.5s ease;
}

.text-field.active {
    transform: translate(0, 0) scale(1);
    width: 100%;
    opacity: 1;
    border-radius: 0;
}

.text-field:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

</style>

<script>
    window.addEventListener("load", () => {
        setTimeout(() => {
            document.querySelector(".text-field").classList.add("active");
        }, 100); // slight delay to allow CSS render
    });
</script>

[EatSleepProgramRepeat]

Hi! 👋

I implemented the requested animation so that the text field smoothly moves from the center to the top-left corner of the window and expands to fill the full width. The animation uses CSS transform with translate and scale, along with opacity and width transitions for a smooth effect.

I added a slight delay on page load to prevent flickering and used will-change to help browser optimization.

This is my first contribution, so please let me know if there’s anything I can improve or if you want me to adjust timing, easing, or add other features like a floating label or button.

Thanks!

<title>Animated Text Field</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

html,
body {
    height: 100%;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f7f8fc;
    overflow: hidden;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 1rem;
}

.text-field {
    position: absolute;
    top: 0;
    left: 0;
    padding: 14px 18px;
    width: 300px;
    font-size: 1.1rem;
    border: 2px solid #ccc;
    background-color: #007bff;
    border-radius: 10px;
    outline: none;
    transform: translate(50vw, 50vh) scale(0.95);
    opacity: 0;
    will-change: transform, opacity;
    transition:
        transform 1s cubic-bezier(0.77, 0, 0.175, 1),
        opacity 0.6s ease,
        width 1s ease,
        border-radius 0.5s ease;
}

.text-field.active {
    transform: translate(0, 0) scale(1);
    width: 100%;
    opacity: 1;
    border-radius: 0;
}

.text-field:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

</style>

<script>
    window.addEventListener("load", () => {
        setTimeout(() => {
            document.querySelector(".text-field").classList.add("active");
        }, 100); // slight delay to allow CSS render
    });
</script>

Thank you for contributing! Unfortunately, GemQSS is written in Java using JavaFX and does not use CSS in this manor at the moment. While your code is excellent, it is unusable in the context of this project.

Have an awesome day!
Alex

[SysTechSalihY]

I should have first verified that the project was using JavaFX. Assuming it relied on CSS was a mistake on my part, and I sincerely apologize for the confusion.
Below is the correct implementation using pure JavaFX:

package com.example;

import javafx.animation.*;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Duration;

public class TextFieldAnimation extends Application {

@Override
public void start(Stage stage) {
    TextField textField = new TextField("Type here...");
    textField.setPrefWidth(200);

    StackPane root = new StackPane(textField);
    root.setPadding(new Insets(0));
    root.setPrefSize(600, 400);
    StackPane.setAlignment(textField, Pos.CENTER);

    Scene scene = new Scene(root);
    stage.setScene(scene);
    stage.setTitle("Smooth Expanding TextField");
    stage.show();

    PauseTransition delay = new PauseTransition(Duration.seconds(1));
    delay.setOnFinished(event -> {
        // Set alignment and margin instead of translating
        StackPane.setAlignment(textField, Pos.TOP_LEFT);
        StackPane.setMargin(textField, new Insets(10, 10, 0, 10)); // top, right, bottom, left padding

        // Animate width to fill the full width (bind live to stage width minus padding)
        Timeline widthTimeline = new Timeline(
                new KeyFrame(Duration.seconds(0),
                        new KeyValue(textField.prefWidthProperty(), textField.getWidth())),
                new KeyFrame(Duration.seconds(1.5),
                        new KeyValue(textField.prefWidthProperty(),
                                stage.widthProperty().get() - 20, // 10px padding left + right
                                Interpolator.EASE_BOTH)));

        widthTimeline.play();
    });

    delay.play();
}

public static void main(String[] args) {
    launch();
}

}

[EatSleepProgramRepeat]

I should have first verified that the project was using JavaFX. Assuming it relied on CSS was a mistake on my part, and I sincerely apologize for the confusion. Below is the correct implementation using pure JavaFX:

package com.example;

import javafx.animation.*; import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.TextField; import javafx.scene.layout.StackPane; import javafx.stage.Stage; import javafx.util.Duration;

public class TextFieldAnimation extends Application {

@Override
public void start(Stage stage) {
    TextField textField = new TextField("Type here...");
    textField.setPrefWidth(200);

    StackPane root = new StackPane(textField);
    root.setPadding(new Insets(0));
    root.setPrefSize(600, 400);
    StackPane.setAlignment(textField, Pos.CENTER);

    Scene scene = new Scene(root);
    stage.setScene(scene);
    stage.setTitle("Smooth Expanding TextField");
    stage.show();

    PauseTransition delay = new PauseTransition(Duration.seconds(1));
    delay.setOnFinished(event -> {
        // Set alignment and margin instead of translating
        StackPane.setAlignment(textField, Pos.TOP_LEFT);
        StackPane.setMargin(textField, new Insets(10, 10, 0, 10)); // top, right, bottom, left padding

        // Animate width to fill the full width (bind live to stage width minus padding)
        Timeline widthTimeline = new Timeline(
                new KeyFrame(Duration.seconds(0),
                        new KeyValue(textField.prefWidthProperty(), textField.getWidth())),
                new KeyFrame(Duration.seconds(1.5),
                        new KeyValue(textField.prefWidthProperty(),
                                stage.widthProperty().get() - 20, // 10px padding left + right
                                Interpolator.EASE_BOTH)));

        widthTimeline.play();
    });

    delay.play();
}

public static void main(String[] args) {
    launch();
}

}

Salih, I really appreciate you taking the time to follow up and rewrite your code. That being said, there's a few things I need to point out to keep the repo workflow tight:

First of all, thank you very much for rewriting your code. It looks excellent, but:

• This new code doesn't extend the codebase that is already in this repo. Before writing stuff fresh, it would help to review what's already there so we don't risk conflicts like duplicate files or going off track.
• Also, instead of writing code in comments, our contribution workflow requires contributors to fork the repository and pull request to give me a better opportunity to review, test, and implement your addition.

If you're willing, could you fork the repo, integrate your changes into existing files, and then open a pull request? That way I can review it like normal and give you proper credit for your work.

I really appreciate your effort towards this project and I hope you have a great day!

EDIT: I strongly recommend that you check out CONTRIBUTING.md in the root of the project directory.