Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
qqignatqq

How do I animate a textPlugin?

Recommended Posts

Hello. I want to animate a button: 
- old text disappears
- new text appears
- reverse animation.

I used textPlugin, but I don't quite understand how to change sentences rather than individual words. At the moment it turns out that the old word hasn't disappeared yet, but the new one has already appeared and there is an overlap. 

I was already thinking about abandoning textPlugin and using onComplete: () => {document.querySelector(".btn span").innerText = "newtext"}, but then I can't do a reverse animation because the previous text is not restored.

view: https://jsfiddle.net/8nz6sw53/1/

 

And another small question:
gsap.to(".btn", {onComplete: (?elem?) => {elem.innerText = "new text"}
Is there any way to pass a ".btn" object to a function to refer to it via elem?

Link to comment
Share on other sites

Hi,

 

It seems that this could be doing what you're trying to do:

See the Pen WNpevbv by rhernando (@rhernando) on CodePen

Just take advantage of the new syntax, also no need to use a callback to automatically reverse the timeline, just use repeat: 1, yoyo and repeat delay in order to create that effect.

 

Finally if you want to pass the element to the specific callback by using the params property that each callback has:

// I recomend that for a specific element use an ID attribute instead of a class selector
const btn = document.getElementById("btn");

const myCallback = (element) => {
  console.log(element); // -> btn
};

gsap.to(btn, { x: 100, onComplete: myCallback, onCompleteParams: [btn] })

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

13 hours ago, Rodrigo said:

Finally if you want to pass the element to the specific callback by using the params property that each callback has:

ok. If I want to make a universal animation and animate different objects with it, how do I do that?

function animate(elem) {
gsap.timeline({ease: "power1.inOut",repeat: 1,yoyo: true,repeatDelay: 3})
  .to(elem, { opacity: 0, scale: 0.5, transformOrigin: "center", duration: 0.3 })
  .set(elem, { text: { value: "ДОБАВЛЕНО", delimeter: " " } })
  .to(elem, { opacity: 1, scale: 1, transformOrigin: "center", duration: 0.3 }, "<")
}

I just assumed that it would be convenient to do it this way:
declare a "tween" and pass in Restart() (or another action) the object to be animated. I mean something like this:

const tl = gsap.timeline({ease: "power1.inOut",paused: true,repeat: 1,yoyo: true,repeatDelay: 3})
  .to(?, { opacity: 0, scale: 0.5, transformOrigin: "center", duration: 0.3 })
  .set(?, { text: { value: "ДОБАВЛЕНО", delimeter: " " } })
  .to(?, { opacity: 1, scale: 1, transformOrigin: "center", duration: 0.3 });

tl.restart({object: ".target"});

p.s.

And thank you so much for the solution. I had completely forgotten about the ".set".

Link to comment
Share on other sites

Not really, while you ca create some defaults those actually doesn't work in the way you intend.

 

What you can do is create a factory function that creates and returns a GSAP instance:

const createTween = (target) => {
  return gsap.timeline({...})
  	.to(target, {...});
};

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

1 hour ago, Rodrigo said:

Happy Tweening!!!

Cool.
Last question:
Tell me, how much better is the first option than the second?

// first
let tl = gsap.timeline({paused: true, repeat: 1,yoyo: true,repeatDelay: 1})
.to(msg, 0.25, {autoAlpha: 1,y: -40,ease: Expo.inOut}, "<");

function showMsg(message) {
msg.innerText = message;
tl.restart();
}

//second
function showMsg(message) {
msg.innerText = message;
gsap.timeline({repeat: 1,yoyo: true,repeatDelay: 1})
.to(msg, 0.25, {autoAlpha: 1,y: -40,ease: Expo.inOut}, "<");
}

Or do they put the same load on the system? The first one is declared and restarted, and the second animation is prescribed immediately in the function and repeated.

Link to comment
Share on other sites

Hi,

 

In terms of performance, both are equal. None of the options is going to put a lot of stress in either the CPU or the GPU.

 

In terms of cleanliness, I'd prefer the first one, because if your GSAP instance is not going to change at any point in time, there is no need to create it over and over again, probably generating some overwrite and initial position problems. I always prefer to store my GSAP instance and use them as needed and only rely on creating GSAP instance on every event handler call when I have no other choice.

 

Happy Tweening!!!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×