Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Tazintosh

  1. Thank you both guys for the input. I'll think of a solution knowing this then. All the best.
  2. Hi @mikel I may have miss expressed myself (sorry of my english) or you did not carefully read my message Your exemple is using "window" on: TweenLite.to(window, 1, {scrollTo:{…}); This is exactly what's I'm pointing out. If you use $('body') or want to scroll any other div, this scroolTo will —not— work on Chrome and Firefox.
  3. Hi folks, I've lost half a day trying to figure out why my scrollTo was not able to scroll anything else than "window" element on Firefox and Chrome (Safari works like a charm, even Edge…) I finally figured out that the ScrollToPlugin documentation example wasn't too… The codepen linked is a fork of the ScrollToPlugin documentation example where I only changed "window" by "$('body')". Why I don't use "window" instead? Well because I need (since it say to be supported on the documentation) to scroll any container. I've wrote my own function where I can pass args like container to be scroll, targets, is scroll horizontal or vertical, etc. So I've a generic function to handle various elements of my DOM, from a basic menu (like in the documentation exemple), to a much advanced own "Lightbox". I've to get this fixed for my client website :( Any idea? I'm using GSAP 2.0.2. All the best.
  4. Hi folks! I made it! (by following your recommandations, so thanks) Here's the updated Codepen. (I've kept the old JS code commented for reference.) I've also rewrote the description and added some comments on the code. There are probably some if/else conditions to optimize. https://codepen.io/Tazintosh/pen/wJpaZG Thanks again.
  5. Hi Carl and Jonathan. Thank you for your long time writing those answer. I'll definitely switch to enter/leave for the mouse, it's quite smart. About the fact it usually "relates to general programming structure and logic", I cannot be more agree : ) My job is about visuals thingy, and I'm autodidact on programming. Handling everything in separate tween is probably also a valid points, I can see it now… what is sad, is that I first fully started this way ^^ and recode everything thinking the timeline could be a smarter and much cleaner solution for the need I have to switch projects for now, but definitely continue asap. Thanks again. Cheers.
  6. Good morning, or good afternoon, or good evening… Hello guys! I'm working on a cog rotation animation for the (under development) store of my website. You can see it on the top right corner of the attached image. If I was not so perfectionist, I would have been done with it since two days… Sadly (for me), I too often —love— to fine tune things… so I would like my rotation animation to be as precise as I expect. I've made a Codepen which so far (at about 90%) shows exactly the kind of animation I would like. However, I'm quite a newbie to GSAP and I've the feeling my actual code could be way overthought. I made a bulle list to try to explain you the animation process and would much appreciate if you could tell me is there is a way to simplify / rethink it. I also miss the TODO point. Thanks in advance for your time, Cheers, Édouard.
  7. Good morning Dipscom I tried your last proposal on my Codepen example. Sadly, the animation is still behaving wrong while running. Then, when done, the props are indeed cleared and the element jumps instantly to a vertically centered position.
  8. Ok Dipscom, this has worked, thanks a lot! But here's the question: why? Is there indeed a "caching or so" issue somewhere? I also tried when cleaning (line 23) to use TweenMax.killTweensOf(currentOverlay); or TweenMax.killAll(); without luck.
  9. Good morning folks, I'm building a website where I present a list of posts links. When the user click on a link, I'm sending an Ajax request to get the content of the post, then populate an hidden container (.taz_overlay-content) and trigger a function that reveals it by animating it's scale. My "popup" (.taz_overlay) is vertically centered using CSS top: 50%; transform: translateY(-50%); The problem is the following: Depending of the amount text in the article, the popup is not vertically centered anymore but keeps it's previous position. Please note that I'm faking Ajax request in this provided Codepen by using 2 string variables (fakeAjaxContent1, fakeAjaxContent2), one with a few words, the other with a bunch. Example: When you first click "Link 1", the "small" popup triggers. It's perfectly vertically centered, as expected. From now on, if you click "Link 2", the "huge" popup triggers. But while it should have been perfectly vertically centered, it's keeping the matrix positioning of the previous animation and obviously appears completely in offset. The same behavior appear when First clicking "Link 2", then "Link 1" (you need to refresh the page before). The weird thing for me is that I thought erasing the style attribute at the end of the animation (line 25 of the JS) would solve the issue, but it's not Looks like there is some kind of cache somewhere. Note that if I deactivate the scale animation (starting line 4), the issue is solved! Any help would be greatly appreciated. Cheers, P.-S. : sorry if the Codepen looks a bit over made, it's extracted from my original code which is handling much more cases etc. I tried to reduce it to some kind of minimum so the "bug" still happens.