Jump to content
GreenSock

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

Quick Tip Technique: Parallax SVG viewBoxes

Recommended Posts

Here’s another handy little SVG technique for the GS community. I was creating some infographics for a landscaping client and needed an interesting effect for a slider so I went with parallax viewBoxes.

 

I hooked mine to a draggable, but you could tween on button clicks too. The trick is that you’re always showing the same size viewBox for each SVG, but the start point is offset for each one. In my demo, the SVG is 12,000 x 1,000 and the viewBox for each one is 2000 x 1000. 


The starting viewBox for each is (5000 0 2000 1000). That centers each one on the SVGs. At the extreme left position of the draggable the viewBoxes start at (foreground:0, middle:1500, background:3000). At the extreme right position of the draggable the viewBoxes end at (foreground:12000, middle: 10500, background: 9000). The math in the drag handler will be determined by your SVG size and the draggable min/max. 


If you want to try this, it’s best to plan how far you’ll be allowing each layer viewBox to travel while creating your artwork so you can line things up correctly. In my demo, the artwork on the foreground at x:0 will line up with the artwork at middle x:1500 and background x:3000. Adding guides in your vector software for those boundaries makes setup a breeze. Of course, you can make this work with any size SVG and the effect can be extreme or subtle depending on your needs.

 

See the Pen LmOvEQ by PointC (@PointC) on CodePen

 

Happy tweening everyone.

:)

 

  • Like 7
Link to post
Share on other sites

Nice work, @PointC! Thanks for sharing the technique. 

  • Like 1
Link to post
Share on other sites

Maybe it's time for name change PointSVG?

  • Haha 5
Link to post
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.

×