CSS Paper Roll Animation not Working Correctly

HTML-CSS
1

Hello Everyone,

I have been trying to create an animation for my portfolio site where a roll of paper un ravels to reveal it’s content. I have most of it done but I’m having a trouble getting the textures on the back of the sheet to move in a way where it look like the paper roll is actually rotating instead of a straigt bar moving accross the screen.

Also I would like to make it so as it unravels the text doesn’t move and is already in place like it would be in on an actual sheet of paper.

Any help and advice to fix and improve on this would be greatly appreciated. I have attatched the code pen link below:

BR,

Jonathan

2

hello and welcome back to fcc forum :slight_smile:

first of, thanks for this post, got to play with it a while, it was fun,

for your “text staying put” on animation part, you can try something concrete “width” for you “content” div

#content{
    width: 200px; // like this instead of %
    height: 90%;
    border: solid black 2px;
    margin: 1rem;
    overflow: hidden;
}

see if that helps, happy coding :slight_smile:

3

Hello,

Thankyou for the warm welcome back, I just tried what you suggested and it worked perfectly so thankyou for that.

Happy Coding

1 Like