Jump to content
Search Community

Corner Radius with Image in Chrome

LewisOne test
Moderator Tag

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

I just want to throw some knowledge out there to the Green World with something I've been having issues with.

 

I've been struggling with the corner radius not masking any image background or <img> in a <div> using css or a GS tweens.

 

After much searching I finally found a workaround, although I don't really know why it works, lol. In your css If you place this webkit-mask-image it will mask the border.  I honestly have no idea what all the goobly text is, but this works like a Harry Potter Magic Wand Spell in all my images without changing anything.

 

 

DO:

 

.object {

overflow: hidden;

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

}

then:

TweenMax.to(".object", 0, {borderRadius: "50%"});

 

 

OR:

 

.object {

overflow: hidden;

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

}

 

 

If anyone has a simpler solution or explain a better version of this, or knows why this works, let me know.

Link to comment
Share on other sites

hello ..

 

if you can please provide a codepen or jsfiddle example, it would be a great help in helping you find a better a solution, and to let you know why it works..

 

also.. when using the border-radius property.. you dont have to use the vendor prefixes, since the border-radius property is supported in the latest Chrome, Firefox, IE10, iE9.. without a vendor prefix

 

http://caniuse.com/#search=border-radius

 

plus the mask-image is only available in webkit browsers at the moment so wont be applied in Firefox or IE

 

http://caniuse.com/#search=mask

 

also here is codepen test showing GSAP animating the border-radius property on an image, which also works in Chrome:

 

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

 

:)

  • Like 1
Link to comment
Share on other sites

in your codepen.. you have the duration in your tween set to zero.. also in codepen you have to add the script by clicking the js sprocket icon to add your javascript file.

 

also try absolutely positioning your image.,

 

try looking at my codepen example above and do tests of your own. Look over and see my css, html and javascript. This way you get a better idea on how to animate the border radius..

Link to comment
Share on other sites

see this.. i modified your codepen:

 

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

 

on your codepen above  you were missing the duration value in the tween.. if you are going to use as your selector ".artIcon" .. you have to have jQuery loaded to use that selector.. otherwise you have to use native javascript like document.getElementById

 

you were trying to animate the border-radius on the images parent (div) not the image itself... In either case GSAP will be able to animate the image and/or its parent with no problem...

 

also the GSAP docs are really helpful to learn how to use GSAP:

 

http://api.greensock.com/js/com/greensock/TweenMax.html

 

http://api.greensock.com/js/

 

does that help?

  • Like 3
Link to comment
Share on other sites

Just a little tip that this thread reminded me of: webkit sometimes has a hard time masking border-radius unless there's an actual border applied that's 1px or more, but you can use a transparent color, like border:1px solid rgba(0,0,0,0) and it magically kicks webkit into gear :)

 

Annoying, I know. 

  • Like 2
Link to comment
Share on other sites

mmmm, interesting.

 

I changed it to use just this:

 

TweenMax.to(".artIcon", 0, {borderRadius: "50%"});  <---zero because this is the initial state of the object then it gets animated later and on your codepen it still works great????

 

I've gotten this to work really well on all browsers but Chrome in my version, unless I don't initialize the DIV with the css up front.  I haven't figured out why yours works yet.  I'll mess with it some more.

 

http://new.bpbenger.com/cart.html

 

So the initial state of the box is round, and on mouse over it is square and goes back on mouse out.  This whole site is square on Chrome without that added css initially.

 

Thanks for your help on this, I'll keep playing with it.

Link to comment
Share on other sites

no worries... if you need to apply CSS properties for the initial state of the element, and you don't want to apply CSS in your style sheet for the starting values.. ...than instead of using the .to() method, having the duration zero, which is not recommended...

 

use the .set() method instead

 

http://api.greensock.com/js/com/greensock/TweenMax.html#set()

 

change your code to this:

TweenMax.set(".artIcon", {borderRadius: "50%"});

the .to() method is for tweening (animating) values.. the .set() method just sets the value statically so there is no tweening, its equivalent to using the jQuery .css() method but is quicker

 

and remember if you are using the selector ".artIcon"  .. you need to have jQuery loaded on your web page in order for GSAP to understand that selector.. that is very important

 

does that make sense ? :)

Link to comment
Share on other sites

Oh man, I'm glad you folk are so freeking smart, hahaha.

 

I have been trying to use the set() for a while and could not seem to get it to work.  I have been using it wrong by putting a timing value on it (just changing to to set).  Duh, lol.

 

Greenfully appreciated guys.  Some day I will be a master.

Link to comment
Share on other sites

its ok.. there alot of great people here willing to help... :P

 

but just review the docs and keep them in a bookmark to always reference..

 

http://api.greensock.com/js/

 

also check out all these links to learn more about GSAP:

 

http://www.greensock...get-started-js/

http://www.greensock.com/gsap-js/

http://www.greensock.com/css3/

http://www.greensock.../jump-start-js/

http://www.greensock.com/js/speed.html

http://www.greensock.com/why-gsap/

http://labs.bebensig...?text=TweenLite

http://www.gannon.tv/edge_demos/dna/

http://ahrengot.com/...ript-animation/

 

examples on GreenSock codepen (to pick apart js, css, and html):
 

http://codepen.io/GreenSock

 

:)

  • 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.
×
×
  • Create New...