Dot scroll the next section ScrollTrigger (or scrollMagic)

[Mary Pieroszkiewicz]

I need to do a dot animation when I start scrolling, in the first section it has to scale across the width of the window when it goes to the second section it is supposed to go back to the original dot size and it has to appear in the middle of the second section. Thank you for your help.

See the Pen yLeGaOw by mary_pieroszkiewicz (@mary_pieroszkiewicz) on CodePen

[ZachSaucier]

Hey Mary.

 

There are a lot of methods that you can use to scale something to fill up the entire viewport. I recommend starting with the circle filling the viewport then using GSAP to scale it down and animate it. In CSS you can do that quite simply by using the vmax unit:

width: 150vmax;
height: 150vmax;

 To get it to appear in the middle of the second section you should probably pin it during the animation.

 

Here's how I'd set it up:

See the Pen NWxedwv by GreenSock (@GreenSock) on CodePen

[Mary Pieroszkiewicz]

ZachSaucier Thank you so so so much for your help

Now I need to implement it in my project, so the "m.pire" logo where there is an orange dot during the scroll should spread over the entire screen and appear in the second section where the words "Wszystkie Usługi"

See the Pen oNbJxyQ by mary_pieroszkiewicz (@mary_pieroszkiewicz) on CodePen

[mikel]

Hey @Mary Pieroszkiewicz,

 

Maybe a little tricky - use two separate dots that 'crossfade' and you reach the desired positions.

 

See the Pen jOWXXQo by mikeK (@mikeK) on CodePen

 

Scaling the second dot is not the best solution.
Better an SVG here too.

 

Happy scrolling ...

Mikel