Jump to content

Visual-Q last won the day on June 12 2019

Visual-Q had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Visual-Q

  1. The animation appears to work for me in IE11 check your console for errors. And make sure you're not running in compatability mode. https://stackoverflow.com/questions/25077612/jquery-not-working-with-ie-11 That's all I got.
  2. Uh oh, the GSAP Moderators have spit into two opposing IE11 factions, led by Blake and Jonathan respectively. Civil war will soon follow?
  3. Unfortunately I know nothing about react so I haven't even tried to work out what you intend with the useEffect function but this is a basic implementation of using paused:true on timeline and play and reverse in event handlers. Hopefully it will get you moving in the right direction. https://codepen.io/Visual-Q/pen/QeLXVj?editors=1010
  4. If you want to pass parameters with function you should probably use .call https://greensock.com/docs/TimelineLite/call() NOTE! the proper syntax for parameters in the docs.
  5. Yeah that makes sense otherwise the ubiquitous document.ready would fail all the time too. Thanks for the info @Jonathan
  6. Thanks Jack, fixing my syntax error seems to smooth it out. I figured out the scroll bar now has an entirely different issue. Since the window wheel scroll is based on the timeline's progress if you move the scroll bar the two become out of sync and the timeline forces it to jump back to where it was the last time it's progress was set. I guess I need some more logic to calculate the window scroll position if it's moved with the scroll bar and pass that as a starting point for the timeline's progress in the event listener. Yeah if any of our resident geniuses want to weigh in you're more than welcome.
  7. Had this kicking around in my head for awhile so I thought I'd give it a try. Uses a tl with ScrollTo and a tween mapped to deltaY to scrub through it's progress. Has some promise maybe - some jankiness presumably due to constant firing of deltaY and the tween getting overwitten so many times but maybe there's way to throttle or normalize this to improve it? I also noticed using the scrollbar seems to make it inoperable, not sure what the relationship there is?
  8. I typically did it inside just a load event in that past which always seemed to work fine but I was trying it based on Jonathans rational: Is seems problematic though in my case so I'll just stick with load event on its own.
  9. @Jonathan I took your load script for a spin on a wp site I'm doing and I found the outer DOMContentLoaded listener appears problematic in safari, seems fine in Chrome. it fails intermittently on interior pages, then works on a refresh, then fails again. Just thought I'd pass it along along. Wondering if it could be because the event already fired before the listener is even added mentioned here: https://stackoverflow.com/questions/39993676/code-inside-domcontentloaded-event-not-working // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded window.addEventListener("load", function() { // GSAP custom code goes here }, false); });
  10. A solution without additional scrollMagic It's not very elegant looking with the verbose callbacks but here is a gsap solution that appears to work. It uses callbacks that pass the desired slide index and a function that loops through and adds or removes class. You could also use the function to trigger secondary animations using the index that is passed to it. https://codepen.io/Visual-Q/pen/ZdaxXQ?editors=1010
  11. Yeah it would be a lot easier to understand if you got rid of all the graphics for now and just simplified it to the basic elements you are having difficultly with. Once you get it working then you can add them back in.
  12. You don't need to load all those gsap files Tweenmax should do it for you. It includes timelinemax and cssPlugin, and you may find it easier to load those scripts in the settings rather than html on codepen. You might want to start from the starter pen. https://greensock.com/tweenmax Make sure you have included jQuery before the other scripts and use proper syntax for using .width() method $('.slides_panel').width() https://api.jquery.com/width/ You should also probably not mix versions of scrollMagic make sure it's all 2.0.7
  13. Clever how you did that, I will have to steal it.?
  14. You appear to be telling portfolio text to go "to.....{opacity:1} if you want to fade out you want to go to opacity:0 - see also gsaps autoAlpha Though your x animation appears to be on the portfolio text item not on :before it's worth noting pseudo elements (i.e. ::before) can't have inline styles so I don't believe gsap can directly animate them. You would need to animate something that affects the position of the pseudo item instead. Or better yet refactor your html so it isn't a pseudo element if possible. I've never attempted scrollMagic with horizontal scrolling but your pins do seem to be problematic: I would suggest you visit scrollMagic forum and docs with questions as it is not a gsap product and see: https://scrollmagic.io/examples/basic/going_horizontal.html
  15. 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.
  16. 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.
  17. Visual-Q

    Width Calc

    I think it would be cause for great celebration worldwide if IE could finally and completely be declared dead.
  18. 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
  19. 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
  20. 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!
  21. 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.
  22. Visual-Q

    Width Calc

    Those numbers are definitely more encouraging.
  23. 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.
  24. 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.?