Jump to content
Search Community

How can i add a border with a tween

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