[Trigger a timeline animation with Scrolltrigger using a useEffect Hook]

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
   

 

[Trigger a timeline animation with Scrolltrigger using a useEffect Hook]

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

 

[What's the new school way to write MorphSVGPlugin.pathDataToBezier();]

Thanks so much, Jack! This is awesome and super helpful information

[What's the new school way to write MorphSVGPlugin.pathDataToBezier();]

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

 

[Cloudflare isn't GDPR compliant?]

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

[Cloudflare isn't GDPR compliant?]

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

[Mask reveal for smoke image]

Thank you guys so much for the very helpful ideas! I hope to share some cool results after some experimentation. 

Best,
Blake

[Mask reveal for smoke image]

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
 

[MorphSVG plugin and pathDataToBezier help]

Thank you so much, PointC! You are supreme! I'll check out your stroke-dasharray thread now. 

Have an excellent day!

Best,
Blake

[MorphSVG plugin and pathDataToBezier help]

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

See the Pen XxLJeg by Techture (@Techture) on CodePen

[flicker on first load]

@Jonathan you are a GSAP Jedi  Thank you!

[DrawSVG plugin with glowing point]

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

[Fire Loop with SteppedEase()]

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 

See the Pen PdoKMM by Techture (@Techture) on CodePen

[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

[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

[Fireworks png effect]

Bless you, kind sir! That is it! Thank you so much for being a supreme Jedi

[Fireworks png effect]

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

[Foggy window effect]

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

[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 

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

[Reset the starting position of an array of elements after staggerTo() is called]

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.

[Reset the starting position of an array of elements after staggerTo() is called]

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.

[Reset the starting position of an array of elements after staggerTo() is called]

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

[Reset the starting position of an array of elements after staggerTo() is called]

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

[Exploding text effect on bitmaps]

Thank you so much for the great tips, my friend! I'll give them  a try.

[Exploding text effect on bitmaps]

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