Jump to content
GreenSock

gingerman

Animating

Go to solution Solved by gingerman,

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'm sorry to ask here, but I have been looking at this for ages now and tried a few different start points including SVG.
 
I want to animate the CSS so that I can change the clip-path's properties using GreenSock - TweenMax.
 
If you take a look at the codePen link you will see some white text which is clipped into a circle.
 
I want to be able to animate that circle's size and position, but am having real problems.

.clipcircle1{
  clip-path: circle( 50px at 70px 70px );
}

As you can see I have tried tracking the position using onUpdate - so that I could set the clip-path's properties like that, but I failed at that.

 

Thanks

 

 

 

EDIT [ SOLVED thanks to the people on here ]
I have created another codePen to show what I needed to achieve here 

See the Pen qaapAd by gingerman (@gingerman) on CodePen


Despite this there is useful information in the thread ( this is just for your convenience )
Thanks guys :)

See the Pen PGzWjG by gingerman (@gingerman) on CodePen

Edited by gingerman
Link to comment
Share on other sites

Hello gingerman and welcome to the GreenSock Forum!

 

What browser are you having issues with?

 

Usually in an onUpdate you use a GSAP set() tween to animate the element. Keep in mind that clip-path is not fully supported in all browsers, and is very buggy. Mozilla Firefox, since version 47 just added support for <basic-shapes> which is what your using with the at syntax. And other browsers like Chrome and Internet explorer either do not support it yet or have partial buggy support.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape

 

Please standby while we look into this, Thanks :)

  • Like 2
Link to comment
Share on other sites

Hello @Gingerman!

 

Welcome to the forum! 

JavaScript

TweenMax.to(["#circle1", ".clipcircle1"], 2, { x:50, y:20, yoyo:true, repeat:500, ease:Sine.easeInOut});

I've tried this stuff but I dont have idea on what is going on. I've tried to join the two objects into one animating function but I've noticed your clip why are you having two set of texts?

 

Mr. Jonathan will help you! Please standby!

Link to comment
Share on other sites

For webkit browsers this should work fine:

TweenMax.to('#txt1', 2, { webkitClipPath: "circle(100px at 300px 70px)", yoyo:true,repeat:500});

http://codepen.io/GreenSock/pen/EggbQd

 

I suggest you build a simple static (non-animated) version of the effect you want and then we can better suggest how it might be animated.

  • Like 1
Link to comment
Share on other sites

Hello @Gingerman!

 

Welcome to the forum! 

 

JavaScript

TweenMax.to(["#circle1", ".clipcircle1"], 2, { x:50, y:20, yoyo:true, repeat:500, ease:Sine.easeInOut});

I've tried this stuff but I dont have idea on what is going on. I've tried to join the two objects into one animating function but I've noticed your clip why are you having two set of texts?

 

Mr. Jonathan will help you! Please standby!

 

 

Hi WarenGonzaga,

 

I am trying to move the clipping on the front text ( so that the rear text is still visible ). That's why 2 text clips. What I actually have to do is a little different, but this demonstrates the layers etc better ( otherwise you would not get what was trying to be achieved ).

 

Steve

Link to comment
Share on other sites

For webkit browsers this should work fine:

TweenMax.to('#txt1', 2, { webkitClipPath: "circle(100px at 300px 70px)", yoyo:true,repeat:500});

See the Pen EggbQd by GreenSock (@GreenSock) on CodePen

 

I suggest you build a simple static (non-animated) version of the effect you want and then we can better suggest how it might be animated.

 

 

This is closer to the effect I need to achieve, thanks for everybody's help - 

See the Pen qaapAd by gingerman (@gingerman) on CodePen

( I will edit the question to include this further up )

This also works in FireFox, Chrome and Safari.

 

 

Link to comment
Share on other sites

That doesn't work in Firefox on windows 10 and 7. Normally you would need to also add the standard clipPath or "clip-path" property along with webkitClipPath for it to work in non webkit browsers. Firefox doesnt use -webkit-clip-path but uses clip-path instead. You can see in Firefox in the DOM inspector it sets clip-path:none on the style attribute of the element your trying to animate.

 

So Firefox only has partial support for clip-path:

  • Firefox only supports clip-path when used as url() syntax
  • Firefox supports shapes behind the layout.css.clip-path-shapes.enabled flag

http://caniuse.com/#feat=css-clip-path

 

:)

Link to comment
Share on other sites

That doesn't work in Firefox on windows 10 and 7. Normally you would need to also add the standard clipPath or "clip-path" property along with webkitClipPath for it to work in non webkit browsers. Firefox doesnt use -webkit-clip-path but uses clip-path instead. You can see in Firefox in the DOM inspector it sets clip-path:none on the style attribute of the element your trying to animate.

 

So Firefox only has partial support for clip-path:

  • Firefox only supports clip-path when used as url() syntax
  • Firefox supports shapes behind the layout.css.clip-path-shapes.enabled flag

http://caniuse.com/#feat=css-clip-path

 

:)

 

 

 

Hello, 

 

You are correct I was mistaken.

 

I will have to produce this in a different way - animating an svg.

 

Similar to how this works 

See the Pen pjaZgx by gingerman (@gingerman) on CodePen

 

Thanks

 

Steve 

 

 

Link to comment
Share on other sites

Yep SVG would be the way to go for cross browser compatibility. Either using the mask element or clipPath element :)

  • Like 1
Link to comment
Share on other sites

  • Solution

UPDATE !!!!! FIX !!!

My colleague MagnusPi has solved this here by using a transparent PNG instead of a SVG to do the masking.

See the Pen zKoQgk by magnuspi (@magnuspi) on CodePen

 

Thanks Magnus - this works in all major browsers now.

:)

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