How to have multiple animation on single elements?

[Ibadullah]

Hi friends,

 

I am trying to make a similar animation like them: https://experience.soletanche-bachy.com/en/second-world-war-museum-poland

 

The animation appears with a red bar at the top of the page that gets pushed out with a blue bar and finally loads with a new page. However, when I try to animate, the red-bar stays in a fixed position and the blue bar overlaps it and gets stuck. How do I fix this? 

 

My other problem is that when I click on the previous button how will the reverse functionality work?. Any help would be highly appreciated. 

 

Thank you

 

See the Pen bGGXKez by ibadullah (@ibadullah) on CodePen

[ZachSaucier]

Hey Ibadullah and welcome to the GreenSock forums.

 

It seems that you don't have a great grasp of how sequencing animations with GSAP works. I highly recommend checking out our "Getting Started" article/video and the "Writing Smarter Animation Code" article. 

 

With that being said, a few notes:

• You should put your functions outside of your click listener (and probably the document.ready function) so that they aren't created every click. 
• It'd be easier to use timelines for your animations so that's sequencing is easier.  "Writing Smarter Animation Code"  talks about how to do so.
• To have the bars more further, just change your values to higher values.
• For going the opposite directions, it'd likely be easiest to use one timeline but play through it forwards and backwards (using GSAP's .progress()/.tweenTo or .play/.reverse()). 

I think you should read those articles, try it again, and then post back here if you get stuck  

[Ibadullah]

2 hours ago, ZachSaucier said:

• To have the bars more further, just change your values to higher values.

Hi @ZachSaucier, 

Thank you so much for your reply.

 

You are right I don't have much grasp on GSAP animation, thank you for your feedback. I will read those documents and try again. 

I have managed to sort out the fading part using timeline as you suggested but there is still one issue, when I click on the next button the animation doesn't reset itself, it contains the translateX property and it doesn't work properly. I have updated my code, you can check the Codepen again please. 

 

Thank You

 

 

 

[ZachSaucier]

You can use a .set() or .fromTo() to make sure the values are what they need to be each time at the start.

[Ibadullah]

Hi Zach, 

 

Thank you so much for coming out with the solutions. I have managed to fix the things which I mentioned earlier.  

I have updated my CodePen, please review the new code. 

There are still few things that I am struggling with:
 

1. When I click on the next button I want to show the preview of the 2nd page on the current page and then zoom in to cover the full page when it's load. 

2. Currently, I am using the fake animation duration to load the content, how can I triggered the onComplete function on real time? 

3. Last, everything looks good, on full-screen browser, however when I shrink the browser size, the elements are overlapping, is there any fix for it?

 

Thank You

[ZachSaucier]

4 hours ago, Ibadullah said:

Currently, I am using the fake animation duration to load the content, how can I triggered the onComplete function on real time? 

You can either attach the onComplete to an event, other tween, or timeline or you can use a .delayedCall().

 

4 hours ago, Ibadullah said:

when I shrink the browser size, the elements are overlapping, is there any fix for it?

You make it more responsive. Either by using responsive units or changing the fixed units when the viewport is resized.

 

This is a forum focused on GSAP. Ultimately this is on you to figure things out and implement. We're happy to help if you have questions about how to use GSAP or something along those lines.

[Ibadullah]

Hi Zach, 

 

Thank You for your guidance. 

 

I am able to achieve what I was trying for, I have updated my codepen, so please have a look one final time if you can. Everything looks similar apart the smoothness. Can you recommend anything which can help me to achieve that? any Ease or duration setting that can look better. 

 

Also regarding the responsiveness issue, I have converted my units into percentage %, all my units are in % but still it's not looking good on mobile devices. Any tips would be appreciated. 

Thank You.

[ZachSaucier]

56 minutes ago, Ibadullah said:

Can you recommend anything which can help me to achieve that? any Ease or duration setting that can look better.

You can only get that through trial and error  If it a part of the animation looks jumpy, apply a more gradual ease to that section. 

[Ibadullah]

Do you mean by any specific easing or I should try different ease options? And what about mobile responsiveness? 

[ZachSaucier]

Try different ease options. 

 

For the responsiveness, you have to keep working on the parts that are not responsive. There's not a magic bullet.