Jump to content
Search Community

Need Help With Border Animation

Design Newbie test
Moderator Tag

Recommended Posts

Hello!! I am trying to finish  this project website for my school, and am totally stuck!! I am SUPER new to this whole web design thing and don't even yet know the correct 'lingo' in order to do a productive search online to try and find anything that could help me! I have attached a screenshot that shows 3 photos..... these photos are supposed to: a)  increase in size when hovered over,  b) be shown in the foreground when enlarged,  c) have a border that is separate from the photo itself,  and d) switch the animations from being done with css to being done via gsap.   I have been successful in doing all of this (except making the border separate from the photo) using css, but am completely lost on how to do it with gsap! I have included a couple screenshots of what I have and what I need to do using gsap and am hoping someone could help with me out with what it is I need to do because I am totally lost!!  

   Thank you in advance for any and all help!

Screenshot 2023-03-12 150851.png

Screenshot 2023-03-12 151553.png

Link to comment
Share on other sites

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...


Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 


Baby steps 😉


Before you know it, things will fall into place one at a time.


Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.


Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

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