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

Right... I see.

 

Well, let me try to walk you here from being stumped towards your bug into freedom.

 

When you click on the button. What are you telling your program to do?

 

I see two events being triggered:

 

1) doCoolStuff() is being called from the event listener that's added in line 14 of your code.

2) An anonymous function being called from one of your jQuery handlers on lines 101, 107, 113 and 121.

 

Now, ask yourself, do you understand what's going on inside the doCoolStuff function? And equally important do you understand what is going on inside your anonymous functions being independently triggered via your jQuery call?

  • Like 1
Link to comment
Share on other sites

on doCoolStuff I initiate the masking animation anim

on the jQuery functions I play and revessing the buttons but not the masking animation .

So I guess I need to connect the doCoolStuff with the buttons? I'm not sure I know how. I tried to do anim.reverse(); :-( 

Link to comment
Share on other sites

if newTarget is the same thing and has the same value as oldTarget, stop here, return nothing to whoever called the function.

 

 

---------------

 

 

You know we want to help you DD77, we like helping people out. But there's only so much time we can dedicate to one single individual.

 

We tell everyone here that we keep this forums GSAP focused, otherwise we would be overwhelmed. Of course, we do also answer the odd generic JavaScript question here and there because we can. What we cannot is teach every little thing that exists on complex setups.

 

The issue you have at the moment, has nothing to do with GSAP, it's simply how you are controlling the state of your 'application'. The solution is the answer I gave you earlier. It is now on your hands to understand the code you wrote yourself and adapt it to suit your needs.

 

You need to go over your own code, understand exactly what each line is doing. Until you actually understand the code, you will be struggling without knowing what to do. Try smaller things first, then put those smaller things together to make a bigger thing.

  • Like 4
Link to comment
Share on other sites

If you don't understand what I wrote for you, follow @Dipscom's advice from above. Start small and build from there.

 

Make a fork of my demo and strip it down to the bare minimum. Forget the image reveals for now. Just get the buttons working the way you want. Drop in a simple console.log() so you know things are working correctly. Once that's working and you understand why it's working, fork it again and start adding the images. Keep multiple copies of the demo in various stages of completion. That way, if something goes wonky, you can always jump back to a working version in which you understood everything.

 

I'd also highly recommend the use of loops.  See how your timelines and button handlers are exactly the same? Those could be easily created (& managed) in a loop. You can use a regular for loop or jQuery's each() method makes that type of thing super easy too. 

 

Happy tweening.

  • Like 5
Link to comment
Share on other sites

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


I can't figure it out this guys, I'm sorry, the animation goes back fine but for some reason, the button doesn't previously click doesn't click! 
 am I that far? 
 

$(backButton).click(function () {
        
  TweenMax.to(covers[oldTarget], dur, {attr:{x:0, width:2000}}, 0 );
  TweenMax.to([reveals[oldTarget], covers[oldTarget]], dur, {attr:{x:1000, width:0}});

  
});

Link to comment
Share on other sites

Your issue is still the same. You still have two separate event listeners with their separate functions doing separate things. And you are still not controlling the state in your jQuery function.

 

I know it will look like I am being mean on purpose but I am not. I really, honestly am not. I am trying to point out the basics you seem to be missing in your knowledge.

 

I will circle back to a question that I have asked you before:

 

21 hours ago, Dipscom said:

Given the context of the bug you are hunting and the user behaviour you are mocking, what is this specific line of code inside doCoolStuff doing?

 


if (newTarget === oldTarget) {return;}

 

 

- And have also the given asnwer:

 

21 hours ago, Dipscom said:

if newTarget is the same thing and has the same value as oldTarget, stop here, return nothing to whoever called the function.

 

Again, you need to understand what is happening here. Otherwise you will continue to need others to write code for you.

 

Finally, as a mercy, here's another hint. Your newTarget cannot be the same as your oldTarget when you click on the button.

  • Like 3
Link to comment
Share on other sites

I'm still not seeing an image open a second time. I also see that I'm able to click an image button during the opening animation and while the image is open which causes it to close immediately. I can also click either of the two inactive buttons while they fade out and that too causes problems.

 

I asked about the user being forced to close an active image because it's actually a bit easier to code under those circumstances. If that active timeline must reverse completely before a new button is clicked, do you really need to create a new timeline to close it? Or does GSAP have a way to reverse that active timeline?

https://greensock.com/docs/TimelineMax/reverse()

 

Preventing clicks while a timeline is active.

https://greensock.com/docs/TimelineMax/isActive()

  • Like 2
Link to comment
Share on other sites

I won't write it for you, but I'll help you. Look at this demo.

 

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

 

Right now you can click the 1, 2, 3 buttons to create a timeline and animate the 1, 2, 3 box. Can you think of a way to use the toggle variable on line 6 to write some logic for the doCoolStuff() function that will prevent additional clicks once a timeline is active?

 

 

 

  • Like 2
Link to comment
Share on other sites

We're not assigning a function to the variable nor are we concerned about reversing the animation at this point. Think about what you're asking the function to do. You're asking it to create a timeline for one of the boxes and animate it to the new y position. But you only want a new timeline if certain conditions are met. That condition is "Hey, make me a new timeline only if my toggle variable is 'closed'. "  How can we check that variable and only create a new timeline if it's "closed"?

 

Note: We could use the isActive() method here, but I'm showing you how to do it with a variable because we might need both depending on your final needs. I'm using "closed" because your image cover is either closed or open. You could use true/false, 0/1, 'apple'/'banana'. It doesn't really matter.  

  • Like 4
Link to comment
Share on other sites

Just to simplify, all I'd like you to do at this point is this:

 

// wrap these two lines in some logic so they only fire if the toggle variable is "closed"  

anim = new TimelineMax();
anim.to(targets[this.index], 1, { y: -50 });

 

There are only a few steps to the complete solution you need for your project and this is step one. Going slowly will help you understand everything as we go.

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