Animating a dashed line that creates a box once user scrolls down to certain point

[alzika]

I'm a backend developer, but at my job I was recently tasked with a specific job that requires a ton of frontend work.

 

One of the things this project requires is that once the user scrolls down to certain points on the page, I need an animated line to draw out, and then it basically forms a box and the animated dashed line serves as a border for a div that then fades in.  Note that if the user scrolls back up, that line and the div that appeared do NOT need to hide again or "unanimate", but they need to stay visible once the animations finish.

 

Does anyone have ANY ideas to help me out here?  I don't even know if Greensock is what I should be using here or not.  Whatever route I take has to work cross browser and IE is what I'm worried about the most, especially slightly older versions (I'm still not sure yet what the client has approved)

 

Any help would be wonderful here. Thank you.

[Carl]

Hi and welcome to the GreenSock forums,

 

This a bit of an ambitious undertaking. GSAP could certainly handle the animation aspects, but you would have to have a fairly good understanding of the API.

 

To trigger an animation on scroll, I would recommend ScrollMagic: http://janpaepke.github.io/ScrollMagic/

 

Your dashed line that goes around the div could be a little tricky depending on what you need it to do. 

I would look at some of these examples for inspiration:

http://codepen.io/search?q=dash+array&limit=all&depth=everything&show_forks=false

http://codepen.io/search?q=marching+ants&limit=all&order=popularity&depth=everything&show_forks=false

 

You may be able to take a basic approach of using the css clip property to reveal each edge of a static dashed border or maybe you have to do something more fancy with SVG, I really don't know.

 

If you make some progress and have some specific GSAP questions along the way, please create a CodePen demo of what you have and we'll be happy to help you along. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[alzika]

I know it's an ambitious project.  I have a week total to complete it.  It also has other animation such as something that always stays on the screen centered vertically, but the item that moves as you scroll down CAN move horizontally.  Kinda like a game where the background scrolls but the character stays in the center, but the only difference here is that the image CAN move along the X axis while staying stationary centered on the Y axis.  

 

I'm already using ScrollMagic for that, but I'm finding that having it work cross-browser and being PIXEL PERFECT just isn't working.  For example, I have to line up that character with a type of trench/channel that it follows as it scrolls down the screen (imagine an aquaduct/river that luckily only has 45 degree angle turns and then goes straight down; imagine water flowing through it from the top of the screen to the bottom, and it has to follow and stay within the confines of the edge of the river;  the only difference in my project is that there's no flowing water, its a static image that moves along that path.  

 

So, again, the problem about not being pixel perfect....In Chrome, where I implemented it initially, it looks perfect and everything is lined up exactly as it needed to be via VERY meticulous tweaks with ScrollMagic, in some cases, 1 pixel at a time and zooming in a ton on my browser as I scrolled to make sure it fit exactly into the "channel" that the "character" follows as you scroll up and down.  Then...I finally decide to test it in Safari and Firefox (I'm not even going to test it in IE right now...I'm afraid to even look....sigh, Microsoft).  In the other browsers the moving item on the screen is no longer in the channel and is outside it.  I don't know if this is an issue with ScrollMagic, Greensock, slight possible differences in the way each browser renders items, or perhaps some type of CSS issue.  I'd imagine it HAS to be one of those 4 but I don't know which.

 

I thought about using SVG paths for that part alone (with the moving "character") but figured ScrollMagic would be easier, and plus, I've never used SVG for any real purpose.  I actually tried to create a path in illustrator the other day and it ended up exporting it as a "polyline".  I couldn't get it to export just a plain path tag over a polyline that my "character" would take as you scroll up and down.  Does anyone know how to actually get a SVG path correctly out of illustrator that doesn't export as a polyline?  Even then, I still think ScrollMagic would be the best way to go due to how easy it is to use, as long as I can fix these small tiny differences in how each browser renders things differently.  Safari is even giving me a weird issue with ScrollMagic when I refresh the page while I am scrolling down...doing so causes the "character" that is supposed to animate down the screen to be out of position COMPLETELY and will animate like 100 pixels off or something, just as an example.  I don't know if this is an issue with my code or an issue in Safari.  It does not have the same problem in Chrome.

 

If the CSS clip property works in how I'm imagining it to, that will definitely work with the dashed line animation and then I can just have the div fade in after I animate the clipped div with the dashed lines as an image and move away clipping to either the left or the right to reveal the "animating" dashed lines.  wWhat makes this even more complex is the fact that the div doesn't have fixed square corners, either.  They are using CSS corners that are cut at a 45 degree angle (like a corner of a piece of paper folded over, but without the fold; just the flat angle) instead of being rounded, so the dashed line that animates to "create" the box/div that has content has to ALSO surrounded and fit perfectly across all browsers.  I am imagining an image with the dashed line that is 100% clipped initially and then the animation is done by changing the clip CSS clip property to slowly reveal it.  After that is done, I plan to show the div itself by fading it in, then each content item within that div has to fade in.  There's 4 of those total on the page so I'm going to have to get graphics done to handle it.  Again, I worry about small pixel differences messing it up in different browsers...it has me very worried, in fact.

 

This is a large project to complete in a week for me, but I think I can get it done...I need to show the people at my new job that I can definitely handle deadlines and workload even on projects that I've never even had any type of experience with before.  Like I said, I'm a backend developer and this is 100% a front-end job.  I'm not complaining, I actually like learning this and it can never hurt to be more well rounded with regards to my skill-set and abilities as a developer.  

 

Due to confidentiality agreements at the job, I'm not sure if I'll be able to post anything specific on that codepen yet.  If I get to the point where I'm really stuck, I'll create a demo of something SIMILAR that shows the problem but without using any actual graphics or anything from the project itself other than slightly modified source code.

 

I appreciate your response more than you know.  It means a lot that people are willing to help.  Thanks yet again.  I hope this post made sense.  It's 2:30 AM here and I'm still working on this trying to get it done by Friday.  I technically had the day off today for my grandfathers funeral but both before and after that, I've been spending all my time learning and working on this.  Hope it pays off when the project is done and works as intended...