ScrollTrigger starts from a wrong position

[Keyur kadam]

start position is incorrect in my site. but i copied the same code in codepen then it shows correct. can you please help me to find the issue here? https://prnt.sc/9h5kun1jv2TX

 

https://dddemo.net/html/Gippsland-Grammar/index.html

See the Pen WNJBPLo by KeyurKadam1814 (@KeyurKadam1814) on CodePen

[mvaneijgen]

Hi @Keyur kadam your site has a "Click to Enter Presentation" which does not go away when clicking, so that makes it really hard to debug.

 

What I would do, is disabling your external CSS/JS one by one until you found in which file the issue resides and from there try to pin point what the culprit is. 

[Keyur kadam]

@mvaneijgen After loading the site, click "enter presentation"

[mvaneijgen]

@Keyur kadam as I stated that doesn't work for me, it just selects the text. Next to that we can't debug live sites, there is no way for us to disable CSS or Javascript, so that is something only you can do.

 

If it isn't happing in codepen it is clearly some third party script that is interfering, so as I set disable everything one by one until the markers are correct and try debugging from there. 

[Rodrigo]

Hi @Keyur kadam,

 

Sorry to hear about the issues you are having. Unfortunately the codepen example shows that GSAP is working and doing exactly what is supposed to do. On top of that debug a live complex site (which looks really good by the way, great job!! 🎉) is quite hard.

 

The only advice I can offer is to create the ScrollTrigger instance of that particular section after everything else has been loaded. Is quite odd that every other ScrollTrigger animation is working as expected except for that, so clearly something is causing that section to have an offset in the start and end trigger positions. Perhaps create an example of the site just with that section or run a refresh method on that particular ScrollTrigger instance on the event handler for the Enter Presentation click event. Most likely there is something causing a layout shift that affects just that section.

 

As @mvaneijgen already suggested you'll have to isolate this going part by part or create a new instance of the site using the header footer and that section and then start adding the rest of the sections until it breaks.

 

Sorry we can't help you any further than this. Let us know if you have any other question.

 

Happy Tweening!

[Keyur kadam]

@mvaneijgen @Rodrigo i have found the issue i have scrolltrigger js for above div also. it causing the problem. because of the width. can you please tell me the solution for this? https://drive.google.com/file/d/11x1lvsLuCi4kDywRqExW499X3Bz25uch/view

 

javascript:

// this script for above div

let tl = gsap.timeline({

  scrollTrigger:{

      trigger: $("#animated-image-text"),

      // pin: ".keyur-animation",

      start: "center bottom",

      end: "+=200 ",

      scrub: true,

      // pin: true

      // markers: true

      // scrub: true

  }

});

tl.from($("#animated-image-text"),{width:800, opacity:1, duration:1});

 

// The script for the div with an incorrect start position

const initialPositions = [

    { x: -576, y: 0 },

    { x: -192, y: -384 },

    { x: 480, y: -96 },

    { x: -288, y: 576 },

    { x: 576, y: 288 },

    { x: 0, y: 0 },

    { x: 75, y: 0 },

    { x: -75, y: 75 },

    { x: 0, y: 75 },

    { x: 75, y: 75 }

  ];

  gsap

    .timeline({

      scrollTrigger: {

        trigger: ".grid-container",

        start: "top top",

        end: () => "+=500",

        scrub: 1.5,

        pin: true,

        anticipatePin: 0,

        pinSpacing: true,

        markers: {

            startColor: "purple",

            endColor: "fuchsia",

            fontSize: "3rem",

        }

      },

      delay: 0.2

    })

    .set(".gridBlock", { autoAlpha: 0 })

    .to(".gridBlock", { duration: 0.1, autoAlpha: 1 }, 0.01)

    .to(".grid-container .title-text", { opacity: 0, duration: 1 }, 0.01)

    .from(

      ".gridLayer",

      {

        x: (index) => initialPositions[index].x,

        y: (index) => initialPositions[index].y,

        ease: "none"

      },

      "<"

    )

    .to({}, {}, "+=0.2");

[Rodrigo]

Hi,

 

Just give the image wrapper a fixed height and overflow hidden so as the width increases the height doesn't change and keeps the start and end points where they should be. Seems like the easiest way to solve it IMHO.

 

Maybe @mvaneijgen or another user can give a better solution.

 

Happy Tweening!