Jump to content

elegantseagulls last won the day on October 20 2018

elegantseagulls had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by elegantseagulls

  1. Hey @DesignCourse! @Ihatetomatoes - Has some on his site: https://ihatetomatoes.net/ @sdrasner 's Frontend Masters course: https://frontendmasters.com/courses/svg-animation/ Are good starting points imo.
  2. @Sahil Really helpful tips here! Thank you! I'm still wrapping my head around some of the canvas properties and how they work, constructing the path in loop will really help simplify. Appreciate the resource links too! thanks!
  3. @GreenSock Glad to know I'm at least on the the right track. Good tip on the `ticker`. I'll look into that. Thanks, Ryan
  4. Greetings, Greetings, fellow GSAPers. Up until this point I've pretty much only worked with SVG/Dom animations, but it seems that Safari is having some performance issues animating a SVG pattern that's also an SVG mask (see: https://codepen.io/elegantseagulls/pen/OBKPba ) so: Hello Canvas. I've never worked with animating canvas so I'm wondering if my approach is they way I should be approaching it: I initially had it looping every line and adding a `tl.to()` for that, but changed it to just be the number of custom eases and am adding the additional lines in the update function instead. I'm not looking a full code review, and I know this is not a direct question, but just making sure I'm not approaching Canvas in a completely backwards way. Any thoughts are welcome.
  5. Hi @dorijacobson It's really hard to say without seeing the code you have. Can you provide a CodePen of the issue?
  6. @Robert Wildling, Good article @Carl! Also, a tip, when animating symbols, or sprites, it is vary useful to use CSS Custom Properties, so that you can animate a specific instance of the symbol or sprite, rather than all of them at once.
  7. Nice! Some fun interactions!
  8. Great approach tweening the stop-color, @PointC! Welcome @shMattyP93! Another way to try would be to tween the offset attr:
  9. Hi @jp_uk81, Check out this post:
  10. This is great! Using <pattern> is smart thinking here. A lot of cool possibilities beyond text too!
  11. Hi @Niek Roemahlewang I finally had time to look at the CodePen in more depth. The 'gotcha' for me was that the prev/next button tweens needed a fromTo tween to animate from current x position to the snapped x position. Hope this is helpful for your learning/understanding!
  12. So decided to do performance test with Custom Ease vs Bezier, and also show look and feel. Performance looks very similar. Here they are if anyone is interested: Any and all feedback/ideas are welcome! Thanks!
  13. My suggestion would be to use a 'snap'. You can get your current X position by using `this.x` in your `onCubeDrag()` function. From there you should be able to math the difference for what the 90deg snap should be. If I have time this morning I'll see if I can fork your pen and dive into the details a little deeper.
  14. GSAP has quite literally changed my life (for the better). Thanks @GreenSock! Awesome post, @PointC!
  15. Rereading your question, I think @mikel had a better understanding of what you were asking for. I updated my Pen as well. On the StaggerTo, the last value (0.1 and -0.1), in this case, dictates which direction the StaggerTo happens.
  16. @Hector18 Is this what you'd be looking for? I simplified the animation to use StaggerTo as well, so that you could see that functionality.
  17. HI @Hector18, As @mikel said it makes things far more clear if we can see a CodePen example of the issue. Are you looking for GSAP's reverse() functionality? https://greensock.com/docs/TweenMax/reverse() From the look of things, you might be best using GSAP's StaggerTo functionality https://greensock.com/docs/TweenMax/static.staggerTo() too.
  18. Can you provide a simplified CodePen demo for this? It's much easier to see what's going if we have some code to interact with.
  19. It's in @Rodrigo's signature, but in case you missed it: His GSAP & React - Getting Started blog is helpful when learning too: https://greensock.com/react
  20. Seconding what @Carl said! Tip: It might be helpful to use labels to your timeline to sync up your animations and avoid overwriting/overlapping timelines (https://greensock.com/docs/TimelineLite/addLabel()). Using labels makes it so you don't have to add a negative delay to start two+ tweens at the same time, and it will make your synced up tweens/delays much easier to read.
  21. We built our site (and others) in React (https://www.elegantseagulls.com/), and haven't run into any performance issues. There are a lot of variables that go into performance, so without seeing the setup it's tough to give a clear yes or no.
  22. Pasting the SVG code will work well. And if it's not a maintenance hassle, should give you better performance than an 'injector'.
  23. You could use two paths each starting at the middle point and tween them with the same selector. Or starting with a tween from 'scaleX: 0' Check the CodePen:
  24. Thanks for the info @GreenSock. On those lines, is there an easy way to 'inspect' a RoughEase's randomly generated path value (outside of the ease visualizer)?
  25. You are targeting `#line` in your .each, and you only have one ID of 'line'. You should be using a class in this case if you want to be semantically correct. See updated pen: