Search the Community
Showing results for tags 'svgs'.
Found 4 results
-
Hi there, I am trying to make a div(#rec) follow an svg path with I did in my below code but, I want the div to follow down, as I scroll down and follow back up as I scroll up, I will appreciate if you help work on the code below, Thanks https://codepen.io/onseyi/project/editor/DeWepm <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin:0; width: 100%; height: 3000px; background:#dfdfdf; overflow-x: hidden; } #rec { position: absolute; width: 150px; height: 100px; background-color: #8894aa; } </style> </head> <body> <div id="rec"></div> <svg fill="none" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 1300 3000"> <path id="path" d="M143.78,431.83c103.76,235.99,223.54,324.48,318.04,360c143.34,53.87,223.51-16.03,379,51.84 c136.54,59.6,292.87,208.71,272.99,325.44c-25.74,151.18-320.87,94.36-612.23,336.96c-155.68,129.63-367.75,392.59-331.29,624.96 c43.59,277.79,443.64,520.03,985.93,492.48" stroke="black" stroke-width="8"/> </svg> <script src="gsap.min.js"></script> <script src="MotionPathPlugin.min.js""></script> <script> gsap.registerPlugin(MotionPathPlugin); gsap.set("#rec", {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"}); gsap.to("#rec",{duration:5, motionPath:{ path:"#path", autoRotate: true } }); </script> </body> </html> index.html
-
(Small)(1).thumb.jpeg.15e42ae49445b8bada9d0a027e685017.jpeg)
I would like to drawOn all the craziness that is going on in the attached file but I'm not sure it's a wise idea. I am just getting reacquainted with GSAP (love it) so my chops are not what they used to be but they are progressing! So is this a dumb idea or is it just a monumentous undertaking? We're talking about close to 5000chars and every path is named "d" So, am I dumb, or just uneducated ? Thanks, Diza -
I would like to do "complex" animation with gsap and svgs, but I don't know what is the best approach to this. it is better to create and to import an unique svg with inside all the elements or maybe it is better 4 different svgs? I have 4 different characters: a tree, a lamp, a desk and a man. basically my animation is move the objects on the x, and appearing and to disappearing stuff. any help, suggestion or advice? I started to study gsap a few days ago, and i am still new to this many thanks
-
I have attached a file that I downloaded that indeed works with Edge Animate, but I can not get any other SVG to work in this file. I am wondering what I am doing wrong... the code seems straightforward enough... there is a bit of a lag when previewing as well... wondering what this about... What I thought I could do is substitute another symbol for the one in this file, just keep the same div name but I suspect it's more complicated than this... Could someone point me in the right direction as always? I would like to use Edge Animate as my platform for developing for now... You guys rock. GSAP SVG DRAWING AND EDGE ANIMATE.zip
