Create "word flying effect"

How To
1

Hey guys,
I know the title isn’t very meaningful, but I don’t know how to describe it better.

How can i create this effect like on the website? ( flying words)
Have the GSAP/JS code but dont know how i can add this via bricksforge.

Maybe someone can help me?

var words = document.querySelectorAll(".heading-word");
var animheading = gsap.timeline({
repeat: -1, defaults: { duration: 1, ease: "elastic.out(1,1)" }});

words.forEach(function(element, index) {
    animheading.fromTo(element,
    { yPercent: 100, opacity: 0 },
    { yPercasdent: 0, opacity: 1 })
    
    animheading.to(element,
    { opacity: 0, ease: "none", delay: 1 })
})

Thanks a lot.

2

Hi! :slight_smile:

This would be possible with Bricksforge 0.9.3, but even better with the coming 0.9.4. Then you can use the “From To” method, which would make things easier here. In the current version, only “To” and “From” are available.

For now, you have two possibilities:

  1. Create a timeline with multiple “To”-Methods, selecting .heading-word:nth-child(n) as trigger to create your animations for each text element in the row

  2. Easier: Just add an “Code” element to the builder canvas, including your gsap code in a “DOMContentLoaded” event listener. Gsap will be available there. And your code will work as expected.

With 0.9.4, you’ll be able create this functionality very easily inside the panel.

Have fun :slight_smile:

1 Like
3

Awesome thank you very much for your kind answer.

I know its hard to say but any ETA date for 0.9.4? :wink:

1 Like
4

0.9.4 is long out, but I’m still confused as to how to easily add repeat: -1 value to the entire timeline.

I see you can add a custom event on a trigger that "restart"s a GSAP timeline:

Untitled
Untitled1936×1019 113 KB

Is that how we should be doing it?

5

@Daniele Unfortunately, I can’t manage to implement it.
Do you have a simple example/video where you can see how it is implemented in bricksforge?

Thank you very much.