Electrical pop-art scroll driven animation

[zoepje]

I want to implement this on the webinarpage where the background changes

[zoepje]

Electrical pop-art

• Bright colours (neon)
• Background patterns (mostly pocadots)
• Cartoon style

[zoepje]

Wireflow

On desktop since the nav is at the top you will see the previous pattern on there. Also the patters move a bit.

[zoepje]

Breakdown schetsen

Purple HTML
Blue CSS

[zoepje]

I decided to use css instead of svgs for the backgrounds. I found a website were you can generate css backgrounds and I used these backgrounds in the keyframes. I used scroll() if it is supported as animation-timeline that way the animation starts at the beginning of the scroll and ends at the end.

https://github.com/itsValyria/Oncollaboration/blob/d2351b14c0cb43a32f258cf08b3895afd7299e2a/src/routes/%2Blayout.svelte#L32-L37

https://github.com/itsValyria/Oncollaboration/blob/d2351b14c0cb43a32f258cf08b3895afd7299e2a/src/routes/%2Blayout.svelte#L51-L68

I also put animations on the nav. On mobile so that it shows the next background.

https://github.com/itsValyria/Oncollaboration/blob/d2351b14c0cb43a32f258cf08b3895afd7299e2a/src/lib/Constructions/navigation.svelte#L41-L46

https://github.com/itsValyria/Oncollaboration/blob/d2351b14c0cb43a32f258cf08b3895afd7299e2a/src/lib/Constructions/navigation.svelte#L74-L97

And on desktop so that it shows the previous background.

https://github.com/itsValyria/Oncollaboration/blob/d2351b14c0cb43a32f258cf08b3895afd7299e2a/src/lib/Constructions/navigation.svelte#L137-L142

https://github.com/itsValyria/Oncollaboration/blob/d2351b14c0cb43a32f258cf08b3895afd7299e2a/src/lib/Constructions/navigation.svelte#L99-L116

[zoepje]

I added an animation to change the background color of the cards when you scroll, by using a custom property that changes in the animation. If you want the colours to flow into the next on you have to use @property with inherits: true; this way the browser knows that this property can change. I used scroll(self inline) on the carrousel so that when you scroll trough it the colours change.

https://github.com/itsValyria/Oncollaboration/blob/d2351b14c0cb43a32f258cf08b3895afd7299e2a/static/css/global.css#L90-L112

https://github.com/itsValyria/Oncollaboration/blob/d2351b14c0cb43a32f258cf08b3895afd7299e2a/src/routes/%2Bpage.svelte#L72-L77

https://github.com/itsValyria/Oncollaboration/blob/d2351b14c0cb43a32f258cf08b3895afd7299e2a/src/routes/webinars/%2Bpage.svelte#L32-L37

[zoepje]

I also added a shake animation to the webinarcards on the webinarspage. Every card has a delay on it. I used the index of the loop and gave that to a custom property --index. With the index I calculated the delay calc(var(--index) * 0.3s)

https://github.com/itsValyria/Oncollaboration/blob/c9bf99262d0658e801c7eb9cc0380f49f5e13559/src/routes/webinars/%2Bpage.svelte#L19-L23

https://github.com/itsValyria/Oncollaboration/blob/39ffc5860218aa1760b931beccaf74599fb76a71/src/routes/webinars/%2Bpage.svelte#L44-L73