Stop new timeline from scrolling over other timeline

[NoonyE]

Working my way through this project. I know about this thread as it's my partner and we are just trying to figure things out: 

The next issue I have run into is my part2 function is overlapping my first timeline and I need the rondel to finish first and then move onto part2. Any help here would be very appreciated. 

 

Thanks!
 

See the Pen MWPWyQa?editors=1010 by sevans77 (@sevans77) on CodePen

[Rodrigo]

Hi,

 

Isn't this something that might already been resolved on the codebase on these threads?

Is becoming a bit confusing to track all these threads both of you have created in order to get this animations working, especially since the examples' code doesn't seem to match in some of them. I strongly recommend you both to get in touch with each other and consolidate your codebase (Git is great for that).

 

In the case of this particular thread the issue is in the start point of your ScrollTrigger instance being created in the part2 method. Adding markers to it can clarify that:

ScrollTrigger.create({
  trigger: "#section02",
  start: "top top",
  end: "+=" + tt,
  pin: true,
  animation: action,
  scrub: 0.5,
  markers: {
    startColor: "fuchsia",
    endColor: "fuchsia",
    indent: 250,
  }
});

Maybe there are some issues with your layout. Also in your part1 method you're pinning an element that is inside the main container for that particular section trigger: ".image-unmask" you should try pinning the entire section wrapper, same with the next content as well.

 

I think you should go back a step or two and first get your HTML and CSS working as expected, then create the animations without ScrollTrigger, just GSAP (normally I create a looping timeline  or add a button in order to restart said timeline over and over to check that everything works as expected) and finally when your animations are working as expected, plug ScrollTrigger to the mix.

 

Unfortunately we don't have the time resources in these free forums to provide custom complex solutions to our users, as much as we love challenges. You can contact us for paid consulting or you can post in the Jobs & Freelance forums in order to find some help.

 

Sorry I can't be of more assistance.

Happy Tweening!