How can I prevent numbers and other text from animating

[gsapmonkey]

Hi,

I was trying to get text changing on scroll. But when I try this code, the numbers in the text are also incrementing and also there is some weird text replacement happening with rgba(200,200,200,0)

 

Expected text: 

2. Prepare for accelerated ramp-up, with transparent roadmap for staffing, knowledge transfer, team integration and performance KPIs.

 

Actual Text that is showing up:

1.7853 Prepare for accelerated ramp-up, with rgba(200,200,200,0) roadmap for staffing, knowledge transfer, team integration and performance KPIs.

 

Can someone please help how to fix this issue?  Codepen attached.

 

Thanks

See the Pen wvZdYvo by codingchefs (@codingchefs) on CodePen

[Cassie]

This is quite an amusing one. 😂 So innerHTML isn't technically an animatable value, it's either a string or nothing. Animatable values are things that can gradually change from one value to another, like numbers or percentages.

e.g.

 

You can rotate from. 10 to 360 easily as all the values in between 10 and 360 are valid 

You can't animate between backgroundImage: "none" and backgroundImage: url("myImage.gif"); because there aren't any intermediary states, you either have an image or you don't.

However - GSAP does some clever stuff where it recognises complex strings and tries to animate between them for some CSS properties. I guess here you're passing GSAP a string and asking it to animate it. Obviously 1 is animating to 2 because that maps, but also the word "transparent" is something that you can animate with GSAP too, as that's used in CSS to represent a colour, and ultimately an rgba value.. 😂

This made me laugh but TLDR - it's not the right way to approach this.

I assume you just want to set new text on scroll? You could do that with a set tween? If you want to actually tween the text you can use GSAP's text plugin for a more typewriter-esque effect.

 

// instantly set the new text
gsap.set("h1", {
  innerHTML:
    "Prepare for accelerated ramp-up, with transparent roadmap for staffing, knowledge transfer, team integration and performance KPIs.",
});

// using text plugin?
// replaces yourElement's text with "This is the new text" over the course of 2 seconds
gsap.to(yourElement, {
  duration: 2,
  text: "This is the new text",
  ease: "none",
});

 

Alternatively if you want to fade out one block of text for another, you'll need to layer the elements on top of each other and use opacity to fade them.

Hope this helps!

[gsapmonkey]

Hi Cassie,

 

haha...beginner's mistakes. 

 

but for my requirement, text plugin works good. For the image I am just making sure I dont have numbers in the image url or is there another plugin that can switch the image? 

 

thank you so much, that was very helpful.

[GreenSock]

1 hour ago, gsapmonkey said:

but for my requirement, text plugin works good. For the image I am just making sure I dont have numbers in the image url or is there another plugin that can switch the image? 

I read that a few times and I'm still fuzzy about what exactly you're trying to do. Can you clarify and make sure you include a minimal demo that clearly illustrates the issue regarding the image?

[gsapmonkey]

The requirement is whenever I scroll, the text, image should keep on changing until all the text and images in my array are done. 
For the text, I am using textPlugin as suggested above.

For image, I am just using regular code thought it would not work if there is a number in the path of the image

 

tl
  .to(innerSectionSelector + ' .section-img img', {
    attr: {
      src: currentSection.imgSrc
    },
    duration: 1,
    delay: i * solutionsSpacing
  }, 0);

 

ex: 

imgSrc: '/wp-content/uploads/2024/03/1.svg',

In the above case, it tries to find 1.234.svg as I scroll

[GreenSock]

I don't see any of that code in your demo. Am I missing something? 

 

Like Cassie said, you're asking GSAP to tween that image.src attribute which doesn't make any sense here. GSAP is doing what you're asking it to do - finding the numbers in that attribute string and animating between those, but of course that's not what you want. Why are you even setting a duration there - what exactly are you expecting to happen over the course of 1 second? 

 

You can certainly use a .set() to just set the attribute to a new value. It just doesn't make any sense to tween that. 

 

If you still need help, please make sure you post a minimal demo (like a CodePen) that clearly illustrates the issue and we'd be happy to answer any GSAP-specific questions.