Jump to content

Visual-Q last won the day on June 12

Visual-Q had the most liked content!

Visual-Q

Moderators
  • Content Count

    349
  • Joined

  • Last visited

  • Days Won

    3

Everything posted by Visual-Q

  1. Pretty hard to know for sure what's wrong just from the description. However if your intention is to call the ajax content after the timeline is finished you probably should do it on an onComplete callback. https://greensock.com/docs/TweenMax/eventCallback or if you want call it inside the timeline at a specified point see https://greensock.com/docs/TimelineMax/add or https://greensock.com/docs/TimelineMax/call Note also the proper way to pass parameters in the docs so the function doesn't run immediately. I don't do much ajax but I can imagine one potential issue you may have doing this is the ajax loaded content may not be ready when the subsequent animation occurs so you may need to have a way to wait until it is all loaded.
  2. Visual-Q

    Width Calc

    You wanna be careful with those awesome posts @Shrug ¯\_(ツ)_/¯ or they'll make you a moderator. And once you're in you can never leave. No matter how far you run, you will wake up back in the forum.
  3. Visual-Q

    Width Calc

    I think it would be cause for great celebration worldwide if IE could finally and completely be declared dead.
  4. Do you mean you want to do this - wave object rotated 180 deg, height reduced, and moved to top: https://codepen.io/Visual-Q/pen/jjyQdQ
  5. It appears you can also solve the trailing issue by setting <a> to inline-block but it forces it all on one line which may not be optimal. https://codepen.io/Visual-Q/pen/XLpaLa
  6. If you're talking about the full screen transitions when you click links, this looks like a worpress site thas is using animation to load new page content, may be using barba.js or they may have created their own ajax loader, either way as Jack said this type of whole site construction advice would be beyond the scope of this forum. if you search barba.js you'll find several posts that discuss it on the forum. That being said anyone who wants to take it on are welcome to jump in... Happy tweening!
  7. Visual-Q

    Width Calc

    Yeah we usually do that when we make the decision to end support for a legacy browser and IE11 is just about due, but i'm going to err on the side of caution for a little longer. It is time I familiarize myself with some newer css properties though, as the changeover will be soon.
  8. Visual-Q

    Width Calc

    Those numbers are definitely more encouraging.
  9. Visual-Q

    Width Calc

    Been hearing that since IE5. Unfortunately clients write the cheques and consumers decide what browser to use. I have to satisfy them.
  10. Visual-Q

    Width Calc

    I have no idea myself how many people use it but the us gov site which should be pretty objective https://analytics.usa.gov/ reports about 7.4% usage almost 2x what edge gets. That's still far too common for me to abandon support unfortunately. Cut that in half and maybe I can think about dropping it. Clients drive the bus. For now I'll just have to wait.😒
  11. Visual-Q

    Width Calc

    @OSUblake Have you been using css variables in production sites, are there any reiiable polyfills for IE11. I'd like to try them but it's got to work everywhere otherwise it's a no go.
  12. Visual-Q

    Width Calc

    And if you want to get all the way to the edge set body margin to 0.
  13. Visual-Q

    Width Calc

    Cool, I didn't think about easing.
  14. Visual-Q

    Width Calc

    If you REEAAALLY want gsap to write a calc that animates... I probably would never actually do this, but it was fun to figure out... var tween = TweenMax.to('.img-wrapper', 1, { width: 1, modifiers: { width: function() { return ('calc(' + (tween.progress() * 100) + '% + ' + tween.progress() * 4 + 'rem)') } }, ease:Linear.easeNone }) *Updated with Jack's suggestion TweenMax.to('.img-wrapper', 3, { width: 1, modifiers: { width: function() { // this.ratio respects ease return 'calc(' + (this.ratio * 100) + '% + ' + (this.ratio * 4) + 'rem)'; } }, ease:Expo.easeInOut }); https://codepen.io/Visual-Q/pen/LKRLvO?editors=1010
  15. Visual-Q

    Width Calc

    Calc is not just a simple property it's an equation that is passed in to css for parsing. There are many rules governing how it works and it can be written in a number of ways with much more complicated equations than just this + that , that I think would make it very difficult to implement directly in gsap.
  16. Visual-Q

    Width Calc

    Sorry I don't know what I was supposed to look at in your link so I'll guess based on your description. If you want to have the inner container start at parents padding then extend to full viewport you could also animate parents padding to 0. Then the inner container would fill the viewport at 100%. If you make a codepen it will be much easier to help you.
  17. Visual-Q

    Width Calc

    Assuming #right-container is nested inside #main-container you would probably be best not having 4rem left right padding if you want to fill the width of your viewport. It kind of runs counter to what you are trying to achieve.
  18. Wow, never occured to me to pass an ease to cycle. Could do a lot of really cool stuff with that. As @PointC demonstrated the onUpdate isn't needed unless of course you intend to do more with the callback function.
  19. Note sure about whether you can throttle a callback in that way, but you could probably make your tween behave the way you want with stepped Ease. https://greensock.com/docs/Easing/SteppedEase
  20. I don't see any issues on my machine, however... It doesn't seem to be as much of an issue these days but in the past having objects on different layers (z-indexes) animating often affected text rendering particularly in Safari, this usually meant you had to play with font smoothing or other font rendering options to fix it. You mentioned you're on an older mac which suggests that maybe it's an older browser as well, that is displaying this type of bug. An article from a few years ago discussing something similar. https://www.lockedownseo.com/webkit-bug-slider-causes-font-weight-changes-on-page/
  21. Nice effect. It works on Firefox on my mac.
  22. Visual-Q

    Overlay color

    You can make the image the size of img-box instead of relative to the wrapper size like this if the img-box has a fixed size. https://codepen.io/Visual-Q/pen/MMwJeO
  23. Yup, now people will ask you how to mod the mods. You've been royally forked 😩
  24. Visual-Q

    Overlay color

    Depends on whether you have any reason for using an overlay other than hiding the image, by animating the image's wrapper size instead it's parent still holds it's place in the DOM but there is no need to match the background as it's transparent until the img wrapper 'fills it up'.
  25. Here's a push in the right direction also based on a slider project from our good friend @PointC I make no promises that this is the most efficient way to do it, it's just what I thought of. Observe that the white box will animate out, then scroll occurs, then animation for next box on new slide occurs. To roughly match the performance of your example I've added some logic to the the slider that 1. creates an array of animations matched to length of slides and runs first animation for first slide, I've just used the loop to make one common animation for all slides you would want to make your own custom animations for each one matched to the index of the slide 2. then on events (mousescroll, arrows) reverses the animation on current slide (referencing oldSlide index pos) and an onReverseComplete then calls the function to progress to next slide 3. then runs the animation for new slide (referencing activeSlide index pos) Hopefully that makes sense😅 https://codepen.io/Visual-Q/pen/NZqgKr