Jump to content
GreenSock

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

[svg,js]Failing animating an object that is inside a mask defination

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I saw a tutorial where the tutor animates elements from inside a mask definition to make his desired effects, so I thought that I could use that technique to make a similar animation for a different effect, but somehow it doesn't work for me.

In my picture there is a circle that is defined inside the mask definition and it is meant to be animated but it doesn't move, however, if the circle is outside of the mask tags it can be animated.

So the question is that is there a way to animate that circle defined inside the mask and if it is possible, what do I need to do to make it work?

 

 

See the Pen QKjdRZ by jonathan (@jonathan) on CodePen

Link to comment
Share on other sites

  • Solution

Hello atx85

 

What is happening is that you are trying to animate elements with CSS using x (translateX) that are in a SVG <defs> element. The SVG <defs> element spec dictates that any graphical elements inside the defs element will not be directly rendered (with css).

 

<defs> elements

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

 

- Graphical elements defined in a defs will not be directly rendered.

 

So you have 2 options

 

1) move your graphical elements <circle> outside the <defs> tag. then you can animate using the CSSPlugin .. x .. like your original intent was

 

2) or use the GSAP AttrPlugin to animate the attributes of the <circle> element.. in your case the attribute cx

 

See the Pen QKjdRZ by jonathan (@jonathan) on CodePen

 

Resources:

GSAP AttrPlugin: https://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

defs element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

 

:)

  • Like 3
Link to comment
Share on other sites

Awesome! Thanks for the solution and many more thanks for the detailed explanation!

  • Like 1
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.
×