cr33ksid3

@PointC that works for me. And it doesn't look like you changed the existing code on me much either so I can see what you did better. Thanks for the help. I will have to check out your tutorials as well sometime. When I have a better understanding of the basics of course...

Here is my actual project that I am trying to complete... if this helps... https://codepen.io/cr33ksid3/pen/2b6a25e3acba2ec46cdc003e1a93d39d

@mikel that looks great but I have tried to slow the rotation down by changing all the 0.5s down in the first timeline and that throws the time off with the highlight. I have tried adding a delay and/or repeatDelay to the second timeline parameters but the highlight cycles in the reverse direction at the same speed every time. I can't figure out how to slow that highlight to the same speed as the other rotation. What am I missing this time?

@PointC well... I learn something new everyday. I feel that I get great help here... but I still can't really go down each line of code, each parameter, etc... and pick out what everything is actually doing and why. I have been taking these examples and once I have them working... commenting in the code as to what everything does. I don't like "hacking" things together without really understanding how you came up with what you all did or why you all did it that way. Since you asked though... in @akapowl 's example above he has more of a revolver feel. I like @mikel 's example too but we'll use the one akapowl put together. Every time that set of small boxes rotate, instead of moving the "tomato" colored box around the orbit, how can I highlight the very top box? Like you would having a bullet enter the chamber or fire? #masterOrbit group moves the whole group in the orbit but no one box is identified in the JS to change its color. Somehow I need to identify that top box to change its color. As it rotates it could be #orbit3 or #orbit4 or #orbit 5 in the rotation... if that makes any sense. Thanks again... and continued thanks for the encouragement.

Lots to thank you all for today. @PointC ... I see that you changed/added some CSS and then practically rewrote the JS to something much shorter... Thank you. @akapowl and @mikel ... thanks for both of your help today as well. It will take some time to dissect and figure out how/why you did what you did but this gives me a much better set of examples to work from. I don't see how you all keep all this straight though... Have a fantastic day!

akapowl: So, if you look at my original Codepen above I have added svgOrigin to the timeline and have part of the rotation based on the center of that red planet. Thank you. However, I couldn't figure out how to get the boxes to rotate the opposite direction and adding transformOrigin. As you can see in the Codepen... not quite working right. mikel: thank you for the example. I will come back to this for the second phase and hopefully be able to figure out how that was done too. Appreciate all the help as always...

So, I've viewed many different CodePens that already exist on the subject but still can't seem to get this one to work correctly. I created a simple CodePen in hopes that someone will be able to help me rotate or orbit the blue boxes and their content around the central "planet". Possibly a bit more tricky in that the text contained in the box needs to remain horizontal. This is the first stage. Once I have this stage working, I'd like to work on moving those same boxes like a revolver... where possibly the top box stops for a second, then moves to the second position and so on. For now, please help me get the blue boxes and their content to orbit the red planet. There are IDs like the blue boxes "orbit1, orbit2... orbit8" and the red planet "planet"... As you can see, the first ID "orbit1" rotates but not around the red planet. I don't, yet understand the code version I tried to use and how to set orbit1 to rotate around the center of the red planet.

Argh. Its not just the GSAP that I have to grasp... its all the technical details about JS too. All the logic problems are because I have never taken any programming courses I'm afraid. I get by only by understanding just enough... I envy all of you who can look at the code someone like myself hacks together and understand why it is wrong. I have to figure this out. I'll keep going over the tutorials, courses and failed projects. Thanks for the help all of you...

mvaneijgen: I see that you drastically changed my JS code. You removed the functions and made the animations as plain tweens. Might I ask why? For instance... I tried to change the logo animation tween back to a function like this... function animLogo(){ var tl = new gsap.timeline({ paused: true }); tl.to("#logo", {duration: 3, rotate: 360,transformOrigin:"50% 50%"}); return tl; } with the addEventListener like this... logo.addEventListener("click", ()=>{ console.warn("click"); //animLogo.play(); gsap.to(animLogo()); if(animLogo.progress() == 1){ animLogo.restart(); } }); but now the click doesn't play the rotation on the logo. I wanted to use functions rather than single tweens because in the future I could see you mouseover a series of tweens in a timeline. Isn't this possible with functions and addEventListeners? Thanks again

Thank you mvaneijgen. I had a tween in there but must have removed it when I was playing around with yoyo:true. I will review your fixes and hopefully learn how to apply them further.

More details shown in CodePen but I'm trying to learn how to use functions and eventListeners for mouse interactions. I have the center white box (logo) that I can set to spin on click but I can't get it to spin again with another click. And I can't get a mouseover to work on the top left box unless I remove all the other addEventListener code. One or the other but not both. I'm missing something and not sure what so I'm turning to the community. Teach me please...

I think that is what I will have to do. I can't work anymore on it today but with the long weekend ahead, hopefully I can figure it out. To do it the way Mikel suggests, I will have to hide the SVG file inline on the HTML side rather than call it from CSS. Then animate the parts accordingly for the hover state animation. Yes, I use sprite loosely I guess. I think of a sprite as a tiny animation more or less that attracts attention. But moreover I think sprite refers to one tiny bitmap image on a sprite sheet. I just like the word sprite. Thanks for all the help guys... Have a fantastic holiday weekend (if you're American and get to celebrate)...

Sweet Mikel! I understand how to animate the SVG elements of the whole when it is inline in the HTML. What I need to do is somehow create your same animation, or a version of it to use as a hover sprite in a list menu. The animation would pause with the horse over the fence while your focus or mouse is over the navigation element. Then when you move away from the nav element with your mouse... the horse continues over the fence and fades out.

One of my original questions from the beginning has been... Do I use the "horse-jump.svg" file with elements combined or save out the individual <g> elements for #fence and #jumper as their own separate files to make this work the way I mentioned above? Right now I reference .animSprite in CSS which uses the "horse-jump.svg" as the background property. With my current design, I haven't figured out how to take that .animSprite and use the individual <g> elements in the SVG. This demo is much closer and much clearer to understand though... I'm more visual than logic I guess... Could see it in my head... just couldn't put it into code as easily...

Back to this after a long night of trial and error... I went back to the drawing board... created something a bit more simple. My goal was to get an SVG to show up in the list menu behind the link text. Should be simple right? Not for me. I did find an example that led me to another example and then another... putting all 3 together I came up with a rotating red start in this CodePen... https://codepen.io/cr33ksid3/pen/vYYoOXj And now that I have the spinning red star working... I want to go back to my original project and animate a horse jumping a fence... https://codepen.io/cr33ksid3/pen/ExxBWzN The fixed CodePen at the top of this thread now... The timeline and spinning animation work but now I need to figure out how to separate the two elements of the SVG #fence and #jumper and have them animate like I mentioned various times above... From here now... The SVG #fence (the fence portion of the combined) should fade in from below and settle into place while the #jumper (the horse and rider) should fade into place from right to left and settle into place as you hover the navigation element. Much like they spin and settle into place right now. When you remove your focus from that hover element, the #jumper should continue to the left and fade out while the #fence should drop and fade out. They currently just spin and fade out together. How would you approach this if you understand now what I am trying to achieve?

Sorry but no. Closest I could find quickly was something like this... https://codepen.io/robertamesbury/full/yaNwxy Only this person just uses CSS... mine would use GSAP of course... If you have the bounding box of the single navigation element... when you hover over that element... a tiny icon of an SVG fence (rectangle in my demo) fades in from the bottom of that element bounding box and an SVG image of a horse jumping (oval in my demo) fades in from the right to land just above the fence. I wouldn't necessarily have the black hover box behind it all but if it didn't hurt that would be fine too. As you remove your focus and not hover over the nav bounding box, the animation should proceed to move the horse icon fading off to the left followed by the fence fading off the bottom... The example above does something similar almost... as you hover over the bounding box, the stairs build up to the door and the light comes on... as you remove your focus or hover... the light turns off and the stairs retract. Only thing missing would be a word to identify the navigation over the top of the animation. I will look through my history at home. Maybe I can find the example that I saw. It was awhile back but I haven't cleared that cache yet. I will get back to this project... thanks for your patience with me...

I'm going to have to think about this one a bit more I think. Getting busy this afternoon and hard to focus... ZS: "I'm saying if you need to move the oval between navigation items (Home, News, etc.) then you'd be going a fraction of the timeline to go between each one. It'd be easier to just use tweens. " Either you understand me or I don't understand you... the animation doesn't cross the whole nav bar. The animation is a tiny sprite that appears behind the text of each nav element during the hover state. Instead of the black background color change (or along with it). One site (and I couldn't find it) had a star that scaled, faded in, and did a 360 into place when you put your mouse over the nav element. Then it spun and faded out in the opposite direction as you removed the cursor. It was quick and would repeat as you hovered over the other nav elements. They made it appear using a class I believe. I will look into the "pointer events" mentioned above. It is an annoyance right now but not as important as the rest. What I call "the whole illustration" is the "Jumping-Fences" SVG file. In that SVG are two parts... the "fence" (or rectangle) and the "jumper" (horse or oval). Is that SVG file needed in the HTML panel? As a whole or as individual SVG pieces the oval and rectangle? It seems to get in the way of the nav bar and cause issues. Or would it be better to reference the "whole" SVG in CSS to manipulate? Or even as a rectangle SVG and an oval SVG individually? I've seen other CodePens that have infographic like illustrations that have parts of that whole animated. They aren't trying to use it as a navigation hover effect though

I used a timeline because the rectangle (fence) needed to fadein from below and the oval (jumping horse) needed to fadein from the right... then hold their position and opacity while you are hovering over that nav element. Then when you release the hover the oval should fadeout to the left and the rectangle fadeout moving down. All behind the text of the nav element. Are you saying to use TweenMax because each animated sequence appears one after the other and not two or more animations at the same time (needing two or more timelines)? I guess I'm not sure why you're suggesting TweenMax instead of TimelineMax. And why would the animations mess with the last navigation element's (About link) hover state? Or is that a CSS issue that needs to be fixed? Oh, and my SVG exists right now in the HTML panel. Another thing I'm not sure about is do I separate each piece of the current SVG into their own parts? Rather than call the whole illustration and just move the pieces? If I separated them, I could call them from CSS and remove the group from HTML. I thought it was best to keep the illustration together and just manipulate the pieces. However, I am not sure how to use but hide them from site in the HTML panel since I am only going to use them for the navigation. So many questions... Thanks for the quick reply

I've seen this effect on various sites in the past. I'm sure it can be done with GSAP... I just haven't been able to make it work yet. So, I have a list menu and I have an SVG set using TimeLineMax. The goal here is to get the animation you see to animate and appear upon hover... pause while you are still on the nav element... then have the oval move forward and fade out while the rectangle drops and fades out as well. Sounds easy right? Not for me yet. I also have some goofy CSS thing going on with the last nav element not showing the hover due to the SVG animation. I've tried clearfix but that didn't fix it. Help this old dog learning new tricks please... much appreciated... Graphics are quick and dirty right now... eventually the rectangle image will be a fence and the oval will be a horse jumping... its for my wife

I've just been modifying the demo in this thread. I got it to work with what you suggested. It isn't the prettiest but it works. I will learn more from here...Thanks again for the patience and direction...

I was trying to be a bit more efficient with the SVG. If I understand you correctly... I need to duplicate each polygon and give them their own unique name in order to control them separately from GSAP. Correct me if I'm wrong.

Zach: Slightly off topic but related to this project of mine... I have polygons that I want to have criss cross each other. There is a large one and a small one. I need to have two of the large one, at the same time, criss cross on the banner like a flash or glint. Same for the small one but at a different time. I thought I could do something like... var glintSm1 = document.querySelector('#aeAd-glint-sm'); var glintSm2 = document.querySelector('#aeAd-glint-sm'); var glintLg1 = document.querySelector('#aeAd-glint-lg'); var glintLg2 = document.querySelector('#aeAd-glint-lg'); ...to make 4 different variables from the two polygons. However, when I try to use them, it seems like I am only animating them together even though one is using the To and the other the From Tween... Has this been solved somewhere that you know of? I couldn't find an example...

Well son of a... I had tried that before and it didn't work... I guess maybe the stars have aligned finally... either that or I had something else that was holding it back. I figured it was probably just something simple that I was missing. Thanks again Zach...

Any gurus out there figure out how to make a vector SVG scale with whatever size you make the browser window? I've tried a few things regarding hero or slider banners but they just don't seem to work like I would expect. What I expect is to have this animation and graphics all proportionally size depending on the size of the browser window... or media query that is thrown at it. And without manipulating all the elements of the SVG for each size. I would think this is available somewhere but I just have not found it yet. Point me in the right direction and/or tell me what I need to do to accomplish that. I'm new to animated SVG and GSAP so be gentle. Thanks in advance...

Zach: .set() did the trick. Seems like a small accomplishment but that has been bugging me all afternoon. Now I can move on to animating the elements within each ad side. Thanks again for the quick response and help...