Jump to content
Search Community

ti-sign

Premium
  • Posts

    5
  • Joined

  • Last visited

Posts posted by ti-sign

  1. Hey there!

     

    For a change I don't directly have a question but an input if anybody ever tries something similar (or if somebody has any optimisations in mind we could use).

     

    For our website we needed to be able to connect different containers with an svg line and animate it on scroll to reveal. Of course, the svg line and animation have to be adjusted for screen sizes and resizes. I'm pretty happy with the solution we came up with, even if it probably isn't the most optimised one. But it was an unusual challenge and maybe somebody can profit from this.

    See the Pen oNaRMge?editors=1010 by tisign (@tisign) on CodePen

    • Thanks 1
  2. Hey @Carl

     

    Thanks so much for the input! That looks really nice and I just learned that there is a thing called wrap, amazing 😃

     

    My website always has a burger menu, so it doesn't change hight on resize (and it has no background color, so I need to change the logo to stay visible)

     

    I've experimented a bit further myself and here is a solution that seems to work with reading out hsl values:

     

    See the Pen OJEoyVx by tisign (@tisign) on CodePen

     

    For anybody seeing this, I take no responsibility regarding efficiency (Not because of GSAP, I just don't know what I'm doing 😆), I myself am gonna use the color version, as I only use three colors on my site. Ouh, and it doesn't work without background color and/or transparent backgrounds.

     

    • Like 2
  3. Hey there

     

    This is one part demo and one part question.

     

    I've been lurking in the forum for some weeks to get help and hopefully this can help somebody else (and someone may even make this better, probably).

     

    I've been looking for a possibility to change my logo in the navbar depending on the color of the section it's on (because I have a transparent navbar). I didn't find a suitable solution so I created one on my own. If this is helpful to anyone with a similar problem, have fun!

     

    You could even go further and check for the lightness in a hsl value to cover all colors (or the w and b in hwb).

     

    However, here's my question. I have absolutely no idea if this is a performant or nice way to do it (I'm fairly new to JS and very new to GSAP). So if any of you pros out there see an immediate stupidity in my code, feel free to correct me 😄.

    See the Pen NWzBLGQ by tisign (@tisign) on CodePen

    • Like 1
  4. Hey there, gsap novice here

     

    I have a simple fade-in animation on my site. However, the first time the animation loads, the whole site janks and the animation doesn't look good. All subsequent times look extremely smooth. I've tried to recreate it in a codepen, however, there the code seems to work flawlessly. I have no other scrollTrigger or gsap animation on any of the here targeted elements. Did anybody already have that problem and see a solution?

     

    Thanks in advance!

    See the Pen NWyEwoa by tisign (@tisign) on CodePen

×
×
  • Create New...