Jump to content
Search Community

animation with a mask isn't working the way i expect

chevohin test
Moderator Tag

Recommended Posts

Hi guys, please help me to find a solution to my problem.

 

I have 6 elements that are all nested in #allElements group.

Also I have a white mask (#maskCode) inside the defs which is the same shape as the red area.

You can see how all the elements look like and where they are located in the attached image.

I created a mask because I want only an element that is inside red area to be seen.

 

When I click "up" or "down" button, I move #allElements 110px up or down, and I don't move the mask. But I always see only one element.


So my first issue is why is it so and what is the best way to fix it?

forum.jpg

See the Pen KKgWEwd by chevohin (@chevohin) on CodePen

Link to comment
Share on other sites

And my second issue is when I'm clicking on the buttons with a good delay, everything is okay, they move 110px up every time and 110px down, so all the elements should be always in the center of the red area in the end of each animation.

 

But if I click buttons before the animation finishes, it starts a new animation with current middle coords, so the elements get in a bad position.

 

In my next pen I tried to make an independent timeline and play it with myTimeline.play(0) but it looks like it isn't relative, so it always start from the same point. And "repeatRefresh: true" doesn't help.

 

See the Pen QWKpoBK by chevohin (@chevohin) on CodePen

Link to comment
Share on other sites

For the mask issue, you'll want to use a group inside your masked group and animate that rather than the masked group itself.

See the Pen 7207e8e3f2290baa6e24f057fc290c5e by PointC (@PointC) on CodePen

 

For the rapid clicks, I'd probably check to see if the element is tweening and return if true. You could also create a timeline and use the up/down buttons to increment/decrement the position of the group. Just my two cents.

 

Happy tweening.

:)

 

  • Like 6
Link to comment
Share on other sites

Dear Craig, thanks a lot for your answer, i really appreciate your help.

Everything is clear for me with my first issue now.

 

But I couldn't understand yet how to fix the second one.

You said about two ways.

 

The first one was:

43 minutes ago, PointC said:

For the rapid clicks, I'd probably check to see if the element is tweening and return if true.

 

Is there a way to see if the tween is active if it is just a single tween not stored in a variable like it was in your pen?

I don't know this way so I created a new variable for the tween.

let tweenUp = gsap.to("#moveGroup", {y:"-=110", paused:true});

and then in my goUp function I check if the tween is active:

if (!tweenUp.isActive()){
    tweenUp.play(0);
  }

Now it checks correctly if the tween is active, but it started using not relative coordinates, so it always repeats the same animation with the first two elements. Adding "repeatRefresh:true" to the tween doesn't help.

 

The whole codepen with this attempth is here

See the Pen abmJxNP by chevohin (@chevohin) on CodePen

 

And the second way you mentioned was:

54 minutes ago, PointC said:

You could also create a timeline and use the up/down buttons to increment/decrement the position of the group.

 

Isn't it the same way I tried in the codepen number 2 (with the question about the second issue)?

Their I created two timelines and tried to increment/decrement group's coords.

Here is the new version of that pen with fixed mask issue:

See the Pen JjRWVZP by chevohin (@chevohin) on CodePen

It has the same problem with not relative coords.

 

 

Link to comment
Share on other sites

10 minutes ago, chevohin said:

Is there a way to see if the tween is active if it is just a single tween not stored in a variable

Yep. That would be the gsap.isTweening() method. 

https://greensock.com/docs/v3/GSAP/gsap.isTweening()

 

Here's a fork showing how to add that to your listener functions.

See the Pen 3ec13643cf7f56c1c2abeb4d594a48f6 by PointC (@PointC) on CodePen

 

When I mentioned a timeline, I meant that you'd animate the playhead of the timeline to a specific time() or label. Though I think I'd go with the isTweening() method as it's a bit easier IMHO. 

 

You may also want to add a check to limit how far in each direction the group can travel. That way you don't go past the first or last icon. Just my two cents. YMMV.

 

Happy tweening.

:)

 

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