Jump to content
Search Community

Transition between scenes with viewbox

Marina Gallardo test
Moderator Tag

Recommended Posts

Hi team,

 

I'm trying to create an animated map with a 2d parallax effect. Starting from base, I'm having issues to achive the goals I want for the transition between scenes. As you see, I move through the viewbox to pan and zoom, but what I really want is to make a transition with a zoom in between them all at the same time (a want a smooth bounce between them). Now I have a timeline but it stops at the middle, makes zoom and then go to the next scene. Also, this timeline is getting me issues with the scroll back.

 

Any tips for achiving my goals?

 

Other questions related:

- it is possible to create a parallax vibe with the mouse easy with SVG elements or is a headache? My map has a lot of elements inside and I don't know how to deal with this idea without being a nightmare.

 

https://codesandbox.io/s/elated-gates-eyuzm

 

Thank you very much ❤️

 

See the Pen by s (@s) on CodePen

Link to comment
Share on other sites

1 hour ago, Marina Gallardo said:

I am having issues with the ease attribute, seems to ignore the individual apply just listen to the default....

This is because your eases are invalid. You're mixing the old way of eases with the new way. Just use ease: "none". For more information check out the GSAP 3 migration guide:

 

2 hours ago, Marina Gallardo said:

Any tips for achiving my goals?

Look at the other threads that ask about this sort of thing :) 

 

 

2 hours ago, Marina Gallardo said:

- it is possible to create a parallax vibe with the mouse easy with SVG elements or is a headache? My map has a lot of elements inside and I don't know how to deal with this idea without being a nightmare.

It depends exactly what you mean. Zooming in and out using the viewbox is simple. Combining that with scaling elements based on some layering system is not hard. But actually moving things along the z direction? That's hard because SVG doesn't support the z direction. If you need that it might make more sense to use WebGL (or just DOM elements if it's super simple).

  • Like 3
Link to comment
Share on other sites

Thanks, I've read those threads but still doesn't know how to achive what I want. Can you take a look at my example for understand my need?  I need to make a zoom in-out just in one event without pause. Those threads are just making a click zoom, that's easy... but I need a zoom-in-out while the transition. Any ideas please? I'm stuck at this for 3 days...

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