Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 03/29/2024 in all areas

  1. Also, just a heads up but safari is really struggling recently to paint big changes like this. I tried a few weeks ago and whole sections of the page were chunked out on scroll 🫠 I'd suggest using fixed divs and doing opacity fades instead of targeting background color. https://codepen.io/cassie-codes/pen/YzMVRrr/4a679cfaa6f8a96bd83bceaea0fa01b4?editors=1010
    2 points
  2. Hello, thank you for your answer. I have tested the code again myself and the issue seem to be solved. I had another horizontal slider that was bugging on mobile, but I managed to fix that issue myself. Maybe the bug from the horizontal slider was messing up this slider. Anyway, thank you for looking into it, I hope it was not to much of an inconvenience. Kind regards!
    1 point
  3. For the text I would use SplitText https://gsap.com/docs/v3/Plugins/SplitText/ and then stagger each the letters Keep in mind all ScrollTrigger is doing is animating your animation on scroll, so just build the animation and don't worry about ScrollTrigger at all. I've written a guide how to create card stacking effects and the logic can be applied here 1 on 1, you just have more elements that stack, so before doing anything you first want to lay everything out with CSS. See the post below and a demo from the post that animates a clipPath, which is also part of the animation I would suggest just start building in Codepen and first do all the CSS, then try to animate some things and only when you're done start thinking about ScrollTrigger. Pro tip in between fork your work, so you have versions on which you can fall back. When you get stuck post back here with a demo and one particular question and some one here will be sure to point you in the right direction. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GReQYBr
    1 point
×
×
  • Create New...