Jump to content
Search Community

Animation problem with position paramiter - timings

Mary Pieroszkiewicz test
Moderator Tag

Recommended Posts

I have a problem with setting the correct timings while traversing the animation. I don't know how to set it up well, how addLabel works ...

I have read some stuff like

, https://greensock.com/docs/v3/GSAP/Timeline/addLabel() ,

Please could anyone show me how to make a smooth transition for a shower cubicle and tiles plus price boxes at the same time as it is in the demo video:
http://www.marypieroszkiewicz.com/animation-gsap/index.html

See the Pen abBpxMV by mary_pieroszkiewicz (@mary_pieroszkiewicz) on CodePen

Link to comment
Share on other sites

Hi @Mary Pieroszkiewicz

 

Are you asking where to put the label on the tweens? Like this:

//insert at the "someLabel" label (if it doesn't exist yet, it gets added to the end of the timeline)
tl.to(".class", {x: 100}, "someLabel");

More info:

https://greensock.com/docs/v3/GSAP/Timeline

 

Just FYI - you're loading GSAP 3 but still using the GSAP 2 syntax. I'd highly recommend making the transition to GSAP3.

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Looks like you have a .set() that would also need that label so the tiles will be visible. I've forked your demo and commented out everything except the .showerCabin and .tiles tweens. 

 

See the Pen 037a036a597ca5f411c25a43c100cb8f by PointC (@PointC) on CodePen

 

Is that what you needed?

 

PS Just FYI - You also have a conflict for the tiles[2] target on lines 24 & 25. you've asked those tweens to start at the same time but the tiles[2] target is moving to different x/y positions in each. 

  • Like 4
Link to comment
Share on other sites

@PointC I have a big problem with smooth transitions between one product and another product with the price box too, and also the prospect is not displaying properly.

 In smooth transitions of what is wrong and what is still missing. Thank you for help.

See the Pen mdOmpaK by mary_pieroszkiewicz (@mary_pieroszkiewicz) on CodePen

Link to comment
Share on other sites

19 hours ago, Mary Pieroszkiewicz said:

@PointC Can I add a second new label to an animated element that already has a label assigned...?

You're not really adding labels to elements, but to tweens. Yes, you can certainly add another label to another tween with an element that has previously been animated in the timeline. When I mentioned earlier that you had a conflict I meant two tweens at the same time animating the same element property to two different values. You want to avoid that. ;)

 

16 hours ago, Mary Pieroszkiewicz said:

@PointC I have a big problem with smooth transitions between one product and another product with the price box too...

I'm not sure what you're asking here. Do you mean the second price box appears over the first? If so, you'll need to animate the first one out of the scene via an opacity or position tween. If that's not what you meant, we could use some more details about the expected result. 

 

When you're ending up with a wall of code and a lot of the same animations for each product, you may want to look at creating the timelines in functions and return them to a master timeline. This article will quickly get you up to speed on the technique.

https://css-tricks.com/tips-for-writing-animation-code-efficiently/

 

Happy tweening.

  • Like 4
Link to comment
Share on other sites

@PointC thank you for stuff :)

Can you help with the animation of the boxes with the prices, it is not like that in the demo video: http://www.marypieroszkiewicz.com/animation-gsap/index.html

 

 

Codepen:

See the Pen mdOmpaK by mary_pieroszkiewicz (@mary_pieroszkiewicz) on CodePen


BTW. The question as to creating one function of repeating elements, there are diffrent names for lebels. What to do in this case ...?

Link to comment
Share on other sites

I would recommend making a new simplified demo with only the price boxes and try getting the animation the way you like it without the rest of the timeline. Breaking things down to little pieces is the best way to learn and find out what may be wrong in the larger project. 

  • Like 4
Link to comment
Share on other sites

If you're creating timelines in functions you can use labels on that timeline as you normally would.

 

When you use the .add() method to make it a child of a master timeline, you can use a label as well. So something like this:

master.add( functionToCreateTimeline(), "someLabel" );

Is that what you meant?

  • Like 4
Link to comment
Share on other sites

That looks like the video to me. Good work. :)

 

The only tip I'd offer is you can shorten up your code a little bit. The default duration of the tweens is already 0.5 so you don't need a duration on any of those tweens. If your default duration is a different value, you can add it as a default to the timeline like this.

const tl = gsap.timeline({
  repeat: -1,
  repeatDelay: 1,
  defaults: { duration: 0.75 }
});

You can add other defaults too. If, for example, all the boxes rotated to -90 you could add that in the defaults so you don't have to add it on each tween. It's not something that really applies to this project, but something to keep in mind for future work.

 

It's looking good though. 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...