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


Visual-Q last won the day on June 12 2019

Visual-Q had the most liked content!

About Visual-Q

Recent Profile Visitors

2,083 profile views

Visual-Q's Achievements


Newbie (1/14)




Community Answers

  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