Jump to content


  • Posts

  • Joined

  • Last visited

About ThePixelPixie

Profile Information

  • Gender
  • Location
    Chattanooga, TN

Recent Profile Visitors

1,282 profile views

ThePixelPixie's Achievements

  1. 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.
  2. 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.
  3. @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
  4. 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.
  5. 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!
  6. @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/
  7. 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?
  8. @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.
  9. 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
  10. @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?
  11. 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.
  12. @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!!!
  13. 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.
  14. @GreenSock - That demo above is very close to what I was just searching for. I'm curious about 2 things though: 1. Why does it automatically land on the 2nd panel instead of the first? I was trying to look through the code and wasn't seeing anything immediately that helped me understand that. 2. How would you move the nav from being static at the top to being static on the left side? 3. If each panel is slightly less than 100vw can the next panel be clicked to advance as well? Thank in advance.
  15. @nico fonseca - Oh thank you! That works GREAT!