Jump to content


  • Posts

  • Joined

  • Last visited

Profile Information

  • Gender
    Not Telling
  1. Oh wow, thank you for the great help.🙏 I'll dig into this!
  2. Hi folks, I've updated to GSAP 3.8 and reviewed my code to add directional: true (even it's by default) to my snap object. I cannot achieve to get the result described: What am I missing? Thanks in advance.
  3. Ok, found the solution: https://stackoverflow.com/questions/11508463/javascript-set-object-key-by-variable
  4. Hi folks, Following the ScrollTrigger.matchMedia() documentation, the parameter is defined like so: {"(min-width: 800px)": function() { ... }, "(max-width: 799px)": function() { ... }} My project use some global variables specific to the client. "800px" is one of them: I would to define my parameter like so but cannot seems to make it work: {"(min-width: " + GLOBAL.theme.width.mediumLarge + ")": function() { ... }} Any way to write such a thing? Thanks in advance for your support. Regards.
  5. I've now copy/paste the code above. I guess it's now GSAP related question. https://codepen.io/Tazintosh/pen/GRNGENZ EDIT: ups wait, -50% was a first issue (for my need/understanding). Put it to 50% loading is fine and obvious. Will digg on this following your recommandation. EDIT2: issue was simply my console.log
  6. Sorry for my misunderstanding considering the number of code evolutions that have been made above and the fact my code is indeed using GSAP.
  7. Hi folks, I tried to play with mrWilson last post and put it into my function (much reduced for the test purpose). I cannot figure out why all my images are instantly revealed. Any idea? https://codepen.io/Tazintosh/pen/GRNGENZ
  8. Thank you both guys for the input. I'll think of a solution knowing this then. All the best.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.