TextPlugin and animations don't work on reload/bugg

[Gr0x]

Hello! Im kinda new here and hope someone can help me with this animation bug I have.

 

Textplugin: I want a empty div that writes out "Hello World!", wish it worked first time. Then i randomly press "ctrl + R" in my Chrome, and now it dont work at all.

 

Bouncing mouse: It works when ever it want to work.. So basically when i "yarn start" my project the bounce doesn't work. But when i go in to the component file and edit the code

gsap.to(".HW_context", {duration: 2, text: "Hello World!", ease: "none"});

to this code (below) and save it, i get an error (obviously), removes the "1" from the code "gsap.t1o" and then the mouse start bouncing.. 

gsap.t1o(".HW_context", {duration: 2, text: "Hello World!", ease: "none"});

 

[Cassie]

Hi there! I can't see the class .HW_context anywhere. Maybe you're targeting an element that doesn't exist?

We can usually help more effectively if you provide a minimal demo, codepen is great for this!

Here's a post explaining how.

[Gr0x]

Hello there! 

 

You have it on picture nr 2 row 12.

 

i can try to set 2 code pens for each issue. 😃

[Gr0x]

So, here is the Textplugin issue: 

See the Pen yLgmQOq by Gr0xen (@Gr0xen) on CodePen

 

And here is the bounceing issue: 

See the Pen jOygQVx by Gr0xen (@Gr0xen) on CodePen

[Cassie]

Ah ok, textplugin issue is because you've got a fullstop in your class name. 

<div class=".HW_context" id="typewriter"></div

 

You also don't need to 'import' in codepen. I took that line out and the second pen seems to be working fine! Could you maybe explain the issue again for me differently?

[Gr0x]

What do you mean with 'fullstop' ? oh! Yeah, i saw that i had a "." in the Class.. Now it's removed and still doesnt work..

 

What did you change to make the text work?

 

 

oh, okey. But i have to do it in react.. 

The issue is that when i start my project (yarn start) in the terminal, the mouse is still (no animations), but when i manipulate an error in the code (for an instance instead of "gsap.fromTo" i write "gsap.fromT1o" (just to get an error.) Then i remove the "1" in the code and the animation starts to work as long as i dont refresh the page. 

Edited May 3, 2021 by Gr0x
saw the misspelling in the class

[Cassie]

Yeah, keep your imports in for react. You just don't need them in that codepen.

Here you go, I took out the . and the import and it's a ok!

See the Pen 5b99b92a0fe5096e26ba07ab316e19c7 by cassie-codes (@cassie-codes) on CodePen

[Cassie]

23 minutes ago, Gr0x said:

The issue is that when i start my project (yarn start) in the terminal, the mouse is still (no animations), but when i manipulate an error in the code (for an instance instead of "gsap.fromTo" i write "gsap.fromT1o" (just to get an error.) Then i remove the "1" in the code and the animation starts to work as long as i dont refresh the page. 

Afraid this sounds like something funny happening in your setup pal.

I don't think I can help here I'm afraid. Your GSAP code is spot on.

[OSUblake]

Your mouse image isn't in the DOM when your gsap code runs. You need to put your animation code inside useEffect functions and use refs instead of query strings.

 

Tutorial using ScrollTrigger, but the concepts are still the same.

https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react

 

[Cassie]

Ah, Thanks Blake!

[Gr0x]

Hi Blake! 😃

 

I've been sitting with this issue now and been following the: https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react

But i really cant make it work.. This is the "new" component:

 

import mouse from '../assets/mouse-scroll.svg';

import { useRef, useEffect } from "react";

import gsap from "gsap";

 

function Mouse() {

 

const mouse_bounce = useRef(null);

  useEffect(() => {

    const element = mouse_bounce.current;

    gsap.fromTo(

      element.querySelector("mouse-icon"),

      {

        y: -30,

      },

      {

            duration: 0.7,

            delay: 2,

            y:0,

            ease:"circ.in",

            repeat:-1,

            yoyo:true

        },

    );

  }, []);

 

return (

<div className="mouse-div">

<img ref={mouse_bounce} id="mouse-icon" className="mouse-img" src={mouse} alt="mouse-scroll" />

</div>   

);

}

 

export default Mouse;

 

I really dont have any clue what i can do now to make it work.. I appreciate all the help i can get

[Cassie]

Heya, 

The target you're passing to the mouse bounce tween is currently targeting nothing. querySelector needs a valid CSS selector string to find the target.

eg, to target an ID -

 document.querySelector("#mouse-icon")

 

Also, (and this is cool) GSAP uses querySelector under the hood anyway, so you can do away with that method entirely. This....

gsap.fromTo(element.querySelector("mouse-icon")),
 {
  y: -30
 },
 {
  duration: 0.7,
  delay: 2,
  y: 0,
  ease: "circ.in",
  repeat: -1,
  yoyo: true
 }
);

becomes this...

gsap.fromTo("#mouse-icon"),
 {
  y: -30
 },
 {
  duration: 0.7,
  delay: 2,
  y: 0,
  ease: "circ.in",
  repeat: -1,
  yoyo: true
 }
);

You also don't need a fromTo tween as in your example the mouse is animating 'to' it's initial value of 0 anyway. I find that most of the time you can accomplish what you need with either from or to! 

gsap.to("#mouse-icon"),
 {
  duration: 0.7,
  delay: 2,
  y: -30
  ease: "circ.in",
  repeat: -1,
  yoyo: true
 }
);

Hope this helps.
 

[Gr0x]

Cassie & Blake, thank you so much for your time and help! 

 

I made it work now, thanks to your help  

 

social-distance-hugs!!! ❤️ 

[Cassie]

Wooo! *social-distanced-high-five*