Search the Community
Showing results for tags 'mouse events'.
Found 2 results
-
I'm a newbie to Web Development and in the process of learning if GSAP can fill my animation needs. I am pretty sure it can. This is my second post. In my first post, I mention I am currently taking an E-course and I am in the middle of creating a javascript reaction tester application: http://codepen.io/KerryRuddock/pen/rLJPkq To view the codepen correctly, please change the View to Full Page. Click Start. A random sized and colored ball rotates around the screen based on a set of CSS keyframes: twirl This codepen is HTML, CSS and JS only, no GSAP just yet. The code is a collection of tests in CSS and Javascript. Not all of the code is used within my application, I am experimenting. Apologies for any code read-ability issues. I need to know if I can do the following with GSAP and perhaps a hint in the direction to go in. In this topic, I use the word 'tweened' to cover any object that is the middle of animation, transition, transform, keyframes, and any other time/movement speciality that I may have missed.. 1) I will be changing the reaction tester animation to GSAP I hope the switching over goes smooth. My goal is to have a 'tweened' object collision detection checking in real-time. The collision may be against a border or perhaps another 'tweened' object. I need to perform real-time interval checks of the shapes x,y position of the object during a 'tween'. Can I do this? On a mouse-event, ie. object.click(), I need to kill any tween any progress. Can I do this? On a collision-event, I need to either be-able to either a) kill 1 or more tweens and start new tweens, or modify the existing tween that is currently running. Am I able to do either a or b or both? Thanks for your time, Looking forward to your feedback.
-
I have an SVG with a number of drawn paths/lines. How would I go about giving them a very subtle, minor movement effect in the same direction as the cursor that is being dragged across them? For example, if you move your mouse through the lines on the Codepen, they gently and briefly move downward, then return to their original position - almost as if a light breeze had hit them. But how can I make them go whichever direction the mouse passes through? Or maybe even something cooler, like the particles.js repulsion effect? I'm not looking for an entire code solution; just a helping hand to get me started. I'll be updating my Codepen slowly as I work out how to go about this. Thank you in advance.
