Jump to content
Search Community

lagalga

Members

  • Posts

    18

  • Joined

  • Last visited

 Content Type 

Posts posted by lagalga

    ScrollTrigger show/hide Navbar on scroll up/scroll down

    in GSAP

    Posted

    i've just changed 150vh with :

     

    const vh = (coef) => window.innerHeight * (coef/100);

    …

    start: vh(133) + ' top',

     

    And it triggers well… the thing is how to hide/show the logo simultaneously with the header? If i set the same animation, the logo doesn't do the first (shrink animation)

     

    ScrollTrigger show/hide Navbar on scroll up/scroll down

    in GSAP

    Posted · Edited by lagalga
    translate to english

    i don't know if this is the place to post my question, i think it's related… 

    I have based on the first code to hide the header when scrolling down and it appears when scrolling up... but I also have an animation of the logo at the top of the page and I don't know how to join the 2.

    The sticky header and the logo are in separate divs, although after the first animation they seem together... but I want that when a 150vh of scroll down is done, the header + logo set is hidden upwards, and that they appear again when scrolling up... all always in the area below 150vh from the top of the page...
    This is what I have arrived at:

     

    Orignal topic 

     

    See the Pen poBmoav by lagalga (@lagalga) on CodePen

    Shrink logo on scroll and keep it fixed

    in GSAP

    Posted

    Hi! one more twist... is it possible to have an initial logo size relative to the width calculated with css variables* and after the animation the size is fixed in pixels?
    I mean:
    From-> width: calc(100vw - var(--borde));
    To-> width:250px;

     

    Thanks;)

     

    Pin vertical sections with inside horizontal scrooltriggers

    in GSAP

    Posted

    Hi, I am trying to create a group of sections within which there is a horizontal scroll, and when it ends then another new section appears vertically that overlaps.
    But if I use sticky it only works the first time?
    I'm doing it in wordpress(Divi), but with a simple demo based on @LukasZahorec' I don't get it... should I create a tween above the horizontal scroll sections for the vertical sticky behavior?

     

     

    WP: ( https://temp.espaciotramo.com/loop-plato-prueba/ )

     

    See the Pen abXgwvJ by lagalga (@lagalga) on CodePen

    Right to left sticky scroll

    in GSAP

    Posted

    Hi, it's me again. I thought I had solved... but it doesn't work on mobile. Also, the 40% section is getting "shorter" because above comes the 3rd section more and more above ....
    I have created variables for .panel60 and .panel40 but I don't know if I should create a function for each of them?

    Also, in mobile, they should be all full width sections, but the third section is not visible, it only does the scroll trigger with the .panel60 and .panel40 sections....

    What am I doing wrong?

      

    Updated Codepen:

https://codepen.io/lagalga/pen/OJrvKML

     

     

     

    I have this on a wordpress site, with Divi theme:
    https://temp.espaciotramo.com/

     

    Animate text on an SVG path

    in GSAP

    Posted

    10 minutes ago, Rodrigo said:

    Hi,

     

    This is related to the initial position of the characters. Jack's original example has a different setup than the one you actually need in order to spread out the characters in the path.

     

    This seems to work as expected:

     

     

     

    Hopefully this helps.

    Happy Tweening!

    Thnk you. I suppose i need to use   instead of regular spaces… and who do i animate this on scrolltrigger, not automatically with hover?

    Animate text on an SVG path

    in GSAP

    Posted

    Yep, sorry. I forgot to mention i need a constant font size, not resizeable with viewport… so if the section is 100vh, the path somatimes would be more horizontal and sometimes vertical… deforming the path, changing the font size and its glyphs proportion (

    See the Pen OJrZVwO by lagalga (@lagalga) on CodePen

    ).

     

    So I saw this post and thought i could set a simple path (two perpendicular lines, a corner), where the text moves on scrolling (not animated like this post), but not realizing where to start: 

    See the Pen abPGLQb by lagalga (@lagalga) on CodePen

     

    Right to left sticky scroll

    in GSAP

    Posted

    9 minutes ago, mvaneijgen said:

    That is what I thought, so then I don't get what is the issue?

     

    That is not a problem, but what I don't understand is if you have a pen that works perfectly, what do you need help with? Is there a Divi issue? That is not really something we can help with, if it works perfectly in Codepen then it isn't a GSAP issue and we like to scope these forums to only GSAP related questions, so the only advise I could give you is try disabling things on the Divi side until things start working, then you know in what code the issue resides and it will be easier to debug.

     

    But your links seems to also work and you've marked your comment as the solution? 

    Sorry, I solved it while writing it. That's why I marked it as solved. I've been updating CodePen and that's why it looks good. 
    Sorry for the inconvenience :)

    Right to left sticky scroll

    in GSAP

    Posted

    Hi! i want a horizontal scrolling section with sticky cards moving right to left… but then another section with the reverse movement…

    I reached to this page:

    Where there is the first part, but cannot set the next section with the opposite direction movement… I've tried setting flex-direction:row-reverse, but cannot find what i need to change on the xPercent var…

    See the Pen OJrvKML by lagalga (@lagalga) on CodePen

×
×
  • Create New...