Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

x: "-10%" is treated like x: "+10%" and setInterval brakes the animation

Go to solution Solved by OSUblake,

Recommended Posts

     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

  • Solution

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.



Calling setInterval is a bad idea. If you want something to repeat, you should use repeat along with repeatDelay.

gsap.to(".foo", {
  repeat: -1

  repeat: -1,
  repeatDelay: 1


And overflow doesn't work for elements inside an SVG. You would need to use a <mask> or <clipPath>.


  • Like 6
Link to comment
Share on other sites

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

For tutorials, I would highlly recommend checking out @PointC MotionTricks. There is a lot of stuff about using clip paths and masks in there.



I'm not familiar with Affinity, but maybe this flatten transform option would help.



And it would also be a good idea to run your SVG through SVGOMG to clean it up.



  • Like 6
Link to comment
Share on other sites



+1 for flatten transforms. These are my Affinity settings if it helps at all ☺️

  • Like 4
Link to comment
Share on other sites

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! :)

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.