Jump to content

Visual-Q last won the day on June 12

Visual-Q had the most liked content!

Visual-Q

Moderators
  • Content Count

    360
  • Joined

  • Last visited

  • Days Won

    3

Visual-Q last won the day on June 12

Visual-Q had the most liked content!

Community Reputation

570 Leader

About Visual-Q

  • Rank
    Advanced Member

Recent Profile Visitors

1,741 profile views
  1. Yeah that makes sense otherwise the ubiquitous document.ready would fail all the time too. Thanks for the info @Jonathan
  2. 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.
  3. 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?
  4. 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.
  5. @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); });
  6. 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
  7. 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.
  8. 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
  9. Clever how you did that, I will have to steal it.😀
  10. 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
  11. 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.
  12. 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.
  13. Visual-Q

    Width Calc

    I think it would be cause for great celebration worldwide if IE could finally and completely be declared dead.
  14. 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