Jump to content
Search Community

Tazintosh

Members

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by Tazintosh

    ScrollTrigger directional not working in this case?

    in GSAP

    Posted

    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:

    Quote

    • directional [Boolean] - by default (as of version 3.8.0), snapping is directional by default meaning it'll go in the direction the user last scrolled, but you can disable this by setting directional: false.

     

    What am I missing?

    Thanks in advance.

    See the Pen NWvXrYe by Tazintosh (@Tazintosh) on CodePen

    ScrollTrigger.matchMedia(): define it's parameter using variables?

    in GSAP

    Posted

    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.

    ScrollToPlugin won't scroll divs or body etc.

    in GSAP

    Posted

    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.

    ScrollToPlugin won't scroll divs or body etc.

    in GSAP

    Posted

    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.

    See the Pen LqpKxZ by Tazintosh (@Tazintosh) on CodePen

    Cog/Gear (more complex than expected) Rotation Anim

    in GSAP

    Posted

    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.

    • Like 1

    Cog/Gear (more complex than expected) Rotation Anim

    in GSAP

    Posted

    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.

    Cog/Gear (more complex than expected) Rotation Anim

    in GSAP

    Posted

    Good morning, or good afternoon, or good evening… Hello guys! :D

     

    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.

    post-51398-0-49725300-1489926573_thumb.png

    See the Pen wJpaZG by Tazintosh (@Tazintosh) on CodePen

    Wrong positioning when "popping up" an element using scale

    in GSAP

    Posted

    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.

    See the Pen wJgxEG by Tazintosh (@Tazintosh) on CodePen

×
×
  • Create New...