Jump to content
GreenSock

JoeH

Members
  • Posts

    54
  • Joined

  • Last visited

Everything posted by JoeH

  1. Thanks, Sometimes you can't see things for looking for them!
  2. Hi all, I had this working previous but for some reason it won't anymore, I'm completely stuck on what is wrong with it. I am basically just starting a reversing a timeline on mouse in and mouse out. The error is "TypeError: logoBreak.start is not a function" Here is my code, thanks for any help. $(function () { var broken_1 = { x: 2 , y: -8, rotation: -10 }, broken_2 = { x: -2 , y: 8 }, broken_3 = { x: 8 , y: -8, rotation: 8 }, broken_4 = { x: -5 , y: 0, rotation: -6 }, broken_5 = { x: 3 , y: 4, rotation: -14 }, broken_6 = { x: 13 , y: 3, rotation: -5 }, broken_7 = { x: 10 , y: -1, rotation: 4 }; var logoBreak = gsap.timeline({ paused: true }) .to("#logo #part-4", 2, broken_4) .to("#logo #part-3", 2, broken_3, '-=2') .to("#logo #part-2", 2, broken_2, '-=2') .to("#logo #part-1", 2, broken_1, '-=2') .to("#logo #part-5", 2, broken_5, '-=2') .to("#logo #part-7", 2, broken_7, '-=2') .to("#logo #part-6", 2, broken_6, '-=2'); $('#logo-wrapper').hover(function() { logoBreak.reverse(); }, function() { logoBreak.start(); }); });
  3. Wow perfect, Thanks so much for the quick reply. Excited to get started! I've got a great project coming up which will take me a few months to build but will post here on the forum when complete. Thanks again.
  4. Hi all, new member here. I am just wondering if I should use GSAP for my requirements here, I'm pretty sure I can but just wanted to check and ask for any pointers I should take into account or which plugins I should use. I basically want to animate some SVG's based upon the mouse position. So imagine there is a logo made up of several SVG shapes. I wish to animate these so that they move apart/away from each other, but they should then also animate back into the original position - they will not be changing shape themselves, only moving and rotating. However I want to control the distance they are from each other depending upon the users mouse position. So if the users mouse is in the center of the screen/logo position the animation will start and reach its end point, i.e. the logo parts will have moved away from the original position. Then as the user moves their mouse away from this centre point then the distance the shapes are away from each other should reduce until an arbitrary point on the page where the logo is back to normal, and the same when the users mouse moves back towards the centre point - the shapes should start to move apart again. But never to full extent unless the users mouse is within a certain distance from this center point. Excuse my noobness I am just learning how to use GSAP. Thanks
×