Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Blake

  1. Hi All! I figured out my query with a little help from this amazing video walkthrough. Hope it helps someone else out too! The ability to add the scrollObject property directly to a Timeline instance is amazing. That did the trick and now I can properly load my timelines into any component with a useEffect hook, and they'll only trigger when they meet their start/end markers. This is beautiful sorcery
  2. Hi there, I'd like to be able to trigger a timeline animation when a user reaches a certain section of my single page application. Right now I've got a timeline animation setup in a useEffect hook inside the component I'd like to animate, and I'd love to start that timeline at the correct moment. I'm exploring ideas and would love some guidance if anyone has some insight here. Thanks in advance, Blake
  3. Thanks so much, Jack! This is awesome and super helpful information
  4. Hi there, I'm new to using GSAP in React and was wondering what the new way to write something like: const motionPath = MorphSVGPlugin.pathDataToBezier('#dotted-line-path', { align: 'relative', }); I'm curious what the method from the Morph plugin is that would allow me the same results as the above line of code. Thanks in advance, Blake
  5. Hi Shaun, Thanks for the quick reply. I thought it was good to go as well. I'll forward this helpful link to my colleagues in the hopes we can bypass any unnecessary work. Best, Blake
  6. Hey there, A client just told us that we can't link to GSAP files on Cloudflare because Cloudflare isn't GDPR compliant. Does anyone have any helpful information on this topic? I'd hate to take apart my work ,and have to add necessary scripts locally which would add a lot of k weight to my project. Best, Blake
  7. Thank you guys so much for the very helpful ideas! I hope to share some cool results after some experimentation. Best, Blake
  8. Hi there, I'm wondering if there's a clever way to animate a mask to reveal a bitmap of smoke, so the smoke image looks like it's appearing somewhat naturally. If the smoke was vector I'd use the DrawSVG plugin with some masking, but in this case is it possible to use any GSAP resources to do something similar? I've attached a sample image of the smoke I'd like to reveal. Thanks in advance, Blake
  9. Thank you so much, PointC! You are supreme! I'll check out your stroke-dasharray thread now. Have an excellent day! Best, Blake
  10. Hey there, Fellow GSAP Jedis! I'm having a bit of trouble getting my plane svg to follow a path I made. Any help is greatly appreciated. Best, Blake
  11. @Jonathan you are a GSAP Jedi Thank you!
  12. Hey there! I'm wondering if anyone knows how to enhance the drawSVG write on effect by adding a glowing point to the stroke that reveals the layer underneath. When the mask is being drawn on, is there a way to add a shape or perhaps a glowing circle to the point that is revealing the layer underneath? Perhaps there's a way for an object like a small circle to follow the path that the drawSVG plugin also follows? Sorry if this sounds too confusing and thanks for taking the time to read. Best, Blake
  13. Hi there, I'm having trouble getting a loop to run smoothly. Right now there's a bit of jitter and I feel like you can easily see the loop start. Would appreciate any help getting this to run smoother. Best, Blake
  14. Blake

    Fireworks png effect

    Thanks so much, Craig! As soon as I hopped back into Sublime I saw that I needed that modifier script and it works like a charm. Have a great weekend, good sir
  15. Blake

    Fireworks png effect

    Hi Craig, how's it going? I'm trying to modify/run this code locally but having a bit of trouble getting started. Any ideas how to properly port this locally to experiment with it? Best, Blake
  16. Blake

    Fireworks png effect

    Bless you, kind sir! That is it! Thank you so much for being a supreme Jedi
  17. Hey everyone! I recently saw an amazing CodePen where a series of fireworks png's were animated using their rotation, scale, x and y properties. It was the coolest thing ever but I can't find it. I believe the effect was leveraging the staggerFrom() function or perhaps steppedEase(). I can't recall but I'd love to try and locate that pen if possible. Thanks in advance, Blake
  18. Blake

    Foggy window effect

    Thank you so much for these very helpful ideas! I'm excited to experiment with this.
  19. Blake

    Foggy window effect

    Hi there, can anyone direct me to some examples of a foggy window effect created with GSAP? I'd love to see any examples or ideas that would show the screen getting foggy, then the fog being wiped away. I've added a pen that someone else made, but shows the direction I'd like to go in. Thank you Natalia for the pen Thanks in advance, B
  20. problem was solved a lot easier than adding any other functions. it was good to research potential solutions and learn, but it was even better to discover how easy the solution was by simply using .pause() to reset/replay my timeline.
  21. The animation wasn't running when I called .set(). When I called .set() it wasn't able to properly reset all of the starting positions/properties the way I needed it to. It would have been a lot of work to set each individual element of my array back to the starting points. Thankfully the .pause() function saved the day by doing a lot of the heavy lifting.
  22. Hey guys, just solved the problem by using the below code in my replay function: // resets the letters in the wind effect to their start position tlTxtEffect.pause(0, true); I can't believe how easy the solution was and that is why I LOVE GSAP. It was great to learn a few things along the path to this solution, but I'm literally smiling ear to ear with how easy it is to reset a complex series on animations. It's sorcery I tell ya Thanks, Blake
  23. Hi there! I'm trying to reset the starting position of an array of elements when I replay my main timeline animation. I've tried using TweenMax.set to set the original state of each element but I'm not having much luck. var txtEffect = ["#w", "#s", "#r2", "#e", "#n", "#o2", "#v", "#l2", "#r1", "#a2", "#l1", "#u", "#l3", "#a1", "#o1", "#f1", "#f2" ]; function showTxt() { tlTxtEffect = new TimelineMax({ paused: false, }); // wind effect tlTxtEffect.staggerTo(txtEffect, 3.75, { cycle: { top:function(){ return Math.random() * 300 }, left: function(){ return Math.random() * -700 }, scale: function(){ return Math.random() * 2 }, rotationX: function(){ return Math.random() * 20 }, rotation: function(){ return Math.random() * -360 } }, ease:Power4.easeOut, }, 0.03); } Thanks in advance, Blake
  24. Thank you so much for the great tips, my friend! I'll give them a try.
  25. Hi there, does anyone know of a cool way to animate individual letters like an explosion? Trying to avoid using SplitText on html text. Would love to animate letters(bitmaps) from a spritesheet. Thanks, B