Line Drawing Animation on Scroll (Elementor & Motion.page)

Links:

Timestamps:
0:00 Introduction
2:22 Create SVG in Illustrator
4:57 Add SVG Code to Elementor Page
12:17 *Bonus Change Line Color on Scroll

Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

WE NOW HAVE MERCH:

WORDPRESS PLUGINS:

BUSINESS TOOLS:

GRAPHICS:

WEBSITE HOSTING:

------

#gsap #elementortutorial #cssanimation

[LytboxStudio]

I just got Motion Page and can see I’ll be having some fun! Good tut Mark!

[marty]

Bro! You just earned a subscriber. Loved this video!

[paulwlliams]

Hey! Love your tutorials, but I just can't get this to work with motion.page. I have my SVG line in place in the Elementor page, but it doesn't seem to show in the start/end viewport? It just stay in view at all time on the whole page. I can see that I am using a newer version. of the plugin so not sure how I can exactly follow your video...or if there are any new features or settings that are needed to make this work? Any help would be amazing

[zamilahamed]

Such amazing tutorial. Thanks so much 😃

[PLuma]

Thank you for the great tutorial, it worked like a charm! :)
Nevertheless I am facing one issue... The z-index is not having an effect. I am not sure if it's related to the html box oder the other boxes. Do you have any suggestions why the z-index has no effect? Thank you :)

[sjdbfosuhfouehu]

This somehow didn’t work for me... Everything goes right until I enable the draw svg strokes in motion page. The effect doesn't work on my end

[rem]

One of the best I have seen. I am a new subscriber. Appreciate to take the time to reply to your followers. Is it possible to switch it off on mobile or substitute another path on mobile?

[jugibur]

Thanks for sharing this! Would be interesting to see, how it looks on mobile device. Maybe some tweaking is necessary(?)

[hokusmith]

This is a great tutorial. Thank you so much for this. Is there any way to attach a graphic (like a car or plane) and have it follow the path as you scroll down? I know that's a little crazy but I was just wondering. Thank you again for this tutorial!

[raymondj]

Thank for the tutorial. When on Desktop, the line is different if the window is not maximized or if using a 4K display (instead of 1920px), do you have any suggestions how to fix that? Thanks!

[tomasceltics]

Can I make animation of fixed svg path with ball on it and as one scrolls the path would be fixed but the ball would go down on that path?
Can I make this with elementor and motion.page?

[tomasceltics]

Its not working. When I click on svg animation, the svg just dissapears and thats it... How to solve?

[leomarkconstantino]

How to do in a like a test tube? when I scroll the test tube rise

[lydiakitts]

ISSUES WITH ANIMATION GOING THE WRONG WAY?

Here's how to fix it:
Make sure you select the VERY last point and then push the escape key, then export your svg.

I spent two hours trying to figure it out and testing EVERY option of how to make it work for me after an illustrator update.