Jump to content


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender
  • Location
    Chattanooga, TN

Recent Profile Visitors

1,072 profile views

ThePixelPixie's Achievements

  1. @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.
  2. 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
  3. @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?
  4. 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.
  5. @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!!!
  6. 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.
  7. @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.
  8. @nico fonseca - Oh thank you! That works GREAT!
  9. Hi there, I'm adapting some code from one of the other forum questions here. It's all working pretty nicely. But I'm just not sure how to make an adjustment for transitioning the color. Right now the transition to the full-page background color is fairly abrupt. I'd really like it to be slightly more gradual. Is that something I can do just with CSS transition? I wasn't having any luck with that earlier, so I'm guessing it actually happens in the js somewhere. Actually, in general, the content for the full-screen part just feels clunky on that transition right now - which may also be because I'm using flex classes & bootstrap to position the content vertically and horizontally centered. Is there a better way to do that with Tweening? Thanks in advance.
  10. @nicofonseca - OO O OOOOOO!!! I had *thought* I'd set the images to opacity 0, but it turns out I had *not*! Now it's working GREAT! Thank you thank you THANK YOU!!!
  11. @nicofonseca - You mentioned updating the pen without jQuery. Is it possible that since the dev site I'm working on (it's a WordPress site) *does* use jQuery, that the issue is a conflict there? I don't have immediate access to the logs and will have to ask for that later this morning. Nothing's showing up in Console that seems out of sorts though. I definitely appreciate the "some small things" notes. Those are very helpful, and much appreciated! (i'll repeat, this is the most responsive and helpful forum I've ever been on. Just awesome what you and the others do here!) Alas, the updated code above those is resulting in exactly the same issue I was having with your original update to the syntax from yesterday. It's sitting on just the last image and scaling in and out, in and out, but not cycling through the images.
  12. @nicofonseca - you rock so hard, man! Thank you! This is the most responsive help forum I've ever been a part of! I am having trouble with it though in my live site. It loads all the images fine, and for the first second or so you can see the first image. But then it just sits on the last image, scaling in and out, in and out. Not sure why. Just before I saw your reply, I had found this pen, that was *nearly* working on my site, except that the images cycle through super fast. It doesn't look as complete as yours either, but I'm having trouble figuring out how to troubleshoot between the two. On my dev site, yours appears to scale and be the speed I want, but doesn't show me all the images. The other one actually cycles through the images, but seems less...something: https://codepen.io/ebinabo/pen/LYGJNdY
  13. Soooooo....should I assume that the CodePens from above using TweenMax would be outdated, so I'd just use gsap now? If so, how might the functions change in terms of syntax? I would really love to use this crossfading slideshow on a site I'm currently working on.
  14. @Cassie - Yeah, if the marquee tag wasn't deprecated, I had one that was working great! So I guess this is the main workable alternative. I've tried so many different scripts, and none of them have come close to what marquee would do, except for this (so I'm very grateful) @GreenSock - That all looks great. I don't know enough about GSAP yet to know what's what. I was literally just copying the code provided in the first response to my post above. I'll work on your suggestions this morning. Thanks SO much.
  15. @Cassie This is the function I've got (with your bit commented out right now): jQuery(function($) { $('ul.ticker li').wrapAll('<span class="ticker-items">'); var tickerWidth = $('ul.ticker').width(); var spanWidth = $('ul.ticker span').width(); $('ul.ticker span').clone().appendTo('ul.ticker'); $('ul.ticker span').wrapAll('<span class="ticker-wrapper">'); gsap.set( '.ticker-wrapper' , {x: tickerWidth } ); var tl = gsap.timeline( {repeat: -1} ); tl.to( '.ticker-wrapper', { duration: 1, x:"-=50", ease: Power0.easeNone, onComplete: function(){ var style = window.getComputedStyle( $('.ticker-wrapper')[0] ); var matrix = new WebKitCSSMatrix( style.webkitTransform ); if( matrix.m41 < 0-spanWidth ){ gsap.set( '.ticker-wrapper' , {x: 0} ); } this.invalidate(); }, }); //gsap.to('.ticker-wrapper', { // x: 50, // repeat: -1, // onRepeat: () => { // console.log('repeating') // } //}); $('ul.ticker').on('mouseenter',()=>{ tl.pause(); }); $('ul.ticker').on('mouseleave',()=>{ tl.play(); }); });