Help prototyping a parallax scroll to journey

[creativef23354655]

Hey, I'm relatively new to XD and still getting to grips with prototyping. I've been trying create something similar to the link below but keep failing. I've prototyped it with the scroll to feature but it's not quite right - I can't seem to figure how to get a toggle state to work and also have the teh white overlay over the next steps. Maybe I need a different approach with multiple artboards to achieve it but I'm not quite sure?

Here is what I'm hoping to achieve:

https://kissthehippo.com/products/coffee-subscription

Here's my attempt:

https://xd.adobe.com/view/74bfc91d-7b9e-4c7b-b05b-cbc964bde36a-21ec/?fullscreen&hints=off

Any help would be greatly appreciated!

Thanks

[Rishabh_Tiwari]

Hi @creativef23354655 ,

Thank you for reaching out. Please check out this similar discussion and try the suggestions shared in the third video on achieving Parallax scrolling in Adobe XD. Let us know if this helps or if you need any further assistance. I am keeping this discussion open for experts' recommendations. 

Thanks

Rishabh

[AkinGn]

Hi @creativef23354655, in addition to what @Rishabh_Tiwari suggested, as one trigger can only be assigned to one action (in this case tap is assigned to toggle mode) I couldn't think of a way to trigger also "scroll to" function. The only way I can think of is, directing the user to a certain artboard after the tap, which has the selected option has active, and doing a second click on the selected option to trigger the scroll to function. I only did for selecting "A" in Step 1 and selecting "E" in Step 2, you can see the prototype here: https://xd.adobe.com/view/a97b6a4a-dbe8-442a-a947-dc14dc4a6495-fc28/ and the file here: https://www.dropbox.com/s/bcmbnjtdho8nh25/toggle-and-scrollto.xd?dl=0 Hope this helps!

[creativef23354655]

That's great, thank you both @AkinGn & @Rishabh_Tiwari. It's almost there, perhaps with a bit of more experimenting I can figure it out.

Thanks

[Rishabh_Tiwari]

Awsome! Feel free to update the discussion if you need further assistance.