Jump to content
Search Community

Map animation SVG

Altea test
Moderator Tag

Go to solution Solved by mikel,

Recommended Posts

Hello, I'm writing an animation for a Map.

As you can see when a button on the left is clicked I draw the line and a circle (sometimes more the one) that indicate a point on the map.

The animation is working fine but I have a problema when I start the animation one right after the others.

 

I wrote this lines

tlMap.set(mapCircles, { autoAlpha: 0 });
tlMap.set(mapLines, { drawSVG: "0 0" });

So I can reset the lines and circles of all the points when I click on a button.

But if you click on a button and right away click on a second button you wil see that the first animation will still be going and I would end up with lines from more then one button showing on the map.

I think i need a reverse on all the other animations but I cannot figure out how to do it.

 

I started to move away from jQuery to Vanilla JS, if you find something that is done wrongly I'll appreciate if you point it out for me.

See the Pen zYPNXry by skie78 (@skie78) on CodePen

Link to comment
Share on other sites

Thank you Mikel for the answer,

just to make sure if I understand it correctly the difference in you example is that the the animation block is declared outsite the forEach so inside the gsap I can call all the animation to "reset" themself.

I could probably apply the same approch and use the timeline controls like reverse correct?

Link to comment
Share on other sites

There is no animation outside of the block. He's just setting the initial opacity. 

 

Look a little bit deeper at what's going on. When you click the button, it is setting all the blocks (ani) back to their initial position.

 

.to(ani, {x:0, opacity:0.1, duration:1})

 

Immediately after that, he is animating the actual target (ani[i]). It's happening at the same time as the previous .to(), so even though all the ani blocks are in the first .to(), the second .to() will cancel it out.

.to(ani[i], {duration: 3, x: 200, opacity: 1},0);

 

You can also store animations on an element.

 

myElement.animation = gsap.timeline()...

// then you can control wherever you want
myElement.animation.reverse();

 

  • Like 3
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...