Guest Posted September 9, 2021 Share Posted September 9, 2021 Hi, I want to build an animation like a swipe effect from mobile to desktop where a web-design first shows on mobile then goes to the right and appears on desktop and repeat. Building this animation I encountered few problems: 1) x: "-10%" is treated like x: "+10%". In Fact it doesn't matter if I specify it to be negative or positive the animation always runs as it positive 10%. Even if I change the values it is still treated like you see in the codepen. 2) I want to animation to run again after it finishes. I thought using setInterval would work but it doesn't. The animation doesn't even run completely. 3) The web-design is visible outside the phone/desktop area when it move. As opacity increases you can see it being outside the bourrides of the phone/desktop. I don't know if this is fixable but if you have any idea I am more then happy to try them. So far I tried using overflow hidden on the phone svg it's self but it doesn't work. Thank you! See the Pen KKqWvVm?editors=0010 by raul-rogojan (@raul-rogojan) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted September 9, 2021 Solution Share Posted September 9, 2021 Hi Cody For percentage transforms, you should use xPercent and yPercent. .to(".foo", { xPercent: -50, yPercent 100 }) You also have a bunch of transforms on your elements, which is messing stuff up. It's a good idea to remove those. https://stackoverflow.com/questions/13329125/removing-transforms-in-svg-files Calling setInterval is a bad idea. If you want something to repeat, you should use repeat along with repeatDelay. gsap.to(".foo", { repeat: -1 }) gsap.timeline({ repeat: -1, repeatDelay: 1 }) And overflow doesn't work for elements inside an SVG. You would need to use a <mask> or <clipPath>. 5 Link to comment Share on other sites More sharing options...
Guest Posted September 9, 2021 Share Posted September 9, 2021 Hi @OSUblake , Thank you for the response! I fixed the issue with the position and repeat. It all work fine! About the transforms. I use Affinity Designer. It was the first time I used it to create an svg for a website. I thought that the svg code looked a bit weird. Is there any external web app that can help me get rid of the transform? Also, with the clipPath, how could I make that clipPath? Can you please recommend me any tutorials? Link to comment Share on other sites More sharing options...
OSUblake Posted September 9, 2021 Share Posted September 9, 2021 For tutorials, I would highlly recommend checking out @PointC MotionTricks. There is a lot of stuff about using clip paths and masks in there. https://www.motiontricks.com/ I'm not familiar with Affinity, but maybe this flatten transform option would help. https://forum.affinity.serif.com/index.php?/topic/85042-flatten-transforms-svg/ And it would also be a good idea to run your SVG through SVGOMG to clean it up. https://jakearchibald.github.io/svgomg/ 5 Link to comment Share on other sites More sharing options...
Guest Posted September 10, 2021 Share Posted September 10, 2021 Hi @OSUblake, Thank you very much for you help! I manage to fix everything. Here is the final result, if you wanna see it: See the Pen KKqWvVm by raul-rogojan (@raul-rogojan) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted September 10, 2021 Share Posted September 10, 2021 +1 for flatten transforms. These are my Affinity settings if it helps at all ☺️ 3 Link to comment Share on other sites More sharing options...
Guest Posted September 10, 2021 Share Posted September 10, 2021 Hi @Cassie! Thanks for sharing! It definitely helps. I just saw one of your talks a few weeks back about SVG's and that's why I decided to learn gsap. Thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now