Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sam Daugherty
Sam Daugherty
1,876 Points

Using JavaScript to change the CSS for -webkit-clip-path, and it doesn't work.

I'm trying to play around with the clip-path feature of CSS, which I understand and is working fine for me. I'm then trying to write some JavaScript that changes the start/stop locations of the clip-path. Here's my CSS:

.background-left {
   width: 100%;
   background-color: #ff8800;
   background: url("someimage.jpg");
   background-size: cover;
   background-position: center center;
   height: 100vh;
   transition: all 1s ease;
   -webkit-clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
}

My end goal, is that when you click on a button, it fades out all of the content, slides those start/stop points all the way to the edge (revealing the whole image) and then loads the new page. This is my JS:

$( "#button" ).click(function() {
   $("#content").fadeOut(2000).delay(400).queue(function() {
      $(".background-left").css("-webkit-clip-path", "polygon(0 0, 100% 0, 100%, 100%, 0 100%)").delay(1000).queue(function() {
         window.location.href="someURL.html";
      });
   });
});

I'm pretty new to JavaScript and jQuery, so I apologize if I'm just using some archaic method. I'm still working through my modules here, but I'm just trying to keep practicing and challenging myself. I've spent the past 3 hours trying to Google this issue, and searching around on various forums, and I can't come up with anything.

What am I doing wrong?

Also, any suggestions not relevant to the issue to make me better are always welcomed.

2 Answers

Krzysztof Kucharzyk
seal-mask
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points
Krzysztof Kucharzyk
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points

Your jQuery looks good besides this line:

$(".background-left").css("-webkit-clip-path", "polygon(0 0, 100% 0, 100%, 100%, 0 100%)").delay(1000).queue(function() { window.location.href="someURL.html"; });

Clip-path is a value which has a property of polygon. So in jQuery you have to follow this rule to apply css to value and it's property:

$(selector).css({property:value, property:value, ...})

So I think your code in that line suppose to look like this:

$(".background-left").css({"-webkit-clip-path": "polygon(0 0, 100% 0, 100%, 100%, 0 100%)"}).delay(1000).queue(function() { window.location.href="someURL.html"; });

Try it out and see if this helped :)

Sam Daugherty
Sam Daugherty
1,876 Points
Sam Daugherty
Sam Daugherty
1,876 Points

Thanks for the reply! It still doesn't animate the coordinates at all, but it did allow the rest of the function to run. Before, the content would fade out, and then it would get stuck.

Now it's progressing all the way through the function, but it's like it's ignoring the webkit css. Now, the content fades out, but the background image remains clipped. It's odd though, because it seems to be pausing long enough for the animation to complete. It's almost like the browser thinks the animation is occurring, but you can't see it happen. Does that make sense? I'll try to upload these examples to the web later so you can see what I mean.