[ScrollTrigger - trigger all elements on the page for text animation]

11 minutes ago, akapowl said:

 

Hello @soma

That probably is because you are feeding the NodeList you stored in your triggerElement variable as the trigger-element into each of your ScrollTriggers - the NodeList is not a single element, so when you do that it will probably always only just refer to that first element in that NodeList and take that as the trigger in every case, which would result in the behaviour you described. So I would say this is more of a logic problem you are having, not really related to GSAP.

 

Instead you'll probably want to get that one specific element that you need as the trigger in every specific case of the each-loop. I don't know how you have things set up with regard to your html markup, so I can't really give you any solid advice on that unless you add a minimal demo of some sorts, but if the trigger is a parent of your data-txt-wrapper, in jQuery you'll want to use $(this).parent(selector) or maybe $(this).closest(selector) and if it is a child, use $(this).find(selector) siumilar to what you did for the listTxt

 

Maybe this will help already - if it doesn't, please add a minimal demo that makes it easier to help.

 

Hi!
Thanks! This info solved my problem! Now it works well. 

[ScrollTrigger - trigger all elements on the page for text animation]

Hi!

I work on a function that should start the text animation when the trigger element is in viewport, but I would like to make it reusable. I hope I think right about these problem, just can't solve it. 

I would like to use data attributes to set trigger elements for SrcollTrigger. But with the following code, the first trigger will trigger all the texts on the page and play at the same time.

I have a TextSplitter so the .title-split .char are the splitted characters.

I should find all the data-txt-wrapper elements, then start the text animation when the data-trigger element step into the viewport.

Is it possible somehow? 

Thanks a lot!

    // Timeline
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top 30%"
      }
    });
    tl.from(listTxt, {
      ...
    });
  });
}

 

[Splittext animation and translation]

Yes, unfortunately the Weglot dosen't give too much possibility
What about this? https://greensock.com/docs/v2/Utilities/SplitText/revert()

Can it help? 

[Splittext animation and translation]

Yeah I use it now, but sometimes works sometimes not...
Is it possible to set a delay to the text splitting? 

[Splittext animation and translation]

19 hours ago, mvaneijgen said:

@soma also never used Weglot, but are there maybe callback events you get from them on which you can hook the SplitText logic? Eg: 

 

// This is pseudo code
weglot({
  hasDoneTranslating: () => {
    // Weglot has done it's thing now animate my text
    const split = new SplitText(yourElement);
  }
})

 

Hi! Thanks for your answer!
There are some. I used the language changed and the init ones. But I had to use timeout to give some time for the translation, but I got this warning

[Violation] 'setTimeout' handler took XXms
[Violation] Forced reflow while executing JavaScript took XXms

And in Chrome the translation works bad. 

[Splittext animation and translation]

12 hours ago, GreenSock said:

Hi @soma. I'm totally unfamiliar with Weglot. We're happy to answer any GSAP-specific questions here, but unfortunately we can't offer much advice related to Weglot or Webflow. 🤷‍♂️

 

I'm curious how you're using SplitText without a Club GreenSock membership. That's a members-only plugin. 

Hi, we have a company account (club member), and I have a personal (free).

[Splittext animation and translation]

Hi!
I used Weglot for a client project and I realized that the animated texts aren't translated. 
These are Splittext JS edited texts, but each character in the animation is in an individual <div> element which mean that it won't be recognized as one word in Weglot. Is there a solutions for this?

You can test here: puto.webflow.io
Thanks 🙏🏻

[Can I make my code in a more elegant way?]

8 minutes ago, PointC said:

Hi @soma  

 

Here's a nice little function @GreenSock showed me when I was learning about the new quickTo. I was using a Draggable, but I've modified it a tiny bit to listen for your mousemove event.

 

 

 

 

Happy tweening.

 

Hi Craig!
That's awesome, thanks! I have to sharpen my JS skills... 😅

[Can I make my code in a more elegant way?]

Hi!
I've made a simple follow cursor animation for my current project. I think I could make it better or shorter (maybe with a forEach), but I don't know how. Can somebody help me with this? 

Thanks

See the Pen vYdRNQb by szsoma (@szsoma) on CodePen

[Targeting individual svg elements for hover effect]

Hi!

Thanks for the quick answer. I think I just overcomplicated this issue 😅

[Targeting individual svg elements for hover effect]

Hi!
I've made an SVG image with several different objects. The interaction would be this:
- If you hover an element there would be a small effect on this element. (a scale, rotate and move depending on the mouse position.)
- If you hover out the element get back to the original position.
Currently, I have a problem with the targeting, the effect animates all the elements in the SVG. ...And some with the mouse position tracking:)
How can I solve this? 
Thanks for the help in advance

See the Pen ExQWZem by szsoma (@szsoma) on CodePen