Jump to content
Search Community

Quick Tip Technique: Parallax SVG viewBoxes

PointC 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

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