redtoad Posted January 3, 2020 Share Posted January 3, 2020 I don't even know if I can do this but I've looked at a bazillion examples. If I get this bit finished then I'm mostly done but the tweaking. I need for my #flying group to follow my mouse. Feel free to tell me I'm goofy/doing something wrong. I have #flying as an svg group because otherwise it can't interact with my triangles. if I make it an svg on its own there is no overlapping them. I tried nesting svgs and then gsap wouldn't work. Please can anyone explain my issue? See the Pen NWPwzKV by redtoad (@redtoad) on CodePen Link to comment Share on other sites More sharing options...
redtoad Posted January 3, 2020 Author Share Posted January 3, 2020 ok I think I have figured out codepen, apologies. also I need the mouse follow to happen AFTER everything else executes. Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 3, 2020 Share Posted January 3, 2020 Hi @redtoad, You aren't including gsap.js, or registering your plugins in your CodePen, so I wasn't able to see anything happening. For mouse follows, this is a good example: See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen More details in the docs for the quickSetter here: https://greensock.com/docs/v3/GSAP/gsap.quickSetter() 4 Link to comment Share on other sites More sharing options...
redtoad Posted January 3, 2020 Author Share Posted January 3, 2020 right @elegantseagulls thanks. I need a group within an svg to be my mouse follow element. Think I've figured out codepen now. Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 3, 2020 Share Posted January 3, 2020 @redtoad It might be a caching issue, but is your updated CodePen at the same link? I'm still seeing the same issues. Also, my gut says that it's going to be hard on performance to do a mouse follow animation inside the SVG, as that can't be hardware accelerated. Also, just looking at the GSAP code, from what I see: left and top values won't be recognized in SVG for positioning of you cicada (an SVG group) so you'll want to use x and y instead. 3 Link to comment Share on other sites More sharing options...
redtoad Posted January 3, 2020 Author Share Posted January 3, 2020 ok will try that thank you. No the codepen isnt the same link. I edited the pen. Link to comment Share on other sites More sharing options...
redtoad Posted January 3, 2020 Author Share Posted January 3, 2020 the quickset followmouse thing doesnt have left and top. I replaced my code with it and updated the variables and now I cannot see my cicada. at all. No console error. my animation on that element also isn't firing (that I can see, I suspect it is firing off the screen). Link to comment Share on other sites More sharing options...
mikel Posted January 3, 2020 Share Posted January 3, 2020 Hey @redtoad, Hopefully it helps //calls startListener() after 5 second: gsap.delayedCall(5, startListener); function startListener() { window.addEventListener("mousemove", e => { mouse.x = e.x; mouse.y = e.y; }); } //or use an onComplete in your animation See the Pen mdyqKaY by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
redtoad Posted January 3, 2020 Author Share Posted January 3, 2020 thanks @Mikel ...no dice. I've tried a method based off another pen on here and now can at least get the cicada to react. There's an offset I gotta get rid of. I need him to hover over the triangles but he won't in this example...besides sort of flying away. I'm going to go eat and come back to it. going to be a long night. See the Pen vYEWrMM by redtoad (@redtoad) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 6, 2020 Share Posted January 6, 2020 The offset is likely because of the positioning of the bug in the SVG. If you change its default orientation using a vector editor to have whatever part you want the mouse to be over at 0,0 I'm betting the offset will go away. 1 Link to comment Share on other sites More sharing options...
redtoad Posted January 6, 2020 Author Share Posted January 6, 2020 thanks @ZachSaucier, I'll look at that! 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