Jump to content


  • Posts

  • Joined

  • Last visited

Posts 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 :)


    • Like 2
    • Thanks 1
  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,


  3. 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.


  4. 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,


  5. 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.


  6. 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? 


  7. 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,

  8. 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,

    See the Pen yqOqVG?page=1& by lindenalee (@lindenalee) on CodePen

  9. 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 :)


  10. 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: {
                    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 
                }, 0.03);

    Thanks in advance,