ThePixelPixie

Annnnnd I discovered that the button hover effect seems to become unstable after cycling forward through the slides once, and then trying to navigate backwards 🤦‍♀️ Every time I think I've got it all straightened out...{sigh}

Hi there, Sure. The error is with line 134 in this code, but on my staging site (I don't get any console errors with it in CodePen though, which is why I've assumed it's something to do with my non-CodePen version). https://codepen.io/ThePixelPixie/pen/mdoPPJB

@PointC - argh...I have no idea why that might be happening. I never would have tried clicking them so fast. I'm not even sure how to address it...thanks for the heads-up.

nevermind. My membership had expired and I didn't realize it. So sorry.

Ok, so I didn't have this error in my CodePen, so I'm guessing it has to do with how I'm calling the script on my staging site? I *think* I have a paid membership? I'm able to generate a token in my account page, but I don't know how to use it. The error I'm getting on my staging site is this: "Invalid property easeParams set to Array [1.1, 0.5] Missing plugin? gsap.registerPlugin()" When I saw that I thought maybe the easing I'm using isn't part of gsap.min (though it's just "elastic.out" for the animation with those parameters, so I *thought* that was part of gsap.min?), so I added EasePack and CustomEase to my scripts. But I'm still getting the error. Did my membership lapse? Surely I'm missing something super obvious here...

@Cassie - your suggestion to isolate out the different elements actually helped me to be able to rework the code from scratch. It now all works well. So, even though y'all weren't able to *directly* help me out, you still did help The CodePen link above should now be a full-working example. Thank you again!

Much appreciated, both of you. I do understand that it's a lot of code to go through. I'll see if I can figure out why the behavior with the arrows is different than with clicking the dots themselves. Thank you!

I guess I'm just not sure how to reduce the example to only the part causing an issue, since it's all supposed to work together. Y'know? I kind of thought folks would be able to see the whole, find the parts that affect this animation, and see the problem better than I can. I'm fairly sure the problems lies in the initDots, updateDots(), animateDots, function updatePos(), and the function updateDotPositions() parts of the code. Does that help at all for slogging through lines?

Interesting #2: I only get my zoom-in effect with slides 1, 2 and 6. Something's interfering with it for the other slides, and I'm not sure what.

Interesting...I just noticed that the .dots-current div doesn't bounce off to the right when using the arrows. Only when clicking on the dots themselves...

Hi, I've been having fun customizing a couple of different scripts I've found. The carousel itself is inspired by this. And the nav dots are adapted (to the best of my limited ability) from this. I think I'm getting really close with it, but the .dots-current keeps bouncing all the way to the right before going back and *almost* landing on top of the current dot. I've also just got a tired brain and haven't figured out how to make my nav arrows also trigger the dots animation at the right time. Any help that can be afforded would be massively appreciated. Edit: And I just realized that somewhere along the way this evening, I've lost the cool hover effect over the "link here" button that's in the original tympanus example. {sigh} I have no idea where I lost it. For some reason in init() I had changed gsap to .to, instead of .set. When I changed it back, my hover effect returned

My ultimate goal is to have the morphing reveal navigation, but I want the #menu path to fill the viewport 90vw and 90vh. Right now it's very jumpy, and is only covering 90vh. I can't have the original svg covering the viewport entirely either, because there will be page content that needs to be interacted with when the nav isn't revealed. Also, for some reason, reclicking only works if I click at the verrrrry bottom tip of the #menu path. Maybe I'm going about this the wrong way? Guidance would be much appreciated.

Hi there, (Note: I didn't realize my links to other CodePens would embed them. The one I'm working on is at the bottom.) I'm trying to learn how this page was done and will eventually change the line drawing on my CodePen to one of my own. But I'm using this for figuring it out first. I'm also using this CodePen for the starting point of my script. https://codepen.io/mikeK/pen/XWdwdeR 1. I've got the line drawing, so that's good. but... 2. There's supposed to be a red dot at the end of the black line. And I'm not sure why it's not showing up. 3. Based on the page I'm using to figure this out, that black line should only be a certain length as it goes down the page, and leave the rest with the gray path behind it. 4. That black path also should only be starting out very short at the very top before scrolling begins. Right now it seems to already have written a good portion of the first section. 5. Somehow the paths for the images on the way down should kind of stop the screen from moving down anymore until that vertical stretch of the area has been drawn (example, the numbers at the beginning). 6. I have the background images appearing as they scroll down (thanks to a few lines from the following CodePen), but the timing seems inconsistent https://codepen.io/mikeK/pen/ZEybOJY/14f1a789a064937cd32c044cd8fb4b4c 7. I can't seem to get the animation to actually start before they hit the top of the page. I'm pretty sure this has to do with the scrolltrigger start settings, but I'm not sure how I should be adjusting those. 8. It also looks like the dot in the sample page changes size as it goes through various drawing stages. Thanks in advance. I'd very much like to understand how this was done so that I can adapt it to something else.

Ok. Let's see if I'm getting anywhere. I've built all the different elements here: https://codepen.io/ThePixelPixie/pen/LYdwaad But I'm not sure how to control individual elements within the parts with each next/prev click. Like, on the first "next" click, I want the first "part" to stay, but the next part elements (.second & .third, respectively), to slide in from the top (.second) and the bottom (.third). Then on the third click, fade .first out and fade in .fourth behind .second & .third, etc. This probably all looks like complete gibberish. I'm so sorry.

@Cassie Thank you! That's actually pretty helpful. Sometimes, with my ADD, I just need to have those first steps outlined for me so I can actually *start*. LOL

I only have jpg mockups of the general idea that I'm wanting to go for here (kind of shown in the image underneath the main div of the the Codepen). Not really sure where to start. I went through a YouTube demo (which went way too fast, and I'm sure I have some issues with syntax causing it to not work properly - original video is referenced in that Codepen HTML), but it's not really what I'm after. So, in desktop size, I want to start with a full-screen video. When the user clicks a "next" button, two portrait-oriented images will slide in on either side (so now the video takes up the center third - cropped left/right), each taking up a third of the width of the screen. Next click, the video will fade out and be replaced with another image in it's place. Another click, that center image opens up full width (the two side images would go away). Click, and it would transform into a 6-box grid, and one of the boxes would have another video in it. Final click, and the box with the video would expand to full screen. I haven't yet worked out how it should all go in mobile, but if I can get this figured out, that shouldn't be too difficult. If it can't be done to include video snippets, all images will be fine (it's what I have available right now anyhow). If you can even point me in the direction of any examples that start to do some of this, that would help me loads.

I clearly need to find some deep down tutorials to help me figure this one out. LOL. Basic tutorials rarely help me - I need to apply them to something I specifically need to work on {sigh}. But I'm very glad to know that I could use GSAP for this. Thank you!

@GreenSock - That helps a LOT. Thank you. I'm actually attempting to adapt this pretty old script (apparently from 2016) without the list and pins, but it does use a lot of CSS transforms. Would GSAP be able to work for recreating the levels, surrounding area, and animations, clicking from space-to-space, level-to-level, etc? https://tympanus.net/Development/Interactive3DMallMap/

I have quite a few CSS transforms applied to an SVG. But I'm trying to zoom in on an individual element when it's clicked (the red space in this case). I've gotten the xy coordinates from getBoundingClientRect. But the zoom is "off". I had found an old TweenMax script that did generally what I was looking for, so that's what's in this pen. I'm not sure how to adapt it properly for GSAP3, but it does seem to be zooming regardless. It's just not zooming to the right coordinates. Help?

@PointC - THANK YOU!!! I'm going to play with this today and try to figure it out. Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.

Ok. I've laid this out, and gotten *some* animations going. But I'd like them not to start until the area (Workforce at a Glance) are in view, and then the animations progress as you scroll further, with the area still in view. After all animations have fired, they can keep scrolling down. I'm just really not sure how to make all that happen, or if I've done the right animations to begin with. https://codepen.io/ThePixelPixie/pen/qBxWJNb

@Cassie - I think I want to start with the Gender Diversity group. I have SVGs of the shape. I have not created the html layout yet. So I guess I should work on that then come back here to see where I should go from there. I think I'm a little confused what you and @PointC are saying about building the animations first. Obviously I'm still a newbie with this system. But I kind of assumed that the animation would trigger a fill going across the SVGs until it stops at whatever trigger point is set. So in my mind, that feels like the animation is part of the scrolltrigger? Am I misunderstanding that process?

I'd like to make this set of charts more interactive, by, for instance, as you scroll the page, the information in the Gender Divrsity group would stay in the middle of the screen, but as you scroll, the shapes would fill and the numbers would iterate up. And then kind of the same idea with the Racial/EthnicDiversity group (which would be underneath the gender group) - where the blue fills in to a given percentage, the number iterates up, and the bars scroll across. I know this probably starts with the scrolltrigger. But I'm not really sure where to start, still being a novice with gsap.

@OSUblake - Thanks. Sorry I made my question more complicated than necessary. I have a tendency to over-explain. Yes, this is basically what I was looking for. Thank you!!!

I'm coming to this having started from that support question. Many years ago I'd built a site based on this very old tutorial. Then, a few months ago I got some assistance on this in order to create a simple horizontal scroll, which worked pretty nicely. Today I've started to try and combine the scripts from support question responses, and the horizontal scroll pen, in the one I've included here (somehow I don't think that sentence makes any sense except in my own head) in order to emulate the behavior from that old tutorial. In any case, I'm not sure why it's not really working the way I think it should. I'm still fairly new to gsap, so I apologize in advance for not seeing things that should probably be obvious.