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

Why would the animation open and restart?

 

You want to allow clicks and a new timeline once the active timeline has reversed. We know the toggle variable has to have a certain value in order to make that happen.

 

function reverseComplete() {
  // one line of code goes right here
}

 

  • Like 2
Link to comment
Share on other sites

Nope. It's pretty clear we're not gonna make it to the finish line here. This is what we needed.

 

function onReverseComplete() {
   toggle = "closed";
}

 

Now you can create and start a new timeline each time a box has reversed. This can be applied to your actual project now. You'd just substitute the image covers for the boxes in the timeline creation function. Here's the final version.

 

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

 

I think @Dipscom & I have gone above and beyond with you on this project and it is apparent that additional training and practice is required here. I would strongly encourage you to visit the GSAP learning area and blog. Read through everything and really try to understand it. Practice more with your own small demos and projects.

 

https://greensock.com/learning

https://greensock.com/blog/

 

I'd also recommend some basic JavaScript training. There are loads of online resources for that.

 

Best of luck to you.

 

  • Like 6
Link to comment
Share on other sites

@DD77 Craig and Pedro have done a great job in trying to help you figure out problems in your project.

 

Though I would like to intervene because we can't spend so much time on a single question. We try to keep this forum focused on GSAP API related questions only. We occasionally do help members a bit more but with the intentions that they will use it as example to learn from and can expand it into what their desired goal is.

 

I get it that you are using GSAP but still all of your questions are related to general JavaScript. Now to use GSAP or any animation library you need strong foundation of CSS and JavaScript basics so you can position your elements how you like and make them interactive through JavaScript. We don't resources to answer and explain JavaScript related questions.

 

We have already provided you some helpful resources that will help you build your foundation. And we would be happy to point you to more resources to learn from if you need.

 

We also have a sub forum where you can post to hire a freelancer to help you with your project. Or you can also look for a personal instructor. Feel free to post  your requirements at the following link: https://greensock.com/forums/forum/15-jobs-freelance/

 

Hope this will help you resolve problems in your project. All the best.

  • Like 7
Link to comment
Share on other sites

 

4 hours ago, DD77 said:

I'm not sure, but if I click twice on the same button, it doesn't restart the animation.

 

This affirmation is not correct, is it? You don't mean when you click twice in the same button. You mean when you click on a button A, then click to go back and then click once again on button A.

 

Now, how is this new question any different from everything we have been discussing here?

 

Go over your code, line by line, read and understand what each and every single line is doing. If you can't understand what the code is doing, go and take a course on basic JavaScript because you really need it.

 

I will give you a hint to solve your issue: you need to remove ONE line from your code and it will work. I will not tell you which line it is.

  • Like 2
  • Haha 1
Link to comment
Share on other sites

Hello @DD77

 

I would suggest that you read and go over what @PointC, @Dipscom, and @Sahil advised in previous post replies in this topic. I noticed that they are having to repeat and answer the same questions over and over again. There is just not enough time in the day to help you build your entire project.  Especially when most of the questions are not GSAP related, and it doesn't seem like you are reading their great advice.

 

We love to help everybody but it seems to me that your not even reading all the great help they are providing you. Especially with all the time they have spent going above and beyond to help you with non related GSAP questions. Questions that are really more about javascript and CSS basics. 

 

It doesn't look like you are trying to take there advise to heart, or even appreciate all their hard work in helping you, on their free time. All I can do is hope that you will re-read this entire Topic from page 1. Please go over all the examples they provided, and visit the Mozilla Developer Network (MDN) to learn more about Javascript and CSS.

 

MDN JS: https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

MDN CSS: https://developer.mozilla.org/en-US/docs/Web/CSS

 

This way we can focus more on the GSAP API and not keep repeating questions that have already been answered in previous pages and post replies in this topic by these great scholars and gentlemen. 

 

Thank you :)

  • Like 4
Link to comment
Share on other sites

I think by now you know this forum is an amazingly friendly place. We’re all trying to help you.  Can you imagine any other online communities that would have let this thread go on for 4 pages and 80+ responses? 

 

I have been exactly where you are now. I had lofty goals and big JavaScript ambitions, but hadn’t put in the work. I had many false starts and a copy/paste mentality. I wrote a whole thread about my JavaScript journey in hopes that it would inspire others to do what I did. Make that decision to truly learn to code your own projects.

I certainly don’t know everything, but I know so much more than I knew a few years ago and I can tell you from personal experience, the work is worth it. Once everything starts clicking for you, the coding frustration turns into fun and the possibilities are endless. 

 

I encourage you to follow the advice everyone has offered. Read the GSAP blog & docs and visit the learning area. Bookmark all the links @Jonathan has provided. Create your own simple demos. Reverse engineer the work of others. If you don’t possess the skills, knowledge and experience, you must admit that to yourself. 

 

I’d go so far as to say forget everything you know (or think you know) and start from scratch. Take the basic online JS and CSS classes and don’t move on to intermediate or advanced lessons until you completely understand every concept.

 

All we can do is point you in a new direction and offer encouragement. The rest is up to you.

 

Best of luck to you.
 

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