Jump to content

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

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