scroll animation, scroll trigger,

[Arun_ms]

Hello guys, here what im trying to achieve is when scrolling the background color have to be change like in the demo, but the text reveal animation timing is bit off, i tried to make timeline but still its not working as expected, when the background color changes from white to black its needs to fill the full viewport height and only after that  the text animation to be stated, and when its fully revealed the .wapper class animation needs to be fill the screen, which is coming from behind the revealed text . the timeline is not working also tried "pin" on the .three section. 
if someone can help it will be extremely helpful

See the Pen WNVpaaP?editors=1010 by Rare4pple (@Rare4pple) on CodePen.

[Arun_ms]

See the Pen yLmMwXe by Rare4pple (@Rare4pple) on CodePen.

this is the animation i mentioned  on the above post , after the text reveal animation, but here the horizontal scroll is kinda broken when scrolling reverse ? is there something wrong with the code. 

[Rodrigo]

Hi,

 

You have two different demos that are doing two different things. On the first demo I can't see what's actually wrong, everything is working the way it should as far as I can see.

 

For the second demo the main issue is this:

function startHorizontalScroll() {
  let horizontalSection = document.querySelector(".horizontal-scroll");
  let pinWrap = horizontalSection.querySelector(".pin-wrap");
  let pinWrapWidth = pinWrap.offsetWidth;
  let horizontalScrollLength = pinWrapWidth - window.innerWidth;

  // Start horizontal scrolling
  gsap.to(pinWrap, {
    x: -horizontalScrollLength,
    ease: "none",
    scrollTrigger: {
      scrub: true,
      trigger: horizontalSection,
      pin: true,
      markers: true,
      start: "top top",
      end: () => `+=${pinWrapWidth}`,
      invalidateOnRefresh: true
    }
  });
}

// Call the function to start horizontal scroll after the clip-path animation
tll.add(startHorizontalScroll, ">");

You are adding a function to a timeline. In these cases GSAP executes this function when the timeline's playhead reaches that point, that's why you get such erratic behaviour. To avoid that you should either use call() or just add the new instance to the timeline manually, not inside a method. Also you're adding a child Tween with a ScrollTrigger config in it to a Timeline, that creates a logic problem as explained here:

https://gsap.com/resources/st-mistakes/#nesting-scrolltriggers-inside-multiple-timeline-tweens

 

This is a better approach:

const layers = gsap.utils.toArray(".layer");
const pinWrap = document.querySelector(".pin-wrap");
const amount = layers.length;
gsap.set(layers, { zIndex: (i) => amount - i });

const tll = gsap.timeline({
  scrollTrigger: {
    trigger: ".four",
    pin: true, // pin the trigger element while active
    start: "top top", // when the top of the trigger hits the top of the viewport
    end: "+=400%", // end after scrolling 100% of the section
    scrub: 1
  }
});

// Clip-path animation
tll.to(layers.reverse(), {
  clipPath: "circle(71% at 50% 50%)",
  duration: 0.5,
  ease: "power1.inOut",
  markers: true,
  stagger: 0.25
})
  .to(pinWrap, {
  x: window.innerWidth - pinWrap.scrollWidth,
  duration: 4,
  ease: "none",
});

Here is a fork of your demo:

See the Pen QWepXOw by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Arun_ms]

Quote

@Rodrigo 
thankyou for responding 

like u said " You have two different demos that are doing two different things. On the first demo I can't see what's actually wrong, everything is working the way it should as far as I can see.",  yes its working fine, here i have changed the code like you suggested, see like in the first demo the text animation is working to early, it suppose to happen only when the background color changes fully and hit the top of the viewport only after that the text animation to be revealed, i have add a 1.2s time after the text animation, like this "+=1.2", now its working as intended, the only problem is the color it have to be white to black.

See the Pen mdNmEpQ?editors=1010 by Rare4pple (@Rare4pple) on CodePen.

 

[Arun_ms]

i have add the color changing code to the same timeline but that not end well,

[Arun_ms]

does this adapt to the viewport size,  the start/end values , also what about refreshing on new contents

 

[Rodrigo]

Hi,

 

Your first demo is a bit convoluted and I don't have time to dig into it right now. Sometimes the best approach is to just remove ScrollTrigger and create a timeline that works the way you intend.

 

Here you can see the background changing first and the text being tweened after that is completed:

See the Pen xxvdJKO by GreenSock (@GreenSock) on CodePen.

 

Then the same setup we add a section at the top and bottom and ScrollTrigger:

See the Pen dyxWjyR by GreenSock (@GreenSock) on CodePen.

 

Then you can combine this with the other section and everything should be working well. IN large projects like this with different sections and animations that can be a bit complex, is always a good idea to work everything section by section. When you have the code of one section working, just comment it out and start working on the next section. Then start adding the code blocks one by one and keep testing.

 

Hopefully this helps

Happy Tweening!

[Arun_ms]

@Rodrigo again, Thankyou for ur response,

your demo gave a bit more to think, and i made some changes and now its working as intended, but im not sure about the code, like is this the correct method,
here is the code and demo

See the Pen NWQjeZg?editors=1100 by Rare4pple (@Rare4pple) on CodePen.

again, thankyou for ur time<3♥

[Arun_ms]

@Rodrigo
here i have another animation, everything is working fine, i just need to clarify the code, is it good or bad, is there any important changes to make for better responsive approach? 
 

window.addEventListener("load", () => {

            const zoom = gsap.timeline({

                scrollTrigger: {

                    trigger: ".five",

                    start: "16% top",

                    end: "+=165%",

                    pin: true,

                    scrub: 3, // Smoothens the scrub behavior

                    ease: "power2.inOut",

                }

            });

 

            zoom.to(".png", {

                z: 250,

                scale: 1.1,

                ease: "power2.out" // smoother easing

            })

            .to(".menImg", {

                z: 250,

                transformOrigin: "center center",

                x: "-150%",

                scale: 1.2,

                duration:2

            })

            .to(".girlImg", {

                z: 250,

                transformOrigin: "center center",

                x: "150%",

                duration:2

            }, "<")

            .to(".backGround", {

                scale: 2,

                width: "100%",

                duration:2

            })

            .to(".video", {

                scale: 1,

                duration:3

            }, "<")

            .to('.layerss', {

                clipPath: "circle(100% at 50% 50%)",

                duration: 5,

            },"+=1");

        });

[mvaneijgen]

Seems totally fine. If you want to make it beter check out https://gsap.com/resources/mistakes/ especially y vs yPercent and if you can it always better to replace width and hight animation with transform: scale(). 

 

Hope it helps and happy tweening! 

[Arun_ms]

@mvaneijgen @Rodrigo thank you for your help and guidance, it has been very helpful to me❤️, thankyou guys