Jump to content
Search Community

SVG animation

DD77 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

I have to animate this "button" which will trigger another animation.

On mouseOver, it should animate the stroke-dasharray to white.

I need an animation clockwise that animate all the strokes. I've not a clue how to animate the stroke. 
Any idea ? Would any of you wise people able to help? 

Thanks.
 

See the Pen dgRNJN?editors=1010 by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

If you're using a circle as a mask, all you need to do is rotate that circle -90 degrees. That will work in most browsers, but if you read the post @Carl mentioned, you'll see that the most trouble free approach is converting it to path. 

 

If you have an updated demo, we can take peek.

  • Like 2
Link to comment
Share on other sites

Well, you're moving around a full screen image. That's pretty hard on the browser. My personal preference for something like this would be to use a mask or clip-path. I showed you that technique in your other thread here:

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

 

Regarding your question about revealing from the middle. You're using width/height which always start at top left. You could animate the xPercent of the image at the same time as you're animating the width of the parent. Something like this should work.

 

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

 

Again though, my preference here would be a clip-path or mask. I think you'd get better performance and you could use all kinds of shapes for interesting transitions.

 

Happy tweening.

 

  • Like 4
Link to comment
Share on other sites

@PointC  Thanks for your suggestion, really helped. 
Is it possible to make the images showing with a clip-path? I can't figure it out. 


I have this 3 images, which are showing fine, but I don't have the right experience. 
I should see the background image (body). 

How can I achieve this? 

 

 

 

 

 

 

See the Pen yRogdW by davide77 (@davide77) on CodePen

 

Link to comment
Share on other sites

An easy way would be to put the images into the SVG and give them each a unique mask. 

 

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

 

This thread/topic has strayed pretty far from GSAP support. If you need general consulting or complete projects, you may not yet have seen GreenSock has a new Jobs and Freelance section.  You may want to offer a gig over there. There are lots of talented people around here that may be available.

 

https://greensock.com/forums/forum/15-jobs-freelance/

 

Happy tweening.

 

 

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Hey DD77,

 

Long time no speak! Hope you have been well.

 

There is nothing wrong with using the .reverse() method, actually, that is the method to use if you want to rewind your animation. I would say your issue is that you are not keeping track of which section you have open and which are closed.

 

For that, you can create an object to hold a reference to which section is open and use that to control your timelines. Something along the lines:

 

var controller = {
  currentOpen: undefined
}

$(".button_one").on("mousedown", function() {
  if(controller.currentOpen) controller.currentOpen.reverse();
  animation_one.play();
  controller.currentOpen = animation_one;
});

$(".button_two").on("mousedown", function() {
  if(controller.currentOpen) controller.currentOpen.reverse();
  animation_two.play();
  controller.currentOpen = animation_two;
});

$(".button_three").on("mousedown", function() {
  if(controller.currentOpen) controller.currentOpen.reverse(); 
  animation_three.play();  
  controller.currentOpen = animation_three;
});



//BACK BUTTON ACTION
$("#back-top").click(function () { 
  controller.currentOpen.reverse();
  controller.currentOpen = undefined;
  TweenMax.to(".svgButton", 0.8, {className: '-=animate',autoAlpha:1 }, 0)
  TweenMax.to(".svgButton", 0.8, {className: '-=active',autoAlpha:1 }, 0)
})

 

  • Like 5
Link to comment
Share on other sites

Well, I can't really say as I don't know how you have implemented my example code but I can hazard a guess.

 

If you are clicking on the same button twice it would mean you are calling the same function twice, running the same code twice, therefore, telling the timeline to reverse and play at the same time.

 

Let's try something different this time, rather than me writing code to figure things out, tell me what behaviour do you expect from your animation when you click the circle button twice?

  • Like 2
Link to comment
Share on other sites

By clicking the button twice I meant:

When the button is clicked than I return to the 3 button screen if I click the button that I previously clicked the button won’t work. 

I completely understand your point and I will see what I can do. I hope to figure something out. 

Link to comment
Share on other sites

This is what I understood from your last response, correct me if I am wrong:

 

Click on button A > Animation plays;

Click Back > Animation reverts;

Click on button A > nothing happens;

 

I can't say why that is happening as I don't know how you have implemented the suggested code. But, this shouldn't be something too hard to debug. Have you checked the console? Do you see any errors? Have you tried to log out the variable as you click around?

Link to comment
Share on other sites

Yes, exactly! I need to figure it it out. 
Click on button A > nothing happens, I need t understand why stops working

I Saw that the className: '-=animate' doesn't get removed. But if I remove it manually from the console the button still doesn't work.

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