Perspective manipulation of SVGs in GSAP

[Scriviante]

Hey guys,

Sorry if the title is misleading - not sure what to call this effect. I have a client who would like to create horizontal scrolling sections with text that appears to be attached to points along an image by an SVG line.

You can see the effect here. In particular, look at the labels that are connected to items in the image.

Basically, there is a line connecting 2 points - one attached to the text in the foreground and one attached to the item in the image in the background. The points move at different speeds across the screen to simulate camera perspective. The cool part is that the SVG line always stretches and changes to connect the two dots. 

I'm contemplating writing a function to create this effect myself, but I was wondering if you know of a solution that already exists that uses GSAP?

Look forward to your replies,

Thanks,

Andy

 

 

[PointC]

Hi @Scriviante 

 

Welcome to the forum and thanks for being a Club member.

 

That's a pretty cool site. Parallax is the effect you're describing. You won't find an 'out-of-the-box' solution to do that for you, but it shouldn't be too hard. If you look around the forum you'll find several threads about attaching start/end points of lines to other elements. Here's one that comes to mind.

 

Hopefully that helps you get started. If you have any GSAP related problems or questions, post a minimal demo and we'd be happy to help. 

 

Happy tweening and welcome aboard.