flickering, jumping when using setPin()

[niklasgrewe]

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?

[RemyyB]

Can you send a gif of it? I think I had the same problem, did you set a overflow-x or something on the body / html? What I did is remove the overflow from body and HTML and set a inner div in my HTML with overflow-x of hidden, that way I had no bugging / lagging scrolling with pins and gsap.

[jonkwheeler]

There's lots of reasons it could be jumping around. I'm not sure your entire code, but doing a setPin with ScrollMagic can be challenging to get setup right.

I'd give Petr's tutorials a shot to learn how to do this. https://ihatetomatoes.net/get-scrollmagic-workshop/

My note of adding a native setPin is not for ScrollScene (which uses ScrollMagic). It was intended for ScrollObserver. There is no reason to add a setPin to ScrollScene with ScrollMagic already provides one. Note that this issue is not a ScrollScene issue.

Again, I'd give Petr's course a shot. It's great and goes over everything you need for pinning. Pinning requires very specific css to pull it off. Hope this points you in the right direction.

[niklasgrewe]

@RemyyB thanks for your answer. I have actually used overflow-x: hidden on the body element. But when i removed this css property, i doesn't fixed the flickering, jumping... even though I use position: absolute, I get the error - Here is my GIF about that:

Otherwise, could you take a look at my code when I provide you with my repo or a codesandbox?

---

@jonkwheeler thank you for the tip and sharing. I'll take a closer look. Maybe RemyyB can help me fix it. I am fully aware that it is of course not a ScrollScene error. One other thing I'd like to know... can you tell me when you add the native setPin functionality?

[jonkwheeler]

Quite jumpy. Have you tried using a different scene object? I noticed you have the scaling and setPin on the same one. Maybe try to make them separate. Your scroll trigger is likely causing the jumpiness. Consider setting up a background div with scroll triggers set at various points.

Also, if this is the only "pin" you need, you don't need setPin. Just make 2 separate 100vw 100vh divs, stack them with absolute positioning, put the text on one layer, and the computer on the other. Make a 3rd div who's soul purpose is the length of the scene you want, like 300vh (3 screens worth of scrolling), and then just animate both y-axis 300vh. This effectively mimics the pinning effect. I've done this on massive 50 screen length scrolling sites.

[RemyyB]

@RemyyB thanks for your answer. I have actually used overflow-x: hidden on the body element. But when i removed this css property, i doesn't fixed the flickering, jumping... even though I use position: absolute, I get the error - Here is my GIF about that:

Otherwise, could you take a look at my code when I provide you with my repo or a codesandbox?

Sure, could you send me a example? And have you removed the overflow before or after Scrollmagic initalize?

[niklasgrewe]

@RemyyB yes i removed the overflow before Scrollmagic or ScrollScene initalize...

@jonkwheeler thank you for your quick and detailed answer. To be honest, I didn't quite understand how you meant it. I posted my code on codesandbox. What do you mean, it's possible you could use my code to show me what you mean? I imagine you don't have much time for that sort of thing. But I really am a beginner in this field and I am very grateful for any professional help.

codesandbox project: https://codesandbox.io/s/focused-stallman-vgt4y codesandbox fullscreen: https://vgt4y.sse.codesandbox.io/

thank you for your time and effort. I really appreciate it and would be very grateful if we can solve this problem or optimize my code 👍

---

And one more thing... I'm not exactly the best mathematician, I have to admit. Do you have any idea how I can make this animation responsive? Is there a formula that can calculate how much I need to scale the iMac in the beginning to make it look and work on the desktop and tablet?

I'm asking you this because I found almost no examples on the internet and I didn't find out from the apple catalina website which formula they use - they use exactly the same effect.

Maybe you have - considering my code - some better suggestions

[niklasgrewe]

Update: i just did some work on the animation and made some changes @jonkwheeler like you told me. Maybe we can figure out the rest together...

You can find the component in /src/components/index/Hero.svelte

[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. 🎉