Jump to content

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

akapowl last won the day on April 30

akapowl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


akapowl last won the day on April 30

akapowl had the most liked content!

Community Reputation

2,332 Superhero

About akapowl

  • Rank
    Advanced Member

Profile Information

  • Location

Recent Profile Visitors

2,565 profile views
  1. That really depends. I've started out with Inkscape, so for most usecases I still rely on that one because I find it most intuitive to handle. But when it comes to inline SVG for websites, Inkscape's own XML-editor tends to often give you some fonky values within your paths, like for instance it uses a lowercase 'm' for path-beginnings instead of a capital 'M'. So I always throw my .svg files that I have saved with Inkscape into SVG-OMG to make sure I get the correct data - really helpful that one. If it is not Inkscape I am using, it is Affinity Designer - which does n
  2. Sorry Aaron, I am not using Illustrator myself, so I can not give you much advice on that - maybe Cassie can. Our fellow @PointC has an awesome collection with tips and tricks when it comes to asset preparation (with Illustrator, too) that you could check out. There are some of those mentioned in this thread here - maybe one of those (or one of the others on his website) can help.
  3. Hey @blumaa@gmail.com That looks a lot, like your line is not an open stroke, but more an enclosed path forming a shape. You'll probably want to adjust your SVG, so the path you use as the motionPath is not an enclosed shape. Here's what I'm referring to in a demo https://codepen.io/akapowl/pen/989d9f903b9230a6cfcd445f627dd684 You could also use an actual <line> element, convert that into a path and use that converted path as the motionPath then. https://codepen.io/akapowl/pen/4648647105634f82e71b61edf264ae57
  4. Hey @pr1ntr If you want the page to be scrolled to a certain point, you would probably want to use GSAP's scrollTo-Plugin for that. That should then also give you the effect you want - the page being scrolled to a certain point, and your scroll-animations being run on the way there.
  5. Hi there. Yes, Cassie is right. Since you are technically just faking the horizontal scroll with a tween on vertical scroll, for triggering animations on seperate elements along the way/scroll, you'd have to calculate their starts/ends based on their offsetLeft (as the demo @mikel posted does). Since in your case the amount of the x-translation of the fake-horizontal tween and the 'duration' of the scrubbing ScrollTrigger are not the same, you would also have to incorporate an 'offset' into those calculations., which in mikel's demo is the later pa
  6. Yes, looks (to me) like you did! On my end the automatic jumping/scrolling doesn't happen anymore 👍 I tested this in a normal page view on desktop, in dev tools rotating the 'device' and on mobile (Samsung Internet - Android 11) and for me the mentioned resize issue doesn't appear in any of those anymore. Maybe you just need to clear your cache for the beta to be used @Shehzad
  7. There is a ScrollTrigger-native helper function that you can utililze for smooth-scrolling. You can find it it the documentation for the .scrollerProxy() (the last demo on that page). Just FYI, it contains a workaround for v3.6.1 with regard to ScrollTrigger's snapping, that might be removed later on. More about that in this thread here
  8. Hey there @sscash - welcome to the GSAP forums. It actually isn't the code for the smooth-scrollbar. This is: https://unpkg.com/smooth-scrollbar@8.6.2/dist/smooth-scrollbar.js The first part of the code-snippet you posted is the initialization of that plugin and the second is the .scrollerProxy, which is so to say the middleman between that smooth-scrollbar and ScrollTrigger. Since that smooth-scrollbar is a third-party plugin and not related to GSAP at all, it is not supported in these forums. If y
  9. Hello @qqignatqq Sounds to me like it is .matchMedia() that you are looking for. As this thread discussed, there appear to have been problems lately with the .saveStyles() in connection to that, which happen to have been resolved for the next release. Hope this helps.
  10. Thank you @Shehzad, I've tried that before - and the pen in my latest reply doesn't have a query for all but I can still reproduce it. Tested on latest Chrome and FF (Win 10) on codepen (debug view of course) and locally.
  11. Unfortunately it's still there for me - with the lerp disabled in the scrollerProxy now it will not scroll to that previous position but instantly jump there. There is still that one ScrollTrigger being created outside of the .matchMedia() function in your fork. Since it will be active on all sizes you wouldn't notice the behaviour I mentioned. const ST = ScrollTrigger.create({ trigger: "body", scroller: "[data-scroll-container]", start: 0, end: "bottom bottom" }); You should notice though, when you remove that ScrollTrigger and there are only Sc
  12. Hey @djarosz I'm not 100% sure if that solution will work in your case, but you could try and use a check on a boolean variable inside the callbacks to prevent the ScrollTriggers from firing on page-load just as suggested in this thread here - which is dealing with a pretty similar scenario as yours, if I am not mistaken. Maybe give it a shot and let us know if it helps.
  13. Hey there @Daniel Hult This recent thread asked about essentially the same thing. Looks to me, like the solution from over there should be a good fit for you, too. Give it a shot and let us know if it helps.
  14. I am not the most confident with ScrollTrigger's .matchMedia yet, but setting up media-queries in your CSS alongside using ScrollTrigger.saveStyles() makes it work properly for me. Could that be an option for you? https://codepen.io/akapowl/pen/LYWELEJ On a sidenote: You should probably set your [data-scroll-container] to overflow-hidden. If e.g. you have a heading with a margin-top set on top of your page like that, it will push down your [data-scroll-container] which could at least lead to problems with your layout later on.
  15. Thanks @Cassie Could have probably simplified yet a teeny tiny bit more, but I didn't want to mess with the mark-up - my head is still spinning from that RTL one