Jump to content
GreenSock

DD77

SVG animation

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

Sounds like you'll need to use a mask.

 

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

 

Happy tweening.

 

  • Like 3
Link to comment
Share on other sites

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

Firstly thanks for your great support as usual.



Ok, I tried to use your svg and Tween on my animation.  For some reason is not working

 

Link to comment
Share on other sites

@PointC Any chance to make the starting point at 12 o'clock? 

Link to comment
Share on other sites

Please see PointC's wonderful post here:

 

  • Like 3
Link to comment
Share on other sites

@Carl wonderful I feel the energy on the post! however I can't get rotate it as is quite complex my svg. I have also a mask.

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

I've no idea what should be happening with the images, but here's a fork with the circles starting at 12 o'clock.

 

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

Since all your timelines and listeners are the same, I'd also recommend a loop to create everything.

 

Happy tweening.

 

  • Like 3
Link to comment
Share on other sites

@PointC would you be able to help me to improve the animation of the images please? 
the transitions are a bit glitchy a should have the feeling that they opening in a better way when I hold the buttons.
in the middle, is the idea 
 

See the Pen yRogdW?editors=0110 by davide77 (@davide77) on CodePen

 

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

@PointC You are a star! Is quite your fault to be honest, you push me to far with your suggestions and I get to try to make thing to big for me! But I'm learning and I learned a lot from you! 
Thanks, for your support and help!

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

@PointC
After all your precious help I achieved the below...
I was wondering if you could help me to revert the animation in a better way? I doing anim.reverse(); when I click the back button. is it the right way? 
 

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

 

Link to comment
Share on other sites

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

Hi Dipscom,

yes, long time! I'm glad you came to the rescue! 
thank you so much for this! really helped.

  • Like 2
Link to comment
Share on other sites

@Dipscom
Mate, I just realised that if I click twice a circle button, stops working. 
Why the animation doesn't  start again?

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

Ok, let us know how you get along with that.

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