Search the Community
Showing results for tags 'borderleft'.
Found 1 result
-
Hey again Greensock guys , I've got a brainteaser for y'all, hopefully it's an easy one. I did do a search around before asking, but the forum search won't include the word 'border' as a keyword, it's restricted, and Google only answered so much of what I needed to know. Okay, so I'm trying to recreate this pen from CSS to JS (GSAP): http://codepen.io/joelrodelo/pen/uHjvi Assumed it would be simple enough but it's proving trickier than I thought. I've been trying to do it with an image on a page, have a quick sample here for reference (you can thank me for the working image later ) : http://webslinger.com.au/dev/gs_border_animation/index.html Some of my attempts or JS fiddles are still in the scripts.js page, just commented out, but they're there for reference. I've just been starting with the left side of the image to begin with. The problem I run in to is that the border appears from the outside in, and any method I've tried to have the border appear from any other direction - either by 'y:' or 'height:' - has failed, moved the entire image with it, or nothing's happened at all (you can see some of my other attempts in the js file). I figured the most logical thing to do would be to nest it, to create a new Tween variable that adds the className and then animate the variable in a new TweenMax line, but I think I've gone wrong somewhere with that approach (read back through the documentation, can we only nest new Timeline's, not new TweenMax's?). Anyway, maybe someone's already figured out an approach to this and I've missed it, or maybe the solution's just too obvious for me to see, cause' surely it wouldn't come to having to actually draw a border line around the image would it? Appreciate any feedback in advance.
