JoeH

Got this working as such $(function () { const master = gsap.timeline(); const logoA = timelines.logo(); const introA = timelines.intro(); master .add(introA.play()) .add(function () { // play animation initially. logoA.play(); // Add hover event listener. $('#logo-wrapping').hover(function() { logoA.reverse(); }, function () { logoA.play(); }); }); });

Ok so I think the problem is that the timeline being played through the master timeline is separate from the one I try to play through my hover function. I'm not skilled enough yet to understand why. If I remove the .add(logoA.play()); from the master timeline it then works apart from I need to trigger the animation by creating a mouseOut event.

Hi, I have 2 timelines which play after one another, but then at the end of the 2nd timeline I want to enable a hover effect so that the 2nd timeline reverses and plays based on a mouse hover event. I have the hover effect working on it's own but it just jumps from the start of the timeline to the end when I chain everything together. Here are my 2 timelines const introAnimation = element => { return gsap.timeline({paused: true}) .to("#logo #part-1", 4, {opacity: 0.2, delay: 2}) .to("#logo #part-7", 4, {opacity: 0.2}, '-=4') .to("#logo #part-3", 4, {opacity: 0.2}, '-=4') .to("#logo #part-4", 4, {opacity: 0.2}, '-=4') .to("#logo #part-5", 4, {opacity: 0.2}, '-=4') .to("#logo #part-6", 4, {opacity: 0.2}, '-=4') .to("#logo #part-2", 4, {opacity: 0.2}, '-=4') .to("#logo #part-2", 4, {opacity: 0.4}) .to("#logo #part-2", 8, {rotation: 2000, transformOrigin: "50% 50%", ease: "none"}, '-=8') .to("#logo #part-1", 4, {x: 0, y: 0, rotation: 0, opacity: 1}) .to("#logo #part-7", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4') .to("#logo #part-3", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4') .to("#logo #part-4", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4') .to("#logo #part-5", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4') .to("#logo #part-6", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4') .to("#logo #part-2", 4, {x: 0, y: 0, rotation: 0, opacity: 0.2}, '-=4') .to("#logo #part-2", 3, {opacity: 1}, '-=2') .to("#tv li", 0.95, {transform: "scaleY(1)", transformOrigin: "bottom right", ease: "expo.inOut"}) .set("#logo-wrapping", {width: '40%'}, '-=0.2') .set("#page", {backgroundColor: 'rgb(15, 59, 65)', delay: 1}, '-=0.2') .to("#tv li", 0.95, {transform: "scaleY(0)", transformOrigin: "bottom right", ease: "expo.inOut"}, '-=0.20') }; const logoAnimation = element => { return gsap.timeline({paused: true}) .to("#logo #part-4", {x: -5, y: 0, rotation: -6, duration: 2}) .to("#logo #part-3", {x: 8, y: -8, rotation: 8, duration: 2}, '-=2') .to("#logo #part-2", {x: -2, y: 8, duration: 2}, '-=2') .to("#logo #part-1", {x: 2, y: -8, rotation: -10, duration: 2}, '-=2') .to("#logo #part-5", {x: 3, y: 4, rotation: -14, duration: 2}, '-=2') .to("#logo #part-7", {x: 10, y: -1, rotation: 4, duration: 2}, '-=2') .to("#logo #part-6", {x: 13, y: 3, rotation: -5, duration: 2}, '-=2') .set('#logo-wrapping', {css: {pointerEvents:"all"}}); }; And then below these is my master timeline, as well as my hover event. $(function () { const master = gsap.timeline(); var logoA = logoAnimation(); var introA = introAnimation(); master .add(introA.play()) .add(logoA.play()); $('#logo-wrapping').hover(function() { logoA.play(); }, function () { logoA.reverse(); }); }); I'm probably doing something fundamentally wrong, but I couldn't find much information online about linking up timelines together, or maybe my javascript skills are not that great yet!

Thanks, Sometimes you can't see things for looking for them!

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(); }); });

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.

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