Jump to content
GreenSock

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

How can i add a border with a tween

Recommended Posts

I tried to add a border to a banner Ive made, but none of the tries worked

i tried

.to(type1, .3,{backgroundColor: "#000000", border:"40px #00a1d6 solid"})

I tried with an inset and i get the same effect but I dont want it to be transparent.

.to(type1, .3,{backgroundColor: "#000000", box:"inset 0 0 0 7px #00a1d6 solid"}) 

I like how it looks with the inset but I the only thing about it is the shadow effect and how things can be seen under the inset once the logo passes by. 

 

Here is my codepen 

See the Pen KWGNJo?editors=1010 by IrvingG (@IrvingG) on CodePen

  • Like 1
Link to post
Share on other sites

You can tween the border width like this: 

See the Pen NpOgJe%C2%A0 by anon (@anon) on CodePen

 

It may not work across all browsers though, so you can tween the borderTopWidth, borderRightWidth, borderBottomWidth, and borderLeftWidth properties individually for cross browser support.  Example from Jonathan: 

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

 

Same thing works for borderRightColor, borderTopColor, etc.

 

Check out this thread for more information: https://greensock.com/forums/topic/8880-border-width-easing/

  • Like 1
Link to post
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.

×