Scroll animation / intersection observer (?)

needtheanswers · 2026-08-07T16:03:17.773+00:00

Hi,I'm trying to recreate the scroll animation that is used in the mobile version. I've already managed to get the desktop version working, but I'm still struggling with the mobile version.I understand that the phone section is sticky but I can't figure out how the text fades in and out while still appearing to stay in the same position as you scroll. I hope that makes sense (?)Thanks a lot

needtheanswers
1 month ago
Hi,
I'm trying to recreate the scroll animation that is used in the mobile version. I've already managed to get the desktop version working, but I'm still struggling with the mobile version.
I understand that the phone section is sticky but I can't figure out how the text fades in and out while still appearing to stay in the same position as you scroll. I hope that makes sense (?)
Thanks a lot 🙏
Andreas Møller
27 days ago
Can you link to your version?
@Andreas Møller
Can you link to your version?
needtheanswers
27 days ago
I´ve tried to recreate it here: https://editor.nordcraft.com/projects/test13/branches/start/components/HomePage?canvas-height=740&selection=nodes.u5kp2ULcP48f2ive7TNsV.style&rightpanel=style&canvas-width=1009&mode=design
Andreas Møller
27 days ago
Nice!.

You can use scroll driven animations to create the effect you are looking for.

I made a copy here: https://editor.nordcraft.com/projects/mobilescrolldriven/branches/start/components/HomePage?canvas-width=800&canvas-height=754&mode=design&selection=nodes.3DGpXoFR7gRvFjwiqNdcV&rightpanel=style
Notice the animation-timeline property in the advanced section of the style panel.

IT maps the animations timeline to the websites scroll position.
I hope this helps
@Andreas Møller
Nice!.

You can use scroll driven animations to create the effect you are looking for.

I made a copy here: https://editor.nordcraft.com/projects/mobilescrolldriven/branches/start/components/HomePage?canvas-width=800&canvas-height=754&mode=design&selection=nodes.3DGpXoFR7gRvFjwiqNdcV&rightpanel=style
needtheanswers
27 days ago
Thanks a lot Andreas! 🙏 But do you have any idea how I can recreate the part with the text below the phone?
In the video, the text below the phone doesn’t seem to move but it looks like it changes when the phone screen changes. Or could there just be placeholders on the page, so the page scrolls but uses the same principle as the scroll driven animations you used in the copy you made?

Scroll animation / intersection observer (?)

needtheanswers

Andreas Møller

needtheanswers

Andreas Møller

needtheanswers