Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

8 Newbie

About ynamite

  • Rank

Recent Profile Visitors

237 profile views
  1. @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.
  2. 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
  3. @mikel I don't get it and feel left out 😂 How does this help?
  4. 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
  5. @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
  6. 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
  7. 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.
  8. 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.
  9. 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
  10. 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
  11. I get it next time I'll whip up a demo! Thanks for the help.
  12. With a timeline like so: https://codepen.io/ynamite/pen/WNrqydM
  13. @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
  14. 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, {