[Animation problem with position paramiter - timings]

@PointC I finally managed to put it back together. I will only apply your previous tips   Thank you so so so much for everything... 🙏🏻❤️

[Animation problem with position paramiter - timings]

@PointC I am now trying to implement it into the project as it is in the demo video, but again it doesn't work well for the second price box...

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

 
 

[Animation problem with position paramiter - timings]

@PointC  I think I did it boxes prices like in the demo video, please give me a feedback... Thank you

See the Pen xxRdBqM?editors=0110 by mary_pieroszkiewicz (@mary_pieroszkiewicz) on CodePen

 

[Animation problem with position paramiter - timings]

@PointC

 

Here https://css-tricks.com/writing-smarter-animation-code/ in this tutorial: "Use functions to create and return timelines" Carl shows doing a function for the same code in the animation, but I have different label names in my project and I don't quite know how it works in that sense...

[Animation problem with position paramiter - timings]

@PointC thank you for answer.

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

[Animation problem with position paramiter - timings]

@PointC I found such an example

on the forum, I am trying to use it in the elements of changing price boxes.

Please help me, I can't cope with the box rotation... THX

[Animation problem with position paramiter - timings]

@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 ...?

[Animation problem with position paramiter - timings]

@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

[Animation problem with position paramiter - timings]

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

[Animation problem with position paramiter - timings]

@PointC yes a little help me, but I added "myLabel" label for .showerCabin and .tiles and it doesn't work for me, What is wrong...?

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

[Animation problem with position paramiter - timings]

@PointC Thanks - I corrected syntax for GSAP3 in my animation project.

But I still have a problem with setting the 3 elements in the animation to animate simultaneously...

[Animation problem with position paramiter - timings]

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

[Banner Ad Amination]

I managed to do it:

However, I can't cope with arranging elements timing between sequences...

[Banner Ad Amination]

I don't know, how I make a price box perspective rotate and transition the second product at same time
 

I don't know, how I make the transition between the first container with the product and the second container and between the second container and the third container to keep it all smooth
 

As it is in this video presentation.

My Codepen in the first post.

Thank you for help.

[Banner Ad Amination]

Thanks for all answers.
 

I will not start a new topic.

How to make a price box animation skew backwards and fully rotatle forward. My Codepen project above. Thank you for tips.

[Banner Ad Amination]

I linked a demonstration video of how the Ad animation looks at, which I will code in HTML /CSS /JS. I gave this video to make it easier for me to direct what I have to choose for this animation - TweenMax vs TimelineMax or TweenLite vs TimelineLite

 
geedix thank you for your answer and information

[Banner Ad Amination]

I create my first Ad Banner Animation.

The file size should not exceed 150kb

Animation presentation here: http://www.marypieroszkiewicz.com/animation-gsap/index.html

I am asking for tips, what is enough for this ad amination TweenMax vs TimelineMax or TweenLite vs TimelineLite

Thanks for help

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

[Animation images and text]

Why doesn't work the animation - ball and device.

 

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

 

Thank you for help

[ScrollTrigger - image stretching along the X axis]

How am I going to get such an effect when scrolling (ScrollTrigger) where the image stretching along the X axis (it is about the rubber stretching effect).
Truly thank you for help.

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

[Dot scroll the next section ScrollTrigger (or scrollMagic)]

ZachSaucier Thank you so so so much for your help

Now I need to implement it in my project, so the "m.pire" logo where there is an orange dot during the scroll should spread over the entire screen and appear in the second section where the words "Wszystkie Usługi"

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

[Dot scroll the next section ScrollTrigger (or scrollMagic)]

I need to do a dot animation when I start scrolling, in the first section it has to scale across the width of the window when it goes to the second section it is supposed to go back to the original dot size and it has to appear in the middle of the second section. Thank you for your help.

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

[Animation images and text]

okay

[Animation images and text]

Thank you for the tips.

[Animation images and text]

Thank you for the tips.

[Animation images and text]

Eternal gratitude for help, and for additional information. Thank you very much ❤️

Another issue is the change (transition) of images as it is shown in the video that I attached in the post ...