How to create animation that changes text and backgroun...

At a glance

A community member has created an example in XD where scrolling forward and backward changes the text and background image. They tried to recreate this in WebStudio using the recently added animation feature but could not find a way to do it. The community member is asking if someone knows how to achieve this effect.

In the comments, another community member suggests checking out educational videos on a YouTube playlist. The original poster confirms that their example is possible and has an additional question: will the animations remain in place when the website is exported? Other community members respond that the animations should remain in place as they do not use any external libraries and rely on web APIs.

Useful resources

ddigizone

I have this example made in XD (attached) where I scroll forward and then backward. You see the last part of the paragraph changes text, and the background image changes also.
I tried recreating this in WebStudio with the recently added animation but have found no way to do this.

Somebody know how to do this?

6 comments

OOleg Isonen

please checkout all educational videos https://www.youtube.com/playlist?list=PL4vVqpngzeT5PIw14Re-_a3iJfawLdLk7

ddigizone

Yes I haven't studied it all yet, by your answer you mean that my example is possible. Great.

ddigizone

Another question : will my animations remain in place when I export the website ?

ddigizone

Or I must host the website on cloud/self-host in order to keep animations?

MMikeoxygen

the animations do not use any external libraries and they rely on web APIs.

MMikeoxygen

So they should remain in place

Add a reply

Join the Webstudio community

How to create animation that changes text and background image on scroll