Gr0x Posted May 3, 2021 Share Posted May 3, 2021 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"}); Link to comment Share on other sites More sharing options...
Cassie Posted May 3, 2021 Share Posted May 3, 2021 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. 2 Link to comment Share on other sites More sharing options...
Gr0x Posted May 3, 2021 Author Share Posted May 3, 2021 Hello there! You have it on picture nr 2 row 12. i can try to set 2 code pens for each issue. 😃 Link to comment Share on other sites More sharing options...
Gr0x Posted May 3, 2021 Author Share Posted May 3, 2021 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 3, 2021 Share Posted May 3, 2021 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? 3 Link to comment Share on other sites More sharing options...
Gr0x Posted May 3, 2021 Author Share Posted May 3, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
Cassie Posted May 3, 2021 Share Posted May 3, 2021 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 3, 2021 Share Posted May 3, 2021 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. 2 Link to comment Share on other sites More sharing options...
OSUblake Posted May 3, 2021 Share Posted May 3, 2021 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 4 Link to comment Share on other sites More sharing options...
Cassie Posted May 3, 2021 Share Posted May 3, 2021 Ah, Thanks Blake! 2 Link to comment Share on other sites More sharing options...
Gr0x Posted May 4, 2021 Author Share Posted May 4, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted May 4, 2021 Share Posted May 4, 2021 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. 3 Link to comment Share on other sites More sharing options...
Gr0x Posted May 4, 2021 Author Share Posted May 4, 2021 Cassie & Blake, thank you so much for your time and help! I made it work now, thanks to your help social-distance-hugs!!! ❤️ 3 Link to comment Share on other sites More sharing options...
Cassie Posted May 4, 2021 Share Posted May 4, 2021 Wooo! *social-distanced-high-five* 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now