[convertCoordinates Move Group Elements]

Hi Jack! Thank you for help.

I think I understand them more. I was just thinking of making a robot arm type of animation with convertCoordinates or getRelativePosition for practice and looking for a way to move group elements together on the line.

And I got another idea to do from your advice. I will try it and ask again if I get stuck.

 

Thank you so much!

 

[convertCoordinates Move Group Elements]

Hi!

 

I was learning convertCoordinates and getRelativePosition.

I thought I could move group elements together but I could not figure out.

is there any way to move the yellow circles with the blue line?

 

Thank you.

See the Pen ExgqQQB by shunyadezain (@shunyadezain) on CodePen

[Does ScrollTrigger work in a small wrapper?]

@zachSaucier Thank you for your quick response!  It works and I'm glad to ask you a question here!

[Does ScrollTrigger work in a small wrapper?]

Hi everyone,

 

I want to use ScrollTrigger to trigger some elements when the red box reach to the top of screen (or the top of the wrapper ). But the marker(start) doesn't move if you scroll in the wrapper.

Is there a way to trigger animation in the wrapper?

 

The box is just for the demo and I want it back to the original shape when the red box pass the end point.

 

Thank you.

See the Pen OJRREOJ by shunyadezain (@shunyadezain) on CodePen

[SVG Dotted Stroke Animation]

Hi @ZachSaucier,

 

Thank you so much. It looks great now! I'm sorry about the code was messy.

Have a nice day!

[SVG Dotted Stroke Animation]

Hi guys!

 

I'm trying to make a simple weather app on Codepen and I have a hard time to make one animation with dotted strokes.

I want to make these strokes to move like rain drops.

 

I tried drawSVG first but, I found an article about a line animation using stroke-dashoffset on CSS Tricks and it kind of works.

There are still dots on the sides and look not good...

Here is the article: https://css-tricks.com/svg-line-animation-works/

 

Is there any solution for this?

Thank you

 

See the Pen gOrjvYv?editors=1010 by shunyadezain (@shunyadezain) on CodePen

[All Master Timeline Animation Start Once Loaded]

Hi! @ZachSaucier I'm happy to be here. This was the first time ask a question because this forums is really big and I'm always able to find my answer 😄

I have learned a lot from this community. And thank you for checking my domos🙏

 

The your article is great! I will use the techniques next time 👍

Thank you!

[All Master Timeline Animation Start Once Loaded]

Thank you so much! @mvaneijgen I did not notice that.

 

Some animations were not working after fixing the problem.

But I used eventCallback() in the functions and now it's working! 😁

 

  function sw1(e) {
    const switchTl1 = gsap.timeline();

    switchTl1.eventCallback("onUpdate", function () {
		keyBtnMove.pause();
    });

    return switchTl1;
  }

 

[All Master Timeline Animation Start Once Loaded]

Hi everyone. I have a trouble with master timeline.

I can't figure out why all animations in master timeline start when content loaded.

 

I want two animations of the computer to switch each 5~7 seconds . It works fine after the delay finishes.

There are Mater timeline on the bottom of codes and functions are top of it.

 

Could you give me some advises to fix this problem?

Thank you.

See the Pen PoNOJMR?editors=1010 by shunyadezain (@shunyadezain) on CodePen