flickering, jumping when using setPin()

I am using this following code to make a scale-based Animation with ScrollMagic and GSAP:

const timeline = gsap.timeline({ paused: true });
timeline.fromTo(Container, 1, { scale: 2.5 }, { scale: 1 });

const containerResizeScene = new ScrollScene({
    triggerElement: document.querySelector('#hero'),
    triggerHook: 0,
    duration: 500,
    gsap: {
        timeline: timeline
    }
});
containerResizeScene.Scene.setPin('#subheading'); //set Pin

but when I scroll, the scalable element always jumps up briefly. I have already tested several css properties, but nothing worked really well, except I use position: absolute and I remove the setPin() function.

I have read that a native setPin() function is planned… Could this be my solution? Can I wait for the implementation, or do I have to think of an alternative?

Are there any helpful tips or workarounds?

[jonkwheeler]

@niklasgrewe I added a “mimic pinning” example. It basically simulates a pin in the hero. https://scrollscene.jonkwheeler.now.sh/?path=/story/scrollscene-examples--mimic-pinning

You can see the code here: https://github.com/jonkwheeler/ScrollScene/blob/master/src/stories/story.js#L1464

Again though, if you want to learn how to use this more, please take Petr’s course https://ihatetomatoes.net/get-scrollmagic-workshop/ as it shows you how to do all of this.

[niklasgrewe]

@jonkwheeler thank you very much for this example. You don’t know how much you’ve helped me. Now the animation works as desired, no flickering or jumping - thanks for your effort

But I still have only one small questions and I hope that you can answer them:

How can i calculate the scale number correctly?

I do not want to scale the box with static values and mediaQueries. Would you know a sample formula that can calculate how much I need to scale the box on each screen? Currently I scale with 2.2 and use height: 100vh on the figure tag. The problem is that, depending on the scaling value, I also have to change the height so that the screen-image is displayed centered. How could I make the whole thing more dynamic? Do you have an idea?

---

I’m not asking you any more questions on this issue. But I would be very grateful if you could give me some assistance in these one point. Thanks again for your generous support. 🎉