CODEWITHSUNDEEP
htmlcsscss-animations
Faiz
Faiz

Reputation: 35

How to make css motion path responsive?

i have made a prototype of an original shot from dribbble. Moving images on a path defined in css. Path was created in illustrator. how can i make motion-path adjust its size according to the screen size.

CodePen

Code Example

.el-1 {
    top: 6%;
    left: 5%;
    motion-path: path('M0.1,0.5c0,0,115.7,24.9,133,122.6');
    offset-path: path('M0.1,0.5c0,0,115.7,24.9,133,122.6');
    /*motion-offset: 0%;*/
    animation: pathy 1.2s 1 ease-in;
    animation-delay: 1.60s;
}

Upvotes: 0

Views: 1168

Answers (2)

Kody R.
Kody R.

Reputation: 2460

You can use either vh for viewport height and vw for viewport width or you can use percentages.

.el-1 {
top: 6%;
left: 5%;
motion-path: path('M0.1,0.5c0,0,115.7,24.9,133,122.6');
offset-path: path('M0.1,0.5c0,0,115.7,24.9,133,122.6');
/*motion-offset: 0%;*/
animation: pathy 1.2s 1 ease-in;
animation-delay: 1.60s;
height: 20vh;
width: 20vw; // or auto, or %
}

Upvotes: 1

Andre Aquiles
Andre Aquiles

Reputation: 404

You can make it by using width as % and height as vh

Example:

max-width: 100%;
min-height: 100vh;

Here's a codepen with a responsive motion path

Upvotes: 2

Related Questions