Jump to content

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


  • Content Count

  • Joined

  • Last visited

Everything posted by ynamite

  1. @GreenSock Excellent, exactly what I was looking for. Thanks a lot!
  2. @Shaun Gorneau No real reason, just a gut feeling. Nothing against progressive enhancement, do that all the time, I've just never had to change the actual node type of an existing element before. Probably just me. Thanks for the help!
  3. Alright, easier done than said seems to be working fine. Still seems a little off to me but oh well, it works. Thanks!
  4. Hm, that sounds edgy. Can the tag of an existing element simply be changed? And if so, how? Edit: the whole element would need to be replaced, I think.
  5. Thanks @OSUblake After changing the <a> to a <div> it works fine and was much easier to implement than expected. The drawback is that the link will only work with JS enabled. Not sure if search engines will be able to pickup on these faux-links.
  6. Hi there draggable is working fine on my touch device, but not on my desktop using a mouse – latest Firefox Mac, haven't tested any other browsers. Anyone have any ideas as to why? In this specific case the element I'd like to be draggable is placed within an anchor-tag and I suspect that's where the problem lies. Adding `dragClickables: true` doesn't seem to make a difference. I could change the HTML, but I'd like to avoid that if possible, as this would require some amount of work and testing on project that is live. Thanks for the he
  7. @ZachSaucier @mikel Check it out essential functionality's mostly done: https://dev.diener.coach Let me know what you think! Thanks again for all the help! PS. Will add a password later, send me a pm if you need it.
  8. This is what I have so far: https://codepen.io/ynamite/pen/wvzOgNd Performance is much better with separated paths (who would've thought). I wish I had a bit more control over what happens when though, feels a little arbitrary atm – been trying to use the individual durations to gain more control but getting inconsistent results, especially the further along the animation goes. Also I would've liked if initially all paths would be invisible (not yet drawn) and that the first path is drawn/animated. Only after this first path is drawn, does the rest foll
  9. @mikel I don't get it and feel left out 😂 How does this help?
  10. Zach! First things first and just for the record: I love GSAP and I never implied nor meant to imply that GSAP had anything to do with it, not even close I'm simply trying to understand what's happening and to hopefully come up with a solution. That's all. I could be totally wrong, but what I'm trying to achieve doesn't seem overly complex. It seems to me that animating one single SVG path shouldn't be as sluggish as it is on my end, even on a 5K screen. But again, I could be way wrong (it may just be my machine/browser/config/whatevs), it has almost 10 million pixels more to ren
  11. @ZachSaucier Quick question, I've done additional testing on Windows and while it seems as though Firefox (latest version) is generally the slowest on Mac/Windows, it's exceptionally slow on my main workstation for some reason – a well maintained 5K Retina iMac (16 GB Ram, SSD, dedicated GFX card with 2 GB Memory) I believe. It does run a little sluggish on my old Surface 3 Pro too, but still way better than on my much more powerful iMac. Weird. What's funny is that even IE 11 manages adequate performance (once I got it to work). Every other browser – with the exceptio
  12. It's already set to none in the pen above. Thanks though. Seems strange though ... I've seen fairly complex SVG animations that are way more complex than what I'm trying to achieve, and those run buttery smooth. Not to say it's a GSAP limitation, but it does seem strange that this fairly simple animation is so performance heavy. Thanks Mikel. Unfortunately I don't see anything that would help. Also your example doesn't run very well in FF either. Looks like Firefox just doesn't handle animated SVG paths all that well. Then again, the performance isn
  13. Oh ... it seems it has to do with the visual size of the path. Running it in the small code pen window seems to alleviate the performance problems almost completely ... weird but interesting no? Please view the pen in it's full size and glory, as that's the size I need the path to be at As in, making it visually smaller isn't a solution.
  14. Hi all I'm busy coding the frontend for the aforementioned website but I have a few problems/questions. Here's a simple demo pen (please view in fullscreen): https://codepen.io/ynamite/pen/wvzOaOB (please view in fullscreen) performance: especially in Firefox (as compared to Safari) performance is quite bad. How come? I'm guessing the path is too long/complex? Or is there something else I'm missing? Can I do anything to make it run smoother? I haven't tried simplifying the path yet. Also performance in Safari degrades the further along the path is drawn.
  15. Thanks so much for the feedback gals/guys and sorry for the late reply, I was a little under the weather and had to shelf my research until after the new year. I'll give it a shot and let you know what I can come up with. @ZachSaucier I would love to flex a bit but due to time constraints and current workload I can only do so much @mikel awesomecakes, thanks a lot! I didn't know something like this was possible. @akapowl thanks a lot, I will most likely go this route in combination with mikel's input. Arrrgh look behind you, a three-heade
  16. I was wondering, is this effect doable with curved (bezier) paths? Or would I need physics, rigid bodies and whatnot? Background: I'm doing some reasearch for a website I'm coding next year. The idea is to have a one-page website containing 5 or so sections from top to bottom. Each section will contain an image and the image of each section should be visually connected to the image in the next section – at specific points – by a visible curved bezier path, with a stroke applied, like a cotton string leading through the website. I was thinking of using a Canvas element in the b
  17. I get it next time I'll whip up a demo! Thanks for the help.
  18. With a timeline like so: https://codepen.io/ynamite/pen/WNrqydM
  19. @ZachSaucier I think I've figured out what the problem is. When the initial state of the element is set with CSS the xPercent/yPercent values get screwed up after resizing the viewport. When I set the initial state with gsap, everything works as it should. See your modified pen for an example of this: https://codepen.io/ynamite/pen/WNrqyZM Concerning your pen and the "most common mistakes" post, I did try to do it with a paused timeline but had two issues, the first being the same as the problem mentioned above with the translate values getting screwed up and secon
  20. Hi I've got a question in regards to refreshing gsap's cashed values on mouseenter. I can provide a codepen if it helps, but it's quite simple to explain I think. In a responsive Website I have an image and a DIV with a white background that appears when you mouse over the image, simply covering it. The DIV slides in from left to right using xPercent and on mouseleave, the element animates back to xPercent 0. I'm using CSS to set the initial state of the DIV using transformX(-100%). $element.parent().on('mouseenter', function(){ gsap.fromTo($element, {
  21. I see. Makes sense, thanks for explanation. Good to know it's not a bug. Indeed, what Zach wrote helped solve the issue. Thanks a lot. Happy as a clam for now.
  22. That does indeed work better. Also I didn't realize gsap could understand vh units (and never bothered to try). That's pretty sweet. Thanks!
  23. Oops, I apologize, I must've messed with the fiddle after posting it (or entered it wrong initially) ... in my project I'm using a percentage value for top – for the reason stated in the previous post. I've updated the fiddle to reflect that.
  24. @ZachSaucier Because I'd like to animate the div relativ to the parent and not relative to itself. As I understand it, transforms work relativ to the element that's being transformed, position values are relative to the closest parent which has position relative. No? Don't mention it, thank you for this awesome library that just keeps on giving