Jump to content
GreenSock

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

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.

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>.

 

  • 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.

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/

 

  • Like 6
Link to comment
Share on other sites

affexport.png

 

+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.
×