Jump to content


  • Posts

  • Joined

  • Last visited

About kabocreative

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

kabocreative's Achievements

  1. Oh no, it was a typo! This is now my second GSAP forum post with a camelcase mistake, eek. Thanks so much @mvaneijgen for figuring it out and explaining your debugging process. Doh! And also thanks @Cassie - your example is certainly much cleaner and easier to read than mine, meaning I could come back to it and make sense of it more easily in future. Good to hear from the pro's not to worry too much about it. I've chosen not to use the global defaults for scroll trigger as I do have other scroll trigger timelines on the page that should have different behaviour. Final working article now being put into website. Thanks again to you both!
  2. Hello GSAP-ers! I've got a series of icons, each with their own timeline. I'd like them to only animate when in view, so I'm using scrolltrigger to play onEnter and onEnterBack as per: toggleActions: "play pause play pause" I would expect them to be paused unless in view, but t2 and t5 are always playing. I wondered if this might be related to having scrolltrigger and defaults applied to the timline, but when I remove the defaults they still animate before coming into view. Primary question: Any ideas on how to prevent t2 and t5 from playing when not in view greatly appreciated. Secondary question: repetitive code As a secondary point I'm running the same scrolltrigger on 7 timelines, which feels excessively repetitive: scrollTrigger: { trigger: "#div-id", toggleActions: "play pause play pause" } I think I want a forEach loop here, but every example I come across is for running the same animation repeated times, while each timeline here contains unique animations. instead of '#div-id' which is unique for each timeline, '.section' could be used as each item is in a .section div. Any ideas to tidy up my excessive code here greatly appreciated as I'm certain it is too lengthy!
  3. Thanks so much Carl! That article is amazing and now bookmarked. SVG Origin is what I wanted but failed to find, thank you. Yep my quickly put together SVG is not centered in the viewbox. Fixed and working here: https://codepen.io/kabocreative/pen/rNvpZMY Thanks for showing how to work with awkward alternatives though in the second example, also super useful!
  4. Hi again! I've hit a problem with rotating an SVG path. In the codepen I have two paths. I'm rotating the path with the class 'i-should-be-moving'. If you inspect it you'll see it is rotating, but around its own center, not the center of the viewbox as I'd expected when I set the transform origin: t4.to("#icon-4 .i-should-be-moving", { duration: 2, rotate: 360, transformOrigin: "center center", repeat: -1 }) I stumbled across this thread which seems to acknowledge (if I've understood correctly) that GSAP rotates around 'self coordinates' while CSS rotates around 'viewbox coordinates': I couldn't see in that thread if there's an override however. How best can I make path 'i-should-be-moving' rotate around viewbox 'center center'? Thanks!
  5. Thanks Cassie I've historically been a podcast listener.. but this looks so useful I'll find time to watch it!
  6. It was a bit! I thought I'd have a look around for any good podcasts now I plan on getting into GSAP, and came across Egghead dev chats from 2018! Old, but still good
  7. Thanks Jack. Good lesson to learn now! Listened to a podcast you were on yesterday funnily enough where you mentioned the pain of cross browser support in the days of shifting from flash to JS, especially when it comes to SVG.. and the same day I hit such an issue. Live and learn!
  8. Oooh that's working for me, hurrah. Thanks Carl!
  9. Asked a friend. It's working on windows. Just me. Will do some googling On the plus side, at least it works!
  10. Ooh how strange. You are seeing what I used to see. When you responded with a polite 'eh.... it's doing what you want....' I took a look on my wife's machine (mac) and ta-da it is indeed doing what I want! On her iPhone and Mac (multiple browsers) it's working. On my windows (chrome + firefox) and android (chrome) the path is rotating and not the text as per this loom: https://www.loom.com/share/c33f2d1718c24875ae55e04d69190e89 I'm now assuming it must be me, but would LOVE it if you happen to be android or windows and can confirm? Now to figuring out what on earth I've done to my setup 🤔
  11. Hi all, So I created a nice simple animated jump link with text rotating on an SVG path. Got it up on the site and moved on. It has stopped working, both on the site and the original codepen. Inspecting I can see now instead of the TextPath rotating, the path itself is. Any ideas greatly appreciated
  12. Ah that does help, a lot! Bookmarked for future reference thank you!!!!
  13. Just had to be pulled out - I love how simple you make it sound! Thanks so much Cassie, I can follow what you've done but I'm certain I'd never have gotten there on my own. At least not yet.
  14. Yep - thanks for the video. I watched that today, match media looks ace and I've happily been going through a few animations using scrolltrigger matchmedia and updating to the newer match media, perfect. I'm stuck where you've mentioned.. it's the event listeners! I've no idea what to do with that. Perhaps it's not something match media should be covering and I'm trying to make it do something it shouldn't be?
  15. I've also updated this pen to not contain two sets of matchmedia! Everything works as it should, it just doesn't stop animating below 800px: https://codepen.io/kabocreative/pen/jOzjjyO