Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Tazintosh

Members
  • Posts

    14
  • Joined

  • Last visited

Profile Information

  • Gender
    Not Telling
  1. Ok, found the solution: https://stackoverflow.com/questions/11508463/javascript-set-object-key-by-variable
  2. 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.
  3. 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
  4. Sorry for my misunderstanding considering the number of code evolutions that have been made above and the fact my code is indeed using GSAP.
  5. 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
  6. Thank you both guys for the input. I'll think of a solution knowing this then. All the best.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
×