Is it possible to do a FadeTransition to sides? - animation

Question

I would like to know if there is a way to do a FadeTransition from the right or left or even top of bottom kind of like the example here:

Answer 1

Style the label with a text fill set to a linear gradient, and change the stops of the linear gradient in a timeline.
Here's a basic example (click on "Fading Label" to see the animation). A similar approach should work for fading out.
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.util.Duration;
public class TextFade extends Application {
#Override
public void start(Stage primaryStage) {
Label label = new Label("Fading label:");
Label fadingLabel = new Label("text fades in and out");
DoubleProperty startFade = new SimpleDoubleProperty(0);
DoubleProperty endFade = new SimpleDoubleProperty(0);
fadingLabel.styleProperty().bind(Bindings.createStringBinding(() -> String.format(
"-fx-text-fill: linear-gradient(to right, -fx-text-background-color 0%%, -fx-text-background-color %f%%, transparent %f%%, transparent 100%%);",
startFade.get()*100, endFade.get()*100
), startFade, endFade));
HBox root = new HBox(2, label, fadingLabel);
Timeline timeline = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(startFade, 0), new KeyValue(endFade, 0)),
new KeyFrame(Duration.seconds(1.0/3.0), new KeyValue(startFade, 0)),
new KeyFrame(Duration.seconds(2.0/3.0), new KeyValue(endFade, 1)),
new KeyFrame(Duration.seconds(1), new KeyValue(startFade, 1)));
label.setOnMouseClicked(e -> timeline.play());
Scene scene = new Scene(root, 400, 400);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}