Jump to content

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

jakob zabala

  • Content Count

  • Joined

  • Last visited

Community Reputation

12 Newbie

About jakob zabala

  • Rank
    Advanced Member
  1. Thanks so much for these resources! Yes I am involved now in the slack channel. before i posted here I wasn't getting any answers. here you guys are great and I was just looking for good resources/ examples to get my stuff working. Thank you!
  2. Apologies in advance for the question that is more related to Barba.js than GSAP but you guys always point me in the right direction. I have researched different methods, but my JS knowledge is limited so I am not sure on what strategy to use. I want to do a simple page transition between two pages with separate JS files that have many GSAP timelines and event listeners. Ideally I would like to use the views / beforeEnter hook to re initialise my JS scripts, but I don't know how to do this. Or do I need to break up my JS files into functions and call them using hooks; I al
  3. @GreenSock Works like a charm (I had 3.6.0 which didnt work... .1 makes a lot of difference) Thanks
  4. hey @PointC, I have a small DrawSVG question bothering me. I have this issue with other animations but this one illustrates the issue well, I solved it in a 'hacky' way but was wondering the correct way of doing this. I am trying to have a small line 10% of the draw svg travel along the path, but I want it to also 'leave' the SVG path. If you uncomment the second to tween this is the 'hacky' way of solving it. https://codepen.io/jaykobz/pen/vYgvXzZ
  5. aaa yes! i realise the incorrect syntax! thanks again
  6. Unbelievable! again simple fix... I thought I was miles off! What do you mean by other spots where the default settings were 'not in that object' Are you saying I shouldn't override the defaults? or put all the eases in the default?
  7. @PointC Another one thats got be stuck in the mud! I am in the process of converting my SVGs into single SVGs so that they scale properly and with correct spacing. But in this case, 8 separate letters that also morph is way off: the intro animation is all from the origin of the SVG and the morphSVG part, using manual origin setting is COMPLETELY off(because its from the origin of the entire SVG. Where have I gone wrong? transforming the paths with CSS? and If i recreated this in AI and bring it in with a rectangle I imagine I'd still have the same issues. I haven't tried SVGs insid
  8. Simple fix, thank you! I have never actually used auto height/width. I have tried to use it in other situations for other issues, but it wasn;t the right solution so i completely but that out of my mind! Yeah making it one entire svg when I start adding more bars will work better! thanks!
  9. hey @PointC! hope all is well! i am having issues with these two SVGs. The Viewboxes are causing overlapping problems at smaller screen widths. I have tried different things like makeing the width height and viewbox smaller within the same ratio and scaling up the width on bigger screens doesn't work. The only solution I have is changing viewbox attributes in JS window.matchMedia, but this doesn't work that well and is quite messy. Is there a better solution to this? thanks https://codepen.io/jaykobz/pen/QWdVKrw?edi
  10. @GreenSock Yes this precisely what I was looking to do, I was "okay" with waiting for the animation to end but this solution is much more ideal! GSAP has been my intro to JS, do you recommend any websites/articles that explain JS concepts involving logic, looping and techniques like these that would help me build these types of dynamic animations? (as I realise these issues I am having are more to do with JS and less with GSAP) Thank you !!🙏
  11. aaa yes! this makes sense, I wanted to ask before spending loads of time trying to get it work! thank you!
  12. @PointC Another question regarding SVG elements. Suppose I give my page perspective and wanted to animate an <image> that is within the SVG in the z axis, is this possible? const tlpop1 = gsap.timeline({ ease: 'none', paused:'true' }); tlpop1.to("image",{duration: 0.2, z:100 }) const popout11954 = document.querySelector('image'); popout11954.addEventListener("mouseenter", () => { tlpop1.play(); }); popout11954.addEventListener("mouseleave", () => { tlpop1.timeScale(0.85).reverse(); }); https://c
  13. One more thing! I am quite new to using gsap and js in general. If i wanted to wait for the animation to finish to allow it to play again where would I use the isActive()? I can't find a good example!